React初心者が中級者になるために！【SkillsBuild】書いて覚えるReact×TypeScript開発！＠アイドルエンジニア

1. Reactに入門した！でも次になにをしていいのかわからない

こんにちは。アイドルエンジニアです。
前回、フロントエンド技術に入門したいけどなにからしていいのかがわからない状態から、「SkillsBuild」で提供されている「モダンJavaScriptの基礎から始める挫折しないためのReact入門」というコースを学ぶことでモダンJavaScriptの概念や機能を確認しつつ、Reactの書き方や有用性を学ぶことができました。
無事、Reactに入門を果たしたことですし、これでReactを用いたフロントエンド開発をやっていこう！・・・となるかというとならないんですね。現状は、React開発の第一歩、スタートラインに立てただけで、ここから開発といってもなにをしていいのかがわからない。次へのステップをどうしていいのかがわからない状況に陥ってしまっています。
さて、「モダンJavaScriptの基礎から始める挫折しないためのReact入門」の続編である「Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版」では、そんな私のようなユーザーに向けて、エンジニアとしてステップアップするために知っておくべきことを順序立てて説明してくれています。

2. Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版

このコースでは主に、ステップアップのために必要な技術を、以下のセクションに分けて説明してくれます。

・再レンダリング最適化の方法
・様々なCSSのあてかた
・実践的な画面遷移(React Router)の方法
・Atomic Designに基づいたコンポーネント分割
・グローバルなstate管理
・TypeScript × Reactのテクニック
・カスタムフックの使い方
・Chakra UIを用いた実践アプリの作成

順を追って説明します。

再レンダリング最適化の方法
前回、stateの更新などによって生じる「副作用」について理解することはできましたが、具体的にどのようにすればレンダリングする条件や対象を指定できるのかといった、再レンダリングの最適化手法については見送られていました。本コースでは、memo化や、useCallback()を使用することで、再レンダリングの制御手法を学ぶことができます。
講座では、以下のように、テキストボックスと子コンポーネントの表示を切り替えるボタンを実装したページを用いてハンズオン形式で解説していきます。

画像①　テキストボックスと表示エリア

画像①の「表示」ボタンをクリックすることで、子コンポーネントである黄色で囲われたエリアを表示させることができますが、レンダリングの際に、2000個の数値を持った配列の要素を出力するという重い処理が走るようになっています。

画像②　表示ボタンをクリックした状態

画像③　レンダリングの度に重い処理が走る

この状態でテキストボックスに値を入力すると、textのstateが更新され、再レンダリングが発生してしまい、余計な重い処理を行わなければならなくなってしまいます。

画像④　textの更新で再レンダリングされる

画像⑤　テキストボックスに値を入力した際の挙動

これを回避するために、レンダリングの度に重い処理が走るコンポーネントをmemo()で囲うことで、memo()の引数に指定したstateが更新されない限り、再レンダリングを行わせない処理を施すことができます。
実際に、メモ化した後の挙動は画像⑥のようになります。コンソールから、再レンダリングが行われていないことがわかります。

画像⑥　テキストボックスを更新しても再レンダリングされない

このように本コースでは、実際に問題となる設計を一度、自分の手で作った上で、その改善までを行うことで、より実務的なコーディングスキルを身に着けることができます。

様々なCSSのあてかた
前回までは、styles.cssにCSSをベタ書きし、それを読み込むことによってCSSをあてていましたが、このセクションでは

・Inline Styles
・CSS Modules
・Styled JSX
・styled components
・Emotion

の５つの技術を紹介し、その扱い方と利点を確認していくことができます。

実践的な画面遷移(React Router)の方法
React Routerを用いたルーティング設定を学ぶことができます。React RouterとはコンポーネントとURLを紐づけるために用いられるライブラリです。React Routerを用いることで、“DOMの動的な書き換えによってページ遷移を実現する” Single Page Application (SPA)を作成することができます。
講座では、ホームページから他ページへの遷移、ネストされたページへの遷移、URLパラメータ/クエリパラメータの使用、stateを渡すページ遷移、useHistory()を用いた画面遷移、404ページの作成までをカバーしており、React Routerの基本的な機能を実際に挙動を確認しながら理解することができます。

画像⑦　React Routerを使った画面遷移

