Reactコンポジションパターン
柔軟で保守性の高いReactコンポーネントを構築するためのコンポジションパターン。 Booleanプロップの乱用を避け、複合コンポーネント、状態のリフトアップ、内部のコンポジションを活用します。 これらのパターンにより、コードベースはスケールするにつれて人間とAIエージェントの両方にとって扱いやすくなります。
適用すべきタイミング
以下の場合にこれらのガイドラインを参照してください:
- 多くのBooleanプロップを持つコンポーネントをリファクタリングする場合
- 再利用可能なコンポーネントライブラリを構築する場合
- 柔軟なコンポーネントAPIを設計する場合
- コンポーネントアーキテクチャをレビューする場合
- 複合コンポーネントやコンテキストプロバイダーを扱う場合
優先順位別ルールカテゴリ
| 優先順位 | カテゴリ | 影響度 | プレフィックス |
|---|---|---|---|
| 1 | コンポーネントアーキテクチャ | 高 | architecture- |
| 2 | 状態管理 | 中 | state- |
| 3 | 実装パターン | 中 | patterns- |
| 4 | React 19 API | 中 | react19- |
クイックリファレンス
1. コンポーネントアーキテクチャ（高）
architecture-avoid-boolean-props- 動作をカスタマイズするためにBooleanプロップを追加しないでください。代わりにコンポジションを使用します。architecture-compound-components- 共有コンテキストで複雑なコンポーネントを構成します。
2. 状態管理（中）
state-decouple-implementation- プロバイダーのみが状態の管理方法を知っています。state-context-interface- 依存性注入のために、状態、アクション、メタを備えた汎用インターフェースを定義します。state-lift-state- 兄弟アクセスを可能にするために、状態をプロバイダーコンポーネントに移動します。
3. 実装パターン（中）
patterns-explicit-variants- Booleanモードの代わりに明示的なバリアントコンポーネントを作成します。patterns-children-over-render-props- renderXプロップの代わりにchildrenを使用してコンポジションを行います。
4. React 19 API（中）
⚠️ React 19+ のみ。 React 18以前を使用している場合はこのセクションをスキップしてください。
react19-no-forwardref-forwardRefを使用しないでください。useContext()の代わりにuse()を使用します。
使い方
個別のルールファイルを読んで、詳細な説明とコード例を確認してください:
rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md
各ルールファイルには以下が含まれています:
- なぜそれが重要かの簡単な説明
- 間違ったコード例とその説明
- 正しいコード例とその説明
- 追加のコンテキストと参考資料
完全なコンパイルドキュメント
すべてのルールを展開した完全なガイドについては: AGENTS.md