JavaScript入門からreactやreduxで最初のウェブアプリを作るまでのおすすめ勉強法です。
対象読者
他の言語はできて、JavaScript、Web系の開発は知らない人向けです。
私もこの状態から独学で勉強中なので、もっといい方法があればぜひ教えてください。
環境構築
エディタ
最低限の道具として、コードの補完とlinter、フォーマッタ、タグジャンプの実行できるエディタが必要です。
spacemacsならば、JavaScriptとreactのスタックを入れるだけで、フォーマッタの自動実行以外はできている状態になります。ただ、JSXを編集したときに変な挙動をする時がありました。
また、ちょっと雑ですがVScodeにJavaScript関係の人気がありそうなプラグインを全部入れて、不要なものを外していくのが簡単でおすすめです。ユーザの多さなどを考えると、VSCodeを使ったほうがWeb系の開発との相性は良さそうです。Windowsの場合、eslintやnodeやnpmなどの周辺ツールはchocolatelyをインストールして、chocoコマンドを起点にどんどん入れていくのがお手軽です。
Boilerplate
JavaScript入門者にとって最大の壁ではないかと個人的に思っている、謎のツールが乱立するゾーンです。パッケージマネージャ、タスクランナー、トランスパイラ、モジュールバンドラ、Linterの設定ファイルをひっくるめて、色んな人がBoilerplateとして配布しています。JavaScriptはトランスパイラやLinterの選択を通して、言語の仕様まで自ら選択できてしまう自由度があるため、失敗したときに無駄になる範囲が大きいです。
具体的なツールとしては使っている人が多そうな、gulp, yarn, webpack（＋何かのテストフレームワーク）が良さそうです。gulpがyarnやそれ以外のツールを実行して、yarnがnpmやそれ以外のツールを実行して・・、といろいろ自動的にやってくれます。工夫すればもっとツールを減らせますが、減らすための工夫が必要になるので、この辺が落としどころかと思います。
また、トランスパイラとLinterは必須です。babelを使ってES2015より前のバッドノウハウを見ないですすめたほうが良いです。babelを使うので、Linterはeslintではなくてbabel-eslintを使うとトランスパイル時の警告とあったものが出てきます。
Emmet
JavaScriptと直接関係しませんが、フロントエンド開発をするにあたって、HTMLやCSSはさけて通れません。
EmmetはHTMLやCSSを省略して記述する方法です。なにかの解説動画を見たときに、すごい勢いでHTMLができていくのをみてびっくりしました。完成したコードを説明していくタイプのチュートリアルには絶対登場しないので、意外と盲点だと思います。
チートシートが充実しているので、都度見てれば使うところだけ覚えられそうです。spacemacsでもVScodeでもEmmetからの展開コマンドがあります。
情報の選び方
JavaScriptは他の言語に比べて情報量が多い分、古いものや、公式チュートリアルの寄せ集めみたいな情報が多いです。
世の中の古い解説と、そこから派生したと思われるイマイチな情報の簡易的な見分け方は以下のような感じです。
- 変数の宣言にletやconstではなくて、varを使っている (Javascript全般)
- React.createClassを使っている (React)
参考文献とチュートリアル
あとはチュートリアルを通して実践です。
初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発
ざっくり6章の「関数」あたりを読んでおいて、あとはリファレンスとして利用します。
ゼロから始めるJavaScript生活
最新の環境構築手順を学べます。結構更新されているみたいです。Boilerplateのベースを理解しながら作ることができます。
JavaScript初級者のためのコーディングガイド
独学や身近に詳しい人がいない場合は、eslintの結果やこういった先達のガイドにとりあえず従っておくのが良いです。
eslintのルールもgithubのREADMEなどに理由が書いてある場合が多いので、文法ミスではないエラーが出たときは見ると納得できます。
Tutorial: Intro To React
SurviceJS - react
Getting Started with Redux
このあたりのチュートリアルでreactとreduxフレームワークを勉強できます。
Reduxをソースコードから理解する その1 - Qiita
Reduxをソースコードから理解する その2 - Qiita
Reduxのソースコードは小さくて読みやすいので、JavaScriptの勉強も兼ねて使い方もわかれば一石二鳥です。
次にやること
Electronについて、もうちょっと勉強する予定です。
Modern JavaScript概観、そしてElectronへ
イベントで何ができるのか見当をつけるために、DOMのAPIやHTMLについても知っておきたいです。
Mozilla Developer Network
あとがき
JavaScript入門から順番に手を付けられるような、ざっくりとしたガイドでした。
自分のやったことをそのまま書いているので、新しい情報が増えたら追記する予定です。ぜひ、おすすめの情報があれば教えてください。