Atomic Designに基づいたコンポーネント分割
パーツ・コンポーネント単位で定義していくUIデザイン手法であるAtomic Designの考え方を、React開発に応用していきます。Atomic Designではパーツの単位を「ATOMS」「MOLECULES」「ORGANISMS」「TEMPLATES」「PAGES」の５つの段階に分けて考えます。これを、開発に応用し、例えばボタンやテキストボックスをATOMSとして定義し、検索ボックスをMOLECULESとして定義していき、最終的にPAGESの集合であるWEBサイトを作っていきます。
講座では、画像⑧のようにAtomic Designの考え方に基づいてパーツを定義していき、最終的にトップページとユーザー一覧ページからなるサイトを作ります。

画像⑧　Atomic Designの考え方に基づいてパーツを定義

グローバルなstate管理
例えば、ログインしてきたユーザーが管理者か一般ユーザーかによって機能に切り分けたいといった時、ユーザーの種類を表すフラグを渡す必要がありますが、講座では一度、フラグの受け渡しをコンポーネント間のバケツリレー方式で実装し、その後、グローバルなstateを用いて管理する手法で実装することでグローバルstateの利点を理解することができます。また、その後、Facebookが提供している「Recoil」というstate管理ライブラリの使い方を、実装を通して学んでいきます。

TypeScript × Reactのテクニック
TypeScriptとはJavaScriptに型情報を付与した言語で、Reactとの設計思想との相性も良いことから、Reactによる新規開発の際には、TypeScriptの使用が広く推奨されています。
講座では、まずTypeScriptの型の種類や型指定の方法といった基礎的なところから学んでいき、実際にReactのプロジェクトをTypeScriptを用いて記述していきます。まず、型指定がないせいでバグってしまっているコードを記述し、型指定をすることでなにが嬉しいのかということを逐一確認しながら講座は進んでいきます。

画像⑨　共通管理される型定義

実際に定義した型を用いて、stateやコンポーネント自体に型を付与する方法を学んでいきます。また、「Pick」や「Omit」を用いて型の中から指定した要素だけを付与する方法や、オプショナルチェイニングを用いて、型定義された要素の受け渡しを任意にする方法なども追加で学ぶことができます。

カスタムフックの使い方
コンポーネントからロジック部分を分離し、使いまわせるようにすることができるカスタムフックの作り方を学んでいきます。
講座では、JSONPlaceholderからデータを取得するコンポーネントを、まずカスタムフックを使わない方法で記述していきます。ここで、カスタムフックを使わない場合は、ソースコードの見通しがかなり悪くなってしまうことを確認した後に、記述したコンポーネントの、ロジックに相当する部分を切り出し、カスタムフックとして再利用する方法を学ぶことができます。

Chakra UIを用いた実践アプリの作成
これまでの総まとめとして、ReactのUIコンポーネントライブラリである「Chakra UI」を使って、ユーザー管理のアプリを作っていきます。
ユーザー管理アプリは、主にログインページとユーザー一覧ページからできていて、バックエンドは実装せずに、JSONPlaceholderのusersに存在するユーザーIDが入力された場合にログインすることができます。

画像⑩　JSONPlaceholderのuser1

また、管理者ユーザーでログインした場合は、ユーザーの詳細情報を編集する権限が与えられます（ただしバックエンドは開発されていないので、あくまで挙動のみ）。

3. まとめ

前回の「モダンJavaScriptの基礎から始める挫折しないためのReact入門」を学んだ段階では、Reactの基礎を理解したといった感じで、実際にアプリケーションを開発できるレベルには到達していませんでした。本講座は、ルーティング設定やコンポーネントの分割、そしてTypeScriptを用いたコーディングと、Reactを実務で扱う上で欠かすことのできない技術が満載に含まれており、コースの全セクションを終える頃には、簡単なアプリケーションなら自分で開発することができる、「開発しながら都度、調べて覚えていく」段階に到達することができました。
加えて、一貫して、従来の技術で実装した場合、そして悪い例を敢えてコーディングすることで、「なぜReactやTypeScriptを学ばなければならないのか」「なぜこのライブラリを使う必要があるのか」といった「Why」の部分を見失うことなく学習することができました。

4. 終わりに

今回紹介した「Reactに入門した人のためのもっとReactが楽しくなるステップアップコース」はIBMが提供しているオンライン学習プラットフォームである「SkillsBuild」で受講することができます。

詳細はこちらを参照してください。