タイトル通り、始めました。
そもそもWebの知識に乏しい筆者が、勉強を始めました。
きっかけ
仕事で、Webアプリのサーバーサイドの開発は、一部やっています。記事に少し書いています。
フロントエンドは、若干やった程度で、こう書けばこうなるよ！というのをコピペして動かせる程度の知識です。
しかし、現状の技術動向を見ると、フロントエンドの知識が無いと、そもそも話についていけない場合が出てきています。
サイトの応答速度を上げるためにSPAやPWAを採用する場合、新たなJavaScriptのライブラリを採用する場合、JavaScriptの構造を含めシステム全体の設計を行う場合等々、フロントエンドの知識が無いと辛いです。
特に、PWAには可能性を感じるものの、ギリギリ普及しきっていない（気がする）今の段階で学んでおかないと*1、追いつけなくなるという危機感を感じています。
というわけで、勉強を始めました。
目標
PWAで、何らかのアプリを作り、公開する。
これを目標にします。
勉強方法
そもそも、HTML、CSS、JavaScriptをロクにやったことが無いです。
まずはそこの基礎知識をつけます。
その後、自分に欠けている知識を認識した後、その埋め合わせ等を行う、という計画にしました。
言語勉強
以下のサイトを利用しました。
paiza ラーニング
JavaScriptの勉強に使いました。
基本文法のみなので、さくっと終わらせました。
JavaScriptだけでなく、様々な言語の勉強ができます。
Progate
無料会員で登録しました。
言語のうち、
- HTML & CSS
- JavaScript
- jQuery
の３つを、解けるところまで*2解きました。
以降
ここまでは全く苦労しませんでした。
大して難しくもなく、基礎的な文法や、あいまいだった部分を明らかにすることができました。
問題は、この後どうやって勉強するか、です。
上のサイトの問題をすべてこなしましたが、PWA等を使いこなせる実践レベルには遠く及ばない、ということがはっきりわかりました。
正直に言って、どうしたらいいのか分からない状況でした。
仕方ないので、PWAのチュートリアルを流すことにしました。
PWAチュートリアル
Google公式です。
サイトから、ソース一式をダウンロードできます。
ソースを元に、以下の環境でチュートリアルを実施しました。
| 環境 | ツール名 | バージョン |
|---|---|---|
| OS | Windows10 64bit | 1803 |
| ブラウザ | Google Chrome | 66.0.3359.181 |
| サーバー | Python | 3.6.5 |
| エディタ | Visual Studio Code | 1.23.1 |
チュートリアルでは、Web Server for Chromeのインストール方法が書いてありますが、代わりにPythonを使ったので、今回は使用しませんでした。
感想
意味が分かりませんでした。
ハードルが高すぎたように思います。
いえ、解説はよく分かりますし、どういう仕組み（キャッシュ等の使い方等）で動いているのかは、だいたい理解できます。
実際、オフラインできちんと動作したときは、すごい！とも思いました。
しかし、ソースに書いてあるイベント等が、よく分かりません。
結果として、ああ、そういうものなんだなみたいな、何も理解できない状態となっています。
JavaScriptのイベント等について、もっと学ぶ必要があると実感しています。
Pythonで開発サーバーを起動する
Pythonで開発サーバーを起動する場合、
python -m http.server 8000
というコマンドを使います。
しかし、これだとmimeの判断が行われません*3。
そこで、GitHubを参考に以下のようなソースを書き、
それを
python .\server.py
というコマンドで起動するようにしました。
同時並行
フロントエンドの勉強をするなら、JavaScriptの最新事情も知る必要があります。そこで、
を読んでいます。
また、以前途中だった
も、同時に読み進めています。
今後
まず、JavaScriptのイベントがさっぱり分からない、ということがわかりました。
とりあえずは、
JavaScript初級者から中級者になろう — uhyohyo.net
というサイトを見つけたので、こちらを読み進めようと考えています。
最初に読むべきだったような気がする
また、言語が型付きではない、というのは知っていましたが、想定以上に意味が分かりません。
TypeScriptについても学びたいところです。
おわりに
現状、私が学んだノウハウを紹介するのも難しいです。
なんとなく、こういうものかな？みたいな理解ですし、paizaとProgateの丸写しにしかなりません。
きちんと理解したうえでPWAでアプリを作るまでは、茨の道であることがわかりました。
私にとって未知の領域です。
諦めず、学習を続けようと思っています。
