react-patterns について
react-patterns は、React アプリケーションを開発する人向けのスキルです。コンポーネント、フック、状態管理、性能、エラー処理、TypeScript、テストの実践パターンをまとめています。
主な機能
- 01コンポーネントの種類と責務の選択
- 02フックと状態管理パターンの適用
- 03React 19 の新しいフックの利用
- 04複合コンポーネントによる UI 構成
- 05計測後のパフォーマンス最適化
- 06エラー、型、テストへの対応
活用シーン
- 01React 機能のコンポーネント構成
- 02状態の範囲と保存方法の選定
- 03性能改善やエラー復旧方針のレビュー
- 04コンポーネントとユーザーフローのテスト計画
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/react-patternsを入力して読み込まれたか確認します。
同梱ファイルplugin.json
詳細
React のパターン
1. コンポーネント設計の原則
コンポーネントの種類
| 種類 | 用途 | 状態 |
|---|---|---|
| Server | データ取得、静的コンテンツ | なし |
| Client | インタラクティブな処理 | useState、エフェクト |
| Presentational | UI 表示 | Props のみ |
| Container | ロジック／状態 | 多くの状態 |
設計ルール
- 1 つのコンポーネントにつき責務は 1 つにします
- Props は下へ、イベントは上へ渡します
- 継承よりコンポジションを優先します
- 小さく、役割を絞ったコンポーネントを優先します
2. フックのパターン
フックを切り出すタイミング
| パターン | 切り出すタイミング |
|---|---|
| useLocalStorage | 同じストレージロジックが必要なとき |
| useDebounce | 複数の値にデバウンスが必要なとき |
| useFetch | 同じフェッチパターンを繰り返し使うとき |
| useForm | フォームの状態が複雑なとき |
フックのルール
- フックはトップレベルでのみ呼び出します
- レンダリングのたびに同じ順序で呼び出します
- カスタムフックの名前は「use」で始めます
- アンマウント時にエフェクトをクリーンアップします
3. 状態管理の選択
| 複雑さ | 解決策 |
|---|---|
| シンプル | useState、useReducer |
| ローカルで共有 | Context |
| サーバー状態 | React Query、SWR |
| 複雑なグローバル状態 | Zustand、Redux Toolkit |
状態の配置
| スコープ | 配置先 |
|---|---|
| 単一コンポーネント | useState |
| 親子間 | 状態を親に持ち上げます |
| サブツリー | Context |
| アプリ全体 | グローバルストア |
4. React 19 のパターン
新しいフック
| フック | 目的 |
|---|---|
| useActionState | フォーム送信の状態 |
| useOptimistic | 楽観的な UI 更新 |
| use | レンダリング中にリソースを読み取る |
コンパイラーのメリット
- メモ化を自動化します
- 手動での useMemo/useCallback が減ります
- 純粋なコンポーネントに集中できます
5. コンポジションのパターン
複合コンポーネント
- 親がコンテキストを提供します
- 子がコンテキストを利用します
- スロットベースの柔軟なコンポジションを実現します
- 例：タブ、アコーディオン、ドロップダウン
Render Props とフックの比較
| 用途 | 優先するもの |
|---|---|
| 再利用可能なロジック | カスタムフック |
| レンダリングの柔軟性 | Render Props |
| 横断的な処理 | 高階コンポーネント |
6. パフォーマンスの原則
最適化するタイミング
| 兆候 | 対応 |
|---|---|
| レンダリングが遅い | まずプロファイリングします |
| 大きなリスト | 仮想化します |
| コストの高い計算 | useMemo |
| 安定したコールバック | useCallback |
最適化の順序
- 実際に遅いかどうかを確認します
- DevTools でプロファイリングします
- ボトルネックを特定します
- 対象を絞って修正します
7. エラー処理
エラーバウンダリの使用
| スコープ | 配置場所 |
|---|---|
| アプリ全体 | ルートレベル |
| 機能 | ルート／機能レベル |
| コンポーネント | リスクのあるコンポーネントを囲みます |
エラーからの復旧
- フォールバック UI を表示します
- エラーを記録します
- 再試行の選択肢を提示します
- ユーザーデータを保持します
8. TypeScript のパターン
Props の型付け
| パターン | 用途 |
|---|---|
| Interface | コンポーネントの Props |
| Type | Union 型、複雑な型 |
| Generic | 再利用可能なコンポーネント |
よく使う型
| 必要なもの | 型 |
|---|---|
| 子要素 | ReactNode |
| イベントハンドラー | MouseEventHandler |
| Ref | RefObject |
9. テストの原則
| レベル | 焦点 |
|---|---|
| 単体 | 純粋関数、フック |
| 統合 | コンポーネントの動作 |
| E2E | ユーザーフロー |
テストの優先事項
- ユーザーに見える動作
- エッジケース
- エラー状態
- アクセシビリティ
10. アンチパターン
| ❌ しないこと | ✅ すること |
|---|---|
| Props を深くバケツリレーする | Context を使います |
| 巨大なコンポーネント | 小さく分割します |
| 何にでも useEffect を使う | サーバーコンポーネントを使います |
| 時期尚早な最適化 | まずプロファイリングします |
| key にインデックスを使う | 安定した一意の ID を使います |
覚えておきましょう： React の要点はコンポジションです。小さく作り、慎重に組み合わせましょう。
使用するタイミング
このスキルは、概要で説明されているワークフローまたはアクションを実行するときに適用できます。
制限事項
- このスキルは、タスクが上記の範囲に明確に該当する場合にのみ使用してください。
- 出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
- 必要な入力、権限、安全上の境界、または成功基準が不明な場合は、作業を中断して確認を求めてください。
コメント
Markdown 対応