Reactコース

副作用の処理を学びます。コンポーネントのレンダリング後に実行される処理を理解しましょう。

毎回実行される処理とパフォーマンスへの影響を理解します。依存配列を省略した場合の動作を学びましょう。

マウント時のみ実行される初期化処理を学びます。空の依存配列の使い方を理解しましょう。

値の変更を監視し、条件付き副作用を実装します。依存配列に特定の値を指定する方法を学びましょう。

returnでの後処理とメモリリークの防止を学びます。エフェクトのクリーンアップ処理を理解しましょう。

APIからのデータ取得方法を学びます。useEffect内でasync/awaitを使用する際の注意点を理解しましょう。非同期関数は直接useEffectの引数にできないため、内部で定義して呼び出す必要があります。また、ローディング状態の管理やエラーハンドリングも重要です。実際のアプリケーションでは、データ取得は頻繁に必要となる処理なので、正しいパターンを身につけることが大切です。

setIntervalとsetTimeoutの使い方とクリーンアップの重要性を学びます。タイマーを適切にクリアしないとメモリリークが発生する可能性があります。Reactコンポーネントがアンマウントされた後もタイマーが動き続けることを防ぐため、必ずクリーンアップ関数でタイマーをクリアする必要があります。この問題では、カウントダウンタイマーを実装しながら、タイマーの適切な管理方法を身につけます。

描画前の同期的な処理とuseEffectとの違いを理解します。useLayoutEffectはDOMの変更後、ブラウザが画面を描画する前に同期的に実行されます。DOM要素のサイズや位置を測定する場合や、視覚的なちらつきを防ぎたい場合に使用します。ただし、同期的に実行されるためパフォーマンスへの影響があるので、本当に必要な場合のみ使用すべきです。通常はuseEffectで十分なケースが多いです。

valueとonChangeの連携によるReactでの状態管理を学びます。制御コンポーネントは、フォーム要素の値をReactのstateで管理するパターンです。これにより、フォームの値を常にReactが制御でき、バリデーションや条件付きレンダリングが容易になります。入力値の変更はonChangeイベントで検知し、stateを更新することで、単一の信頼できるデータソースを維持します。

複数行入力の処理と制御コンポーネントパターンの応用を学びます。textareaも通常のinputと同様に制御コンポーネントとして扱えます。文字数制限やリアルタイムの文字数表示など、ユーザーフレンドリーな機能を実装できます。また、trimメソッドを使用して空白文字のみの入力を防ぐバリデーションも重要です。コメントフォームやメッセージ入力など、実際のアプリケーションでよく使用される要素です。

ドロップダウンメニューから選択肢を選ぶセレクトボックスの実装を学びます。valueとonChangeを使用して制御コンポーネントとして扱い、選択された値をstateで管理します。optionタグで選択肢を定義し、value属性で値を設定します。セレクトボックスは、限られた選択肢から1つを選ぶUIとして頻繁に使用されます。フォーム送信時には選択された値を簡単に取得でき、バリデーションも容易に実装できます。

真偽値を扱うチェックボックスの実装を学びます。checkedプロパティでチェック状態を制御し、onChangeイベントでe.target.checkedから値を取得します。チェックボックスは利用規約への同意、オプション機能の有効化、複数選択など様々な場面で使用されます。条件付きレンダリングと組み合わせることで、チェック状態に応じたUIの変更も可能です。アクセシビリティのためlabelタグとの併用も重要です。

複数の選択肢から1つを選ぶラジオボタンの実装を学びます。同じname属性を持つラジオボタンがグループを形成し、その中から1つだけ選択できます。checked属性で選択状態を判定し、onChangeで新しい選択値を設定します。プラン選択、配送方法の選択など、相互排他的な選択が必要な場面で使用されます。各選択肢にはvalue属性で一意の値を設定し、stateと比較して選択状態を管理します。

オブジェクトstateを使用して複数の入力フィールドを管理する方法を学びます。関連する複数のフィールドを1つのオブジェクトにまとめることで、状態管理が整理されます。スプレッド構文を使用して既存の値を保持しながら、特定のプロパティのみを更新します。実際のフォームでは、ユーザー情報、住所情報など関連するデータをグループ化して管理することが一般的です。この方法により、フォーム送信時のデータ取得も簡潔になります。

