React

リアクティブで組み合わせ可能なインターフェース

React はユーザーインターフェースを構築するための定番ライブラリです。コンポーネント、JSX、state とフック、さらにデータ処理、パフォーマンス、アーキテクチャまで。最初のコンポーネントからエキスパートのパターンまで学びます。

基礎

初級 - 基本を一歩ずつ

• なぜReactなのか、最初のコンポーネントとJSXReactとは何かを知り、いちばん最初のコンポーネントを書いて、JSXの基本ルールを学びましょう。
• Props：コンポーネントにデータを渡すpropsを通じてコンポーネントにデータを渡すことで、再利用できるコンポーネントの作り方を学びましょう。
• useStateによるローカルなstateuseStateでコンポーネントに記憶を持たせ、ユーザーの操作に合わせて変化する値を表示できるようにしましょう。
• イベントと条件付きレンダリングユーザーの操作に反応し、条件に応じて要素を表示したり隠したりしましょう。
• リストのレンダリングとkeyの役割mapを使ってデータの配列を画面上の要素のリストに変え、keyで各要素を識別しましょう。

ステップアップ

中級 - 実践的なものを作る

• 制御されたフォームすべてのフォームフィールドを React の state から制御する方法を学び、信頼できるデータを検証して送信できるようにします。
• useEffect: 副作用、依存配列、クリーンアップuseEffect を使ってコンポーネントを外の世界と同期させ、依存配列とクリーンアップを使いこなします。
• state を引き上げてデータを共有する各 state を最も近い共通の祖先に置くことで、重複させることなく複数のコンポーネント間でデータを共有します。
• コンポジション: children とコンポーネントへの分割children prop を使って再利用可能なコンテナコンポーネントを作り、画面を明確な責務ごとに分割します。
• API を呼び出す: fetch、ローディング、エラー副作用の中で fetch を使ってリモートデータを読み込み、ローディングとエラーの状態をきれいにモデリングします。

応用

上級 - 高度なパターンとパフォーマンス

• 複雑な state のための useReducer遷移を一元化し、あり得ない組み合わせを排除する純粋なリデューサーで、複雑な state を構造化します。
• Context: prop drilling なしで共有するcontext を使って prop drilling なしでデータを行き渡らせ、その再レンダーと制約を管理下に置きます。
• カスタムフック: ロジックの抽出と再利用state を持つロジックを、再利用でき、組み合わせやすく、テスト可能なフックへ抽出します。
• メモ化: memo、useMemo、useCallbackReact.memo、useMemo、useCallback がいつ本当にアプリを速くし、いつ意味もなく複雑にするのかを学びます。
• useRef と DOM 操作レンダーの純粋性を壊さずに、useRef で DOM を操作し、インスタンスの値を保持します。

マスター

エキスパート - 設計、内部構造、エッジケース

• 内部の仕組み: 再調整、バッチ処理、並行レンダリングFiber がどのようにツリーを再調整し、更新をバッチ処理し、レンダリング作業を中断可能にするかを学びます。
• Suspense、lazy、そしてコード分割サスペンションのメカニズム、コンポーネントの遅延読み込み、バンドルの分割を習得します。
• エキスパートパターン: コンパウンドコンポーネント、制御の反転コンパウンドコンポーネント、state reducer、そして render props とフックの適切な選択によって、柔軟なコンポーネント API を設計します。
• モダンな React: Server Components、use、useTransition、useOptimisticサーバーコンポーネント、use による Promise の読み取り、そして React 19 の楽観的更新を探ります。
• 品質: Testing Library、StrictMode、Profiler実装ではなく振る舞いをテストし、StrictMode の二重呼び出しを活用し、Profiler でレンダーを測定します。