react-patterns について
React 開発者向けのパターンガイドです。コンポーネント設計、フック、状態管理、性能、エラー処理、TypeScript、テストを扱い、React 19 のフックやアプリの複雑さに応じた選択肢も示します。
主な機能
- 01コンポーネント設計と合成パターン
- 02カスタムフックと状態管理
- 03React 19 のフックパターン
- 04性能のプロファイリングと的を絞った最適化
- 05エラー処理と復旧
- 06TypeScript とテストの原則
活用シーン
- 01コンポーネントの責務と状態範囲を設計
- 02状態管理の方式を選択
- 03React の描画性能問題を診断
- 04エラー処理とテスト戦略を設計
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/react-patternsを入力して読み込まれたか確認します。
詳細
React パターン
本番環境向けの React アプリケーションを構築するための原則です。
1. コンポーネント設計の原則
コンポーネントの種類
| 種類 | 用途 | 状態 |
|---|---|---|
| Server | データ取得、静的表示 | なし |
| Client | インタラクション | useState、effects |
| Presentational | UI 表示 | props のみ |
| Container | ロジック/状態管理 | 多くの状態 |
設計ルール
- 1 コンポーネントに責務は 1 つ
- props は下へ、イベントは上へ
- 継承よりコンポジション
- 小さく焦点の絞られたコンポーネントを優先する
2. Hook パターン
Hook を切り出すタイミング
| パターン | 切り出すタイミング |
|---|---|
| useLocalStorage | 同じストレージ処理が必要なとき |
| useDebounce | デバウンスされる値が複数あるとき |
| useFetch | 同じフェッチパターンが繰り返されるとき |
| useForm | 複雑なフォームの状態があるとき |
Hook のルール
- Hook はトップレベルでのみ呼び出す
- 毎回のレンダリングで同じ順序で呼び出す
- カスタム Hook の名前は "use" で始める
- アンマウント時に effect をクリーンアップする
3. 状態管理の選択
| 複雑さ | ソリューション |
|---|---|
| シンプル | useState、useReducer |
| 共有されたローカル状態 | Context |
| サーバー状態 | React Query、SWR |
| 複雑なグローバル状態 | Zustand、Redux Toolkit |
状態の配置
| スコープ | 配置場所 |
|---|---|
| 単一のコンポーネント | useState |
| 親子間 | 状態を持ち上げる |
| サブツリー | Context |
| アプリ全体 | グローバルストア |
4. React 19 のパターン
新しい Hook
| Hook | 目的 |
|---|---|
| useActionState | フォーム送信の状態 |
| useOptimistic | 楽観的 UI 更新 |
| use | レンダー内でリソースを読み取る |
コンパイラの利点
- 自動メモ化
- 手動の useMemo/useCallback を減らせる
- 純粋なコンポーネントに集中できる
5. コンポジションのパターン
複合コンポーネント
- 親がコンテキストを提供する
- 子がコンテキストを利用する
- 柔軟なスロットベースのコンポジション
- 例: Tabs、Accordion、Dropdown
Render Props と Hook の比較
| ユースケース | 推奨 |
|---|---|
| 再利用可能なロジック | カスタム Hook |
| レンダリングの柔軟性 | Render Props |
| 横断的関心事 | 高階コンポーネント |
6. パフォーマンスの原則
最適化のタイミング
| シグナル | 対応 |
|---|---|
| レンダリングが遅い | まずプロファイルする |
| 大きなリスト | 仮想化する |
| 高コストな計算 | useMemo |
| 安定したコールバック | useCallback |
最適化の順序
- 本当に遅いかを確認する
- DevTools でプロファイルする
- ボトルネックを特定する
- 的を絞った修正を適用する
7. エラーハンドリング
Error Boundary の使い方
| スコープ | 配置 |
|---|---|
| アプリ全体 | ルートレベル |
| 機能 | ルート/機能レベル |
| コンポーネント | 問題が起きやすいコンポーネントの周囲 |
エラーからの回復
- フォールバック UI を表示する
- エラーをログに記録する
- 再試行のオプションを提供する
- ユーザーのデータを保持する
8. TypeScript のパターン
Props の型付け
| パターン | 用途 |
|---|---|
| Interface | コンポーネントの props |
| Type | ユニオンや複雑な型 |
| Generic | 再利用可能なコンポーネント |
よく使う型
| 必要なもの | 型 |
|---|---|
| Children | ReactNode |
| イベントハンドラー | MouseEventHandler |
| Ref | RefObject |
9. テストの原則
| レベル | 対象 |
|---|---|
| Unit | 純粋関数、Hook |
| Integration | コンポーネントの振る舞い |
| E2E | ユーザーのフロー |
テストの優先順位
- ユーザーから見える振る舞い
- エッジケース
- エラー状態
- アクセシビリティ
10. アンチパターン
| ❌ やらないこと | ✅ 推奨 |
|---|---|
| 深いプロップドリリング | Context を使う |
| 巨大なコンポーネント | 小さく分割する |
| すべてに useEffect を使う | Server コンポーネントを使う |
| 早すぎる最適化 | まずプロファイルする |
| インデックスを key にする | 安定した一意の ID を使う |
覚えておくこと: React はコンポジションが本質です。小さく作り、慎重に組み合わせましょう。
コメント
Markdown 対応