フォーム送信時の入力値検証とエラー表示を学びます。e.preventDefault()でデフォルトの送信動作を防ぎ、JavaScriptで検証ロジックを実装します。エラーがある場合はエラーメッセージをstateに保存し、条件付きレンダリングで表示します。実際のアプリケーションでは、メールアドレスの形式、パスワードの強度、必須項目の確認など様々な検証が必要です。ユーザーフレンドリーなエラーメッセージとリアルタイムバリデーションの実装も重要です。

Reactのカスタムフックの基本的な実装方法を学びます。カスタムフックは、コンポーネント間でステートフルなロジックを再利用するための仕組みです。「use」で始まる名前を付ける命名規則があり、これによりReactがフックの規則を適用できます。カスタムフック内では、useState、useEffect、その他のフックを自由に使用でき、複雑なロジックをカプセル化できます。戻り値は配列やオブジェクトで返すことが一般的で、呼び出し側で分割代入により必要な値や関数を取得します。カスタムフックにより、ビジネスロジックとUIロジックを分離し、テストしやすく保守性の高いコードを実現できます。

真偽値の切り替えを行う汎用的なカスタムフック「useToggle」の実装を学びます。このフックは、モーダルの開閉、メニューの表示切り替え、チェックボックスの状態管理など、様々な場面で再利用できます。初期値をパラメータとして受け取り、現在の値とトグル関数を返します。トグル関数は現在の値を反転させるだけのシンプルな実装ですが、この単純さが再利用性を高めています。カスタムフックを使うことで、同じトグルロジックを複数のコンポーネントで使い回すことができ、コードの重複を避けられます。また、ロジックが一箇所に集約されるため、バグの修正や機能拡張も容易になります。実際の開発では、このような小さなカスタムフックを組み合わせて、より複雑な機能を構築することが一般的です。

カウンター機能を抽出したカスタムフックの実装を学びます。増加、減少、リセットの操作をカプセル化し、任意のコンポーネントで再利用できるようにします。初期値をパラメータとして受け取り、現在値と操作関数をオブジェクトで返すパターンを採用します。このようなカスタムフックにより、カウンター機能を持つ複数のコンポーネントで同じロジックを共有でき、保守性が向上します。実際のアプリケーションでは、ページネーション、数量選択、スコア管理など様々な場面で活用できます。

ローカルストレージと連携するカスタムフックの実装を学びます。stateの値を自動的にローカルストレージに保存し、ページをリロードしても値が保持されます。初回レンダリング時はローカルストレージから値を読み込み、値が更新されるたびに保存します。ユーザー設定、フォームの下書き、アプリケーションの状態など、永続化が必要なデータの管理に便利です。JSON形式でのシリアライズ・デシリアライズも含めて実装します。

データ取得を抽象化するカスタムフックの実装を学びます。API通信のローディング状態、エラーハンドリング、データ管理を一元化します。URLをパラメータとして受け取り、データとローディング状態を返します。このパターンにより、データ取得ロジックをコンポーネントから分離でき、再利用性とテスタビリティが向上します。実際のアプリケーションでは、エラー処理やキャッシュ機能も追加して拡張できます。

入力の遅延処理を行うカスタムフックの実装を学びます。ユーザー入力が止まってから一定時間後に処理を実行し、不要なAPIコールや再レンダリングを防ぎます。検索入力、フォーム検証、自動保存など、頻繁に変更される値の処理に最適です。タイマーを使用して遅延を実装し、クリーンアップでメモリリークを防ぎます。パフォーマンス最適化の基本テクニックです。

ウィンドウサイズを監視するカスタムフックの実装を学びます。ブラウザウィンドウのリサイズを検知し、リアルタイムでサイズ情報を更新します。レスポンシブデザインの実装、条件付きレンダリング、レイアウトの動的調整などに活用できます。イベントリスナーの登録と解除を適切に行い、メモリリークを防ぎます。モバイルとPCの表示切り替えなど、現代のウェブアプリケーションに必須の機能です。

