世の中たいへんな状況ですが、 EY-Office では淡々と新しいReact教育のテキストを書いてます。
今回のテキストは現在の主流になりつつある、以下のような技術を使ったReactの入門テキストです。
- React Hooks メイン (React.Componentクラスは解説程度)
- TypeScriptメイン
- Redux章には、Redux Toolkit を採用
これらの技術は、先端の技術を採用するネット企業等では既に使われている技術なので、ネット上には充分に情報があり楽勝かなと思ったのですが、案外苦労しました。
Create React App
2年前に 作りながら学ぶ React 入門 を書いた時には、まだ Create React App はありませんでした。Webpack, Babel, ESLint … をインストールし、設定ファイルを書かないと React が試せない状況でした。 作りながら学ぶ React 入門 では開発環境の構築、開発環境の解説に2章も使っていました。
Create React App が出た事で、これらの煩雑な作業をせずに、直ぐに React の学習が始められるのは素晴らしい事です。また Create React App は TypeScript もサポートしています。
しかし、デフォルトの Create React App が作るコードには、テストコードや PWA 等のコードも含まれており、初心者に教えるのには少し躊躇します。このファイルとこのファイルは無視して下さいと言っても、気になって先に行けない受講者もいます。
困ったなと思っていたら 独自コードを生成出来るテンプレート機能 があるではないですか！ これを使ってシンプルな Hello World を表示するだけの テンプレートを作りました 。
TypeScript + VSCode
TypeScriptはフロントエンド開発の大きな力になる に書いたように、TypeScriptは柔軟過ぎる JavaSctipt を補正してくれる良い言語です。
今回、全部のサンプルコードをTypeScriptに書き直しましたが、TypeScript + VSCode の良さに感激しました。ライブラリー等の型情報があるので、VSCode は IDE のように関数、メソッドの候補が表示されたり、引数の使い方が判りにくいライブラリーの関数も定義ファイルを読むことで、ドキュメントを読まなくてもコードがスイスイに書けます。
型的におかしければエラーが表示されるのでVSCode上でエラーが無くなれば、 JavaScriptで良くおきる 画面真っ白 にならずプログラミングの生産性が上ります。
Redux Toolkit
Redux libraryは今後どうなるの？ に書いたように、Redux という技術・思想は React 開発で受け入れられています。しかし React ContextやReact Hooksなどの React 側の進化で Redux ライブラリーの存在は微妙になっています。 そのな中 Redux開発チームがリリースした Redux Toolkit は、Reduxの煩雑なコード記述や副作用が無いコードを強要されるReducerなどが改良されています。
今回のテキストではこの Redux Toolkit を採用してみましたが、結果といしてはとても良かったです。ただし、React + TypeScript + Redux Toolkit を使った記事等は思ったより少なくて、どのように書くのがベストなのかを決めるのに手間取りました。
async/await
今や、当たり前になりつつある、async/await ですが 2年前の 作りながら学ぶ React 入門 には登場していませんでした。
JavaScript(TypeScript)は非同期処理が基本です。そしてコールバック地獄へ・・・ Promise を使う事でだいぶ良くなりますが初心者には、まだ難易度が高いです。
async/await の登場で、理解しやすい同期処理のように書けるのが素晴らしいです。ただし本当に同期処理になるわけではなく、Promiseを使ったコードの構文糖(シンタックスシュガー)なのだというのを、ちゃんと理解してないと後々はまります。TypeScriptを使ったいると async/await を使うと Promise<string> のような型が出てきて Promise を意識させられるのは良いことですね。
