React 学習ロードマップを読み解く
はじめに
React 学習のロードマップとして、有名なものに、下記があります：
この roadmap.sh は、Google のエンジニアによって立ち上げられた OSS です。
本記事執筆時点で、GitHub 上の全てのリポジトリの中で、７番目に多くの ⭐️star を獲得しています！
一方で、これから React を学ぼうとしている人にとっては、
それぞれのスキルが、：
- どのような技術で、
- なにが便利なのか、、
- どれくらい重要なのか、、、
などが、わかりづらい問題があると感じています。
なので、上記のロードマップをベースに、
それぞれのスキルについて、テンポよく紹介していきます！
少しでも、React 学習の助けになれば、嬉しいです 🙌
React 学習ロードマップの区分
最初に、本記事内では、
ロードマップを大まかな区分として、３つのパートに分けていることを確認してください：
- React の超入門：まず React について知る
- React の基礎：そして開発の基礎を抑える
- React の実践：より実践的な開発のベストプラクティスを学ぶ
そして、適宜、roadmap.sh のロードマップと照らしながら読むことをお勧めします！
React の超入門/ロードマップ
初めは、React で開発をする上での、前提となるような内容です 👍
1. Vite ：React アプリを構築する
vite は、高速な開発環境とビルドツールを提供する JavaScript のビルドツールです。
Create React App (CRA) と比較しても、：
- vite の方が高速に動作します
- そして、2024 年現在では、CRA のメンテナンスは既に止まっており、React 公式からも推奨されていません。
特別な理由がなければ、CRA ではなく、vite を使用した React 環境構築に慣れておくのが、おすすめです！
2. React のコンセプト：コンポーネントとレンダリングについて知る
まず React に慣れるために、下記を確認しておいてください：
- JSX：
同じファイルに、JS とマークアップを記述する記法 - Props と State：
コンポーネント間で値を共有する方法と、コンポーネント内で変化する状態を管理する方法 - 条件付きレンダリング：
JS の条件式を使って、条件に一致するマークアップをレンダリングする方法
三項演算子（? :）・論理演算子（&&） - コンポーネントのネスト：
childrenというpropsを使用して、コンポーネントに子コンポーネントを埋め込む方法 - イベント処理：
クリック時や、フォームの挙動と、その際に発火する関数の定義 - リストとキー：
配列に、map 関数などを使用する際、個別のアイテムにユニークな key を割り当てる
React の基礎/ロードマップ
React には、開発を加速させる、組み込みの便利機能（Hook）が複数存在します。
なので、次のステップでは、
このフックを中心に、基礎を固めていきます！
1. useState：React コンポーネントで変数を管理する組み込みの機能
React コンポーネントに変数を追加、そして管理するためのフックです。
useStateは、レンダー間でデータを保持することができる、コンポーネント固有のメモリです。
ここでは、state 内の配列やオブジェクトを、
イミュータブル（不変性）に操う方法も、学ぶ必要があります。
2. useEffect：コンポーネントを外部システムと同期させるためのフック
useEffeact は、React が制御していないコードが必要な場合に、使用されます。
上記の公式には、以下のように記載されています：
コンポーネントによっては自身がページに表示されている間、ネットワーク、何らかのブラウザ API、またはサードパーティライブラリとの接続を維持する必要があるものがあります。これらのシステムは React によって制御されていないため、外部 (external) のものです。
ブラウザが画面を描画したタイミングや、
監視する値が変化したタイミングで、副作用を起こすことができます！
ただ、Effect を使ったデータフェッチは、公式でも推奨されていないので、別のアプローチを検討してください！
3. React Router：クライアントサイドルーティングを行うためのライブラリ
React Router は、React のアプリケーションで、クライアントサイドルーティングを実装する際の、最も有名なライブラリです。
そもそも、従来の Web サイトは、
URL に応じたリクエストと、サーバーからのレスポンスで、HTML や CSS をブラウザ上に表示します。
しかし、クライアントサイドルーティングでは、
- アプリが、サーバーへ別のファイルをリクエストすることなく、URL を更新します。
- なので、アプリはすぐに新しい UI をレンダリングします
- この際、必要に応じてデータフェッチなどを行い、新しい情報でページを更新します
これにより、ブラウザが新しいドキュメントファイルをサーバーにリクエストする必要がないため、UX が向上します。
これがいわゆる SPA（シングルページアプリケーション）ですね。
4. Zustand：グローバルな状態管理ライブラリを導入する
先ほど、useState で、React コンポーネント内で状態を管理できることを、紹介しました。
しかし、実際の開発では、以下のようなケースがあります：
- アプリ内の広い範囲にわたって、共有したい変数が存在する
- 複雑なアプリでは、State と Props での値の受け渡しでは、管理が大変になる
この場合に、
アプリ全体での状態管理を、効果的に行うためのライブラリを、導入することができます！
これの選択肢としては、下記などが挙げられます：
- Redux
- Zustand
- Jotai
ここでは、Redux の思想を受け継いで、
さらに使いやすく簡素化した、Zustand をお勧めしておきます：
React の実践/ロードマップ
この先は、より実践的な解決策を学ぶ段階です。
ベストプラクティスや、デファクトスタンダードとなるライブラリを使用し、
どのような課題を解決しているのかを、理解していきます。
ここから先は、大まかに分類して、紹介していきます 👍
1. React のコードベースのクオリティを担保する方法
- TypeScript：静的なタイプチェックによるバグの早期発見と、開発体験の向上
- ESLint：コーディング規約の自動チェック
- Prettier：フォーマットの自動整形
- Husky：コミット直前に、品質チェックを強制する
上記のような、仕組みを導入することで、コードベースの品質を担保することができます！
他にも、以下のようなプラクティスで、
人間がより理解しやすいコードになります：
- コンポーネントの分割：再利用しない UI であっても、適切に関心を分離させることで、保守性が向上
- カスタムフック：コンポーネントのマークアップと、ビジネスロジックを分離することが可能
2. React でのフォームの実装
- 状態管理やイベント処理を簡素化して提供しているライブラリ
- パフォーマンスも考慮され、エラーハンドリングも簡略化できる
Zod：
- TypeScript ファーストな、スキーマのバリデーションが可能
- React Hook Form との連携も簡単
これらを使用することで、useStateなどを使用した、自力でのフォーム実装よりも、簡単かつ高品質なフォームが実装できます！
3. パフォーマンス最適化
React アプリケーションのパフォーマンスを高めるには、
以下のような方法があります：
- React Query or SWR：データキャッシュ管理を自動化し、不要なデータフェッチを解消できるライブラリ
- メモ化（useMemo, useCallback）：不要な再計算、再レンダリングを解消することができる、React 組み込みのフック
- Suspense：アプリケーション内の、ハイドレーションを分割することで、より早くインタラクティブな状態にすることが可能
4. ソフトウェアテスト：
React アプリケーションのテストに入門する際は、下記を確認しておいてください：
- Jest, Vitest：ユニットテストの作成するライブラリ
- React Testing Library：React コンポーネントのテストが可能
- MSW：モック API を使用して、より本番運用に近いテストを記述できるライブラリ
- storybook：UI コンポーネントの独立した管理とテストが可能
- Playwright：クロスブラウザでの、E2E テストが可能
おわりに
roadmap.sh の React のページを大まかに紹介してきました！
Recat を学ぶことで、モダンなフロントエンドアプリケーションを、構築することができます！
そしたら、その後は Next.js などのフレームワークを使用したり、
React Native などで、ネイティブアプリを構築することもできますね 👍
最後まで読んでいただだき、ありがとうございます ！
もし、間違いや補足情報などがありましたら、
ぜひ教えてください！
Happy Hacking ;)