複数のカスタムフックを組み合わせて複雑なロジックを構築する方法を学びます。既存のフックを再利用して新しい機能を作り、コードの重複を避けます。この例では、useStateとuseDebounceを組み合わせて検索機能を実装します。フックの合成により、小さな部品から大きな機能を構築するコンポジションパターンを実現します。実際の開発ではこのようなパターンを使って保守性の高いコードを書きます。

refを使用してDOM要素に直接アクセスする非制御コンポーネントの実装を学びます。stateで管理せず、必要な時にのみDOMから値を取得します。defaultValueで初期値を設定し、フォーム送信時なcurrentプロパティでDOM要素にアクセスします。大量のフォーム入力や、再レンダリングを減らしたい場合に有効です。ただし、Reactの宣言的なパラダイムから外れるため、使用は最小限に留めましょう。

フィルタリングやソート機能を含むリストの高度な操作を学びます。配列のメソッドを活用して、動的にリストを変更します。filterメソッドで条件に一致する要素のみを抽出し、ユーザーの選択に応じた表示を実現します。このパターンはTodoアプリ、商品一覧、検索結果など、多くのアプリケーションで使用されます。元の配列を変更せず新しい配列を作成するイミュータブルな操作が重要です。

条件に応じてコンポーネントを動的に選択する方法を学びます。コンポーネントをオブジェクトに格納し、キーで参照してレンダリングします。このパターンにより、ルーティング、タブ切り替え、機能別コンポーネントの選択などが柔軟に実装できます。コンポーネント名を変数として扱う際は、大文字で始まる変数名にしてJSXとしてレンダリングできるようにします。

コンポーネントツリー内のエラーをキャッチしてフォールバックUIを表示するエラーバウンダリの実装を学びます。子コンポーネントで発生したエラーをキャッチし、アプリケーション全体のクラッシュを防ぎます。クラスコンポーネントでのみ利用可能で、getDerivedStateFromErrorでエラー状態を更新します。本番環境でのユーザー体験を向上させる重要な機能です。

ReactDOM.createPortalを使用して、親コンポーネントのDOM階層外に子要素をレンダリングする方法を学びます。モーダル、ツールチップ、通知など、親のCSSoverflowやz-indexの影響を受けたくないUIの実装に使用します。第1引数にレンダリングする要素、第2引数にターゲットDOM要素を指定します。イベントは通常通りReactツリーを伝播します。

useRefを使用してDOM要素への参照を取得し、直接操作する方法を学びます。フォーカス管理、スクロール位置の制御、アニメーションの実行など、DOM APIへの直接アクセスが必要な場面で使用します。currentプロパティでDOM要素にアクセスし、ネイティブメソッドを呼び出せます。refの変更は再レンダリングを引き起こさないため注意が必要です。

forwardRefを使用して、親コンポーネントから子コンポーネントのDOM要素にrefを転送する方法を学びます。カスタムコンポーネントにラップされた入力要素に外部からアクセスしたい場合などに使用します。forwardRefでコンポーネントをラップし、第2引数でrefを受け取ります。ライブラリのコンポーネント作成や、高度なUIコンポーネントの実装に欠かせない技術です。

React.lazyとSuspenseを使用して、コンポーネントを必要な時に動的に読み込む方法を学びます。初期バンドルサイズを削減し、アプリケーションの起動速度を向上させます。lazyで動的インポートを行い、Suspenseで読み込み中のフォールバックUIを表示します。ルート別のコード分割や、使用頻度の低い機能の分離に最適です。

Suspenseを使用して非同期コンポーネントのローディング状態を管理する方法を学びます。データ取得中にローディングUIを表示し、ユーザー体験を向上させます。コンポーネントがPromiseをthrowすると、Suspenseがそれをキャッチしてfallbackを表示します。React 18ではデータフェッチングにも対応し、宣言的なローディング状態管理が可能になりました。

React.StrictModeを使用して、開発時に潜在的な問題を検出する方法を学びます。非推奨のAPI使用、副作用の検出、予期しないコンポーネントの動作などを警告します。開発ビルドでのみ動作し、コンポーネントを2回レンダリングして副作用を検出します。コード品質を向上させ、将来のReactアップデートに備えるための重要なツールです。

