React実装のベストプラクティスとコーディング規約。コンポーネント設計、Hooks、状態管理、パフォーマンス最適化のガイドライン。React実装、コンポーネントパターン、Hooksベストプラクティスが必要な時に参照。
React実装の逆引きリファレンスです。「〜したいとき」から素早く該当パターンにたどり着けます。 詳細なコード例は PATTERNS.md を参照してください。
useUserData.ts）useEffect の依存配列を適切に管理useReduceruseState で管理useReducer で管理React.memo で不要な再レンダリングを防ぐuseCallback でコールバック関数をメモ化useMemo で高コストな計算をメモ化| やりたいこと | 方法 | 詳細 |
|---|---|---|
| コンポーネントを定義したい | function 形式で定義（アロー関数・クラスは非推奨） | PATTERNS: 関数コンポーネント |
| エクスポートしたい | 名前付きエクスポート（export function）を使う | PATTERNS: 名前付きエクスポート |
| 再利用可能なリストを作りたい | ジェネリックPropsでレンダー関数を受け取る | PATTERNS: ジェネリックProps |
| ランタイムエラーをキャッチしたい | ErrorBoundary（クラスコンポーネント）を使う | PATTERNS: エラーバウンダリ |
| やりたいこと | 方法 | 詳細 |
|---|---|---|
| 基本的なProps型を定義したい | interface でProps型を定義する | PATTERNS: 基本的なProps型 |
| 汎用的な型パラメータを使いたい | ジェネリック <T> でコンポーネントを定義 | PATTERNS: ジェネリックProps |
| イベントハンドラの型を指定したい | React.FormEvent, React.ChangeEvent 等を使う | PATTERNS: イベントハンドラの型 |
| やりたいこと | 方法 | 詳細 |
|---|---|---|
| 単純な状態を管理したい | useState を使う | PATTERNS: useState |
| 複雑な状態遷移を管理したい | useReducer でAction/Reducerパターンを使う | PATTERNS: useReducer |
| グローバル状態を共有したい | Context API + カスタムフック | PATTERNS: Context API |
| Prop drilling を解消したい | Context API を活用 | PATTERNS: Context API |
選択基準: ローカル → useState / 複雑なロジック → useReducer / 複数コンポーネント間共有 → Context or Jotai/Zustand
| やりたいこと | 方法 | 詳細 |
|---|---|---|
| マウント時にデータを取得したい | useEffect + 依存配列 | PATTERNS: useEffect |
| サブスクリプションを管理したい | useEffect のクリーンアップ関数で解除 | PATTERNS: useEffect |
| データフェッチングを共通化したい | カスタムフック useFetch<T> を作る | PATTERNS: データフェッチング |
| キャッシュ付きデータ取得をしたい | TanStack Query を使う | PATTERNS: TanStack Query |
| やりたいこと | 方法 | 詳細 |
|---|---|---|
| 複数コンポーネントで同じロジックを使いたい | カスタムフックとして抽出（use プレフィックス） | PATTERNS: カスタムフック |
| CRUD操作を共通化したい | ドメイン固有のカスタムフックを作る | PATTERNS: useTodoManager |
| フォーム処理を共通化したい | useForm<T> フックを作る | PATTERNS: フォームハンドリング |
| やりたいこと | 方法 | 詳細 |
|---|---|---|
| 不要な再レンダリングを防ぎたい | React.memo でコンポーネントをラップ | PATTERNS: パフォーマンス最適化 |
| コールバック関数をメモ化したい | useCallback を使う | PATTERNS: useCallback |
| 高コストな計算をキャッシュしたい | useMemo を使う | PATTERNS: useMemo |
| 大量データを効率的に表示したい | Virtual scrolling を導入 | - |
注意: React Compiler 使用時は React.memo / useCallback / useMemo は不要。最適化は計測してから実施する。
| やりたいこと | 方法 | 詳細 |
|---|---|---|
| コンポーネントの表示をテストしたい | render + screen.getByText | PATTERNS: テストパターン |
| イベントハンドラをテストしたい | fireEvent + vi.fn() | PATTERNS: テストパターン |
| 非同期処理をテストしたい | waitFor で結果を待つ | PATTERNS: テストパターン |
| カスタムフックをテストしたい | renderHook + act | PATTERNS: テストパターン |
React コード実装後、以下を確認:
useEffect の依存配列が適切/ts-implement スキルを併用