最近、Reactの研修が増えてきているので、EY-OfficeのReact教育の解説図を書いてみました。
JavaScript(ES6)
ReactはJavaScriptを使ったSPA(Single Page Application)のためのライブラリーです、 まずはJavaScriptがすらすらと書けないと始ません。特にES6(ES2015〜)で大きく変わったJavaScriptをを正しく理解している事が重要です。
また、一部のプログラマーは map や filter 等の高階関数や、JavaScriptの根幹である無名関数などを理解してない方もいます。これらは関数指向の高まるこれからJavaScriptプログラミングでは重要な点なのでしっかり学んで頂きます。
TypeScript
JavaScriptに型を追加した TypeScript が使われるプロジェクトも増えています。 TypeScriptはタイプミス等の早期検出やデータ構造を明確に出来、フロントエンド開発の強力なツールになります。
React
この教育のメインは、Reactでフロントエンド・アプリケーションを作れるようになることです。
ReactのHTML生成部分は従来のアプリでよく使われていたテンプレートではなく、コードの中にJSXというHTMLを直接書ける方式を採用しています。まずJSXが自在に書けないとReactは始まりません。
また、ReactはSPA用ライブラリーですが、コンポーネント指向でコンポーネントに渡す引数の props 、コンポーネントの状態や値を保持する state などの概念があり、それらを正し理解する必用があります。
さらに最近 Hooks や Context が導入され、 Reactプログラミングスタイルを大きく変わろうとしていますので対応しています。
モダンJS開発環境
作りながら学ぶ React入門 を書く少し前までは、ES6、ESLint等を使ってReactの開発環境を作る方法がいくつかありましたが、Webpackが主流になって行く時期でした。
現在はFacebookも create_react_app のような簡単に開発環境を作れるツールを提供していますが、その中で動くBebel等を知る事は今でも重要ですし、カスタマイズが容易で実践的なWebpackの概要を採用しています。
テスト駆動開発(TDD)
テスト駆動開発(TDD)は徐々に広まっていますが、まだテストコードを書く習慣の無い開発現場もあります。
テスト駆動開発でロジックを書いたり、E2Eテスト(End to End Test)に触れて頂きます。
Redux
現在Reduxは、Reactを使った大規模なアプリを作るのには必須の感がありますので、Reduxのコンセプト、実装方法を学んで頂きます。
ただし Hooks や Context の登場以後 Redux は揺れていると思います。詳細は Redux libraryは今後どうなるの？ をご覧下さい。
Application
アプリケーション作りの際に必要になる機能の内、バックエンド(サーバー)との連携に付いては、簡単なサーバーを立て学んで頂きます。