createContextを使用してContextを作成し、デフォルト値を設定する方法を学びます。Contextはコンポーネントツリーを通してデータを共有する仕組みで、propsドリリングを避けられます。デフォルト値はProviderがない場合に使用されます。useContextフックでContextの値を取得し、グローバルなテーマ、認証情報、言語設定などの共有に活用できます。

Context.Providerを使用してコンポーネントツリーに値を提供する方法を学びます。Providerはvalueプロップで値を渡し、子コンポーネントがその値にアクセスできるようにします。複数のProviderをネストして使用することも可能で、内側のProviderが優先されます。状態管理ライブラリの代替として中規模アプリケーションで使用されます。

useContextフックを使用してContextの値を取得し、購読の仕組みを学びます。useContextはContextの現在値を返し、値が変更されると自動的に再レンダリングされます。Consumerコンポーネントよりもシンプルな構文で使用できます。ネストされたProviderがある場合は、最も近いProviderの値が使用されます。言語設定、テーマ、認証情報などのグローバルな状態管理に活用できます。

異なるデータを管理するために複数のContextを使用する方法を学びます。関心の分離により、テーマ、ユーザー情報、設定などを別々のContextで管理できます。複数のProviderをネストして使用し、必要なContextのみを購読することで、不要な再レンダリングを避けられます。大規模アプリケーションでは、Contextを機能別に分割することがパフォーマンス最適化につながります。

Contextで状態と更新関数を提供し、動的なContext値を実現する方法を学びます。useStateと組み合わせて、値とsetter関数をContextで共有します。これにより、子コンポーネントからグローバルな状態を更新できます。ステート管理ライブラリの代替として、中小規模のアプリケーションで有効なパターンです。

値とsetterを別々のContextに分割してContextのパフォーマンスを最適化する方法を学びます。setter関数のみを使用する場合の不要な再レンダリングを防ぎます。setterのみが必要なコンポーネントは値が変わっても再レンダリングされません。Context重視のアプリケーションでのパフォーマンス最適化に必須のテクニックです。

より良いAPI設計のためにuseContextをラップするカスタムフックの作成方法を学びます。カスタムフックはprovider外でcontextが使用された場合のエラー処理を提供します。このパターンは開発体験を向上させ、ランタイムエラーを防ぎます。型安全性を持つ完全なcontext解決策のためにproviderとフックの両方をエクスポートします。

アクションによる状態管理のためのuseReducerの基礎を学びます。useReducerは複雑な状態ロジックに対してuseStateの代替手段を提供します。アクションは何が起きたかを記述し、reducer関数が状態の変更方法を決定します。状態更新が前の状態に依存する場合や、複数の関連する値が協調的な更新を必要とする場合に有用なパターンです。

useReducerで複数の関連する状態を管理する方法を学びます。複数の状態値が相互依存する場合、useReducerは集中的な状態管理を提供します。単一のdispatch関数がすべての関連する値を原子的に更新します。これにより一貫性のない状態を防ぎ、複雑な状態ロジックをより保守可能でテスト可能にします。

useReducerで整理された状態管理のためのアクションタイプの使用方法を学びます。アクションタイプの定数はタイプミスを防ぎ、リファクタリングを容易にします。アクションはtypeに基づいて状態を更新するためのpayloadデータを運びます。このパターンは複雑なアプリケーションでも拡張性があり、各状態変更の意図を明確に示します。

グローバル状態管理のためにContext APIとuseReducerを組み合わせる方法を学びます。このReduxライクなパターンは、すべてのコンポーネントに集中化された状態とdispatch関数を提供します。Providerがアプリをラップし、どのコンポーネントもcontextを通じて状態にアクセスできます。中規模アプリケーションでは外部状態管理ライブラリの優れた代替手段です。

ロギングと検証のためのuseReducerでミドルウェアライクなパターンを実装する方法を学びます。reducer関数をラップして前処理と後処理のロジックを追加します。このパターンはロギング、検証、分析などの横断的関心事を可能にします。状態更新でのデバッグやビジネスルールの適用に有用です。

高価な計算のためのuseMemoでパフォーマンスを最適化する方法を学びます。メモ化は計算結果をキャッシュし、依存関係が変更された場合のみ再計算します。レンダーサイクルでの不要な再計算を防ぐために必須です。大きなリストのフィルタリング、複雑な計算、頻繁な更新が不要な高価なオブジェクトの作成に使用します。

