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