不要な再レンダリングを防ぐためにuseCallbackで関数をメモ化する方法を学びます。関数はメモ化しない限り、毎回のレンダリングで再作成されます。メモ化された子コンポーネントにコールバックを渡す際に必須です。依存配列が関数の再作成タイミングを決定します。関数参照の変更による子コンポーネントの再レンダリングを防ぎます。

最適なパフォーマンスのためにuseMemo vs useCallback vs React.memoをいつ使うかを学びます。useMemoは高価な計算からの値をメモ化します。useCallbackは関数参照をメモ化します。React.memoはpropsが変更されていない時のコンポーネント再レンダリングを防ぎます。最適化対象に基づいて選択：値、関数、またはコンポーネント。

Reactの調整パフォーマンスにおける安定したキーの重要性を学びます。配列インデックスをキーとして使用すると、ステートフルコンポーネントやアニメーションで問題が発生します。安定した一意のIDは、レンダリング間で適切なコンポーネントIDを保証します。悪いキーは不要なDOM操作とリスト並べ替え時のコンポーネント状態の喪失につながります。

大量リストを効率的に表示する仮想化技術を学びます。仮想スクロールは表示されているアイテムと小さなバッファのみをレンダリングします。これにより数千のアイテムを持つリストのパフォーマンスが劇的に向上します。react-windowなどのライブラリがこのパターンを実装しますが、コア概念を理解することで任意の大規模データセットのレンダリングを最適化できます。

初期バンドルサイズを削減するコード分割戦略を学びます。ルートベース分割はページをオンデマンドで読み込みます。機能ベース分割は重いコンポーネントを必要時に読み込みます。React.lazyとSuspenseが動的インポートを可能にします。これにより初期読み込み時間が改善され、機能の並列読み込みが可能になり、大規模アプリケーションに不可欠です。

パフォーマンスボトルネックを特定するためのReactアプリケーションのプロファイリング方法を学びます。Profiler APIはコンポーネントのレンダリング時間とフェーズを測定します。React DevTools Profilerはレンダリングパフォーマンスの視覚的分析を提供します。このデータを使用して遅いコンポーネントを見つけて最適化します。複雑なアプリケーションでパフォーマンスを維持するために必須です。

優先度ベースのレンダリングのためのuseTransitionを使ったReactの並行機能を学びます。状態更新を非緊急としてマークし、重い計算中もUIをレスポンシブに保ちます。高価な更新がバックグラウンドで処理される間、ユーザー入力はスムーズなままです。UIをブロックしてしまう検索、フィルタリング、データ可視化に必須です。

追加機能でコンポーネントをラップするHOCパターンを学びます。HOCはコンポーネントを受け取り、拡張されたバージョンを返す関数です。認証、ロギング、データフェッチングなどの一般的な用途があります。モダンReactではフックが好まれますが、HOCの理解はレガシーコードと特定のパターンに役立ちます。

コンポーネント間でコードを共有するレンダープロップスパターンを学びます。React要素を返す関数をpropとして渡します。これにより柔軟な合成とコード再利用が可能になります。関数はコンポーネントからデータを受け取り、どのようにレンダリングするかを決定します。より明示的なデータフローを持つHOCの代替手段です。

共有状態を持つ関連コンポーネントを組織化する複合コンポーネントパターンを学びます。コンポーネントはcontextを通じて協力し、柔軟なAPIを作成します。このパターンはネイティブHTMLのselect/optionのような直感的なコンポーネント合成を可能にします。タブ、アコーディオン、ドロップダウンなどのUIライブラリで一般的で、関心事の明確な分離を実現します。

制御と非制御の両方として機能するコンポーネントの作成方法を学びます。value propが存在するかチェックしてモードを決定します。外部制御が提供された場合はそれを尊重しながら、非制御使用のための内部状態を維持します。この柔軟性により、ユーザーは使用ケースに最も適したパターンを選択できます。

型安全なReactコンポーネントのためのTypeScript基礎を学びます。propsのインターフェースを定義してコンパイル時にエラーをキャッチします。より良いIDEサポートのために関数パラメータと戻り値を型付けします。TypeScriptは一般的なランタイムエラーを防ぎ、コンポーネント間の明示的な契約を通じてコードの保守性を向上させます。

最大の型安全性と再利用性のためのジェネリックコンポーネントの作成方法を学びます。ジェネリックパラメータにより、コンポーネントは型チェックを維持しながらあらゆるデータ型で動作できます。このパターンは柔軟なUIライブラリの構築に不可欠です。リストコンポーネント、フォームビルダー、データ可視化コンポーネントで一般的です。

型ガードとアサーションを含むTypeScriptの型推論機能を学びます。型ガードは条件ブロック内で型を絞り込みます。型アサーションは、コンパイラよりも多くを知っている場合に期待される型をTypeScriptに伝えます。これらの機能により、より安全な型処理と適切なIntelliSenseによる優れた開発体験が可能になります。

useImperativeHandleで親コンポーネントに公開されるref値をカスタマイズする方法を学びます。DOM要素を直接公開する代わりに、refにカスタムメソッドを作成します。これにより、カプセル化を維持しながら制御されたコンポーネントAPIを提供します。フォーカス管理、スクロール制御、フォーム検証APIに有用です。

クライアントサイドナビゲーションのためのReact Router基礎を学びます。BrowserRouter、Routes、Routeコンポーネントでルートを設定します。宣言的ナビゲーションにLinkコンポーネント、プログラム的ナビゲーションにuseNavigateフックを使用してページ間を移動します。複数のビューを持つシングルページアプリケーションに必須です。

パラメータを使った動的ルートの作成方法を学びます。コロン構文でルートパラメータを定義し、useParamsフックでアクセスします。単一のルートで複数のパラメータを組み合わせることができます。ユーザープロフィール、商品ページ、IDによって変化するコンテンツを構築するのに必須です。

コンポーネントテストのためのReact Testing Library基礎を学びます。ユーザーがコンポーネントと対話する方法に似たテストを書きます。renderでコンポーネントをマウント、screenクエリで要素を検索、fireEventでユーザー操作をシミュレートします。実装の詳細ではなく動作のテストに焦点を当てます。

fireEventとwaitForを使った複雑なユーザーインタラクションのテスト方法を学びます。フォーム入力、ボタンクリック、非同期操作を含む実際のユーザーワークフローをシミュレートします。状態更新後に現れる要素を扱うためにwaitForを使用します。アプリケーションを通した完全なユーザージャーニーを検証する統合テストに必須です。

renderHookユーティリティを使ったカスタムフックのテスト方法を学びます。フックの状態変更、副作用、返り値を分離してテストします。適切なReactバッチ処理を確実にするために状態更新にactラッパーを使用します。コンポーネントをマウントせずに複雑なフックロジックを検証するのに必須です。再利用可能なフックパターンのテスト駆動開発を可能にします。

ARIA属性とセマンティックHTMLを使ったアクセシブルなReactコンポーネントの構築方法を学びます。適切なラベリング、エラーアナウンス、キーボードナビゲーションサポートを使用します。スクリーンリーダーや支援技術で動作する包括的なアプリケーションを作成するのに必須です。フォームコントロールとインタラクティブ要素のWCAGガイドラインに従います。

ファイル構成と命名規則のReactベストプラクティスを学びます。コンポーネント、フック、ユーティリティ、型を明確に分離してコードを構造化します。一貫した命名パターンに従います：フックにはuseXxx、コンポーネントにはPascalCase、ユーティリティにはcamelCase。適切な構成により保守性とチーム協力が向上します。

カスタム比較関数を使ったReact.memoの高度な使用方法を学びます。すべてのpropsではなく特定のpropsを比較することで再レンダリングを制御します。複雑なオブジェクトを受け取るが特定のプロパティにのみ依存するコンポーネントの最適化に必須です。カスタム比較関数により細かなパフォーマンス制御が可能になります。

本番アプリケーション向けの高度なエラー境界技術を学びます。エラーをキャプチャし、監視サービスにログを記録し、ユーザーフレンドリーなフォールバックを表示します。エラー境界はコンポーネントツリー内のJavaScriptエラーをキャッチし、エラー情報をログに記録し、フォールバックUIを表示します。予期しないエラーを適切に処理する堅牢なアプリケーションに必須です。