vercel-composition-patterns

React の合成パターン

柔軟で保守しやすい React コンポーネントを構築するための合成パターンです。複合コンポーネント、状態のリフトアップ、内部要素の合成を活用して、ブール値プロパティの増加を避けます。これらのパターンにより、コードベースが大きくなっても、人間と AI エージェントの両方にとって扱いやすくなります。

適用するタイミング

以下の場合に、これらのガイドラインを参照してください。

• ブール値プロパティが多数あるコンポーネントをリファクタリングするとき
• 再利用可能なコンポーネントライブラリを構築するとき
• 柔軟なコンポーネント API を設計するとき
• コンポーネントのアーキテクチャをレビューするとき
• 複合コンポーネントやコンテキストプロバイダーを扱うとき

優先度別のルールカテゴリ

優先度	カテゴリ	影響	プレフィックス
1	コンポーネントアーキテクチャ	高	architecture-
2	状態管理	中	state-
3	実装パターン	中	patterns-

クイックリファレンス

1. コンポーネントアーキテクチャ（高）

• architecture-avoid-boolean-props - 動作をカスタマイズするためにブール値プロパティを追加せず、合成を使用します
• architecture-compound-components - 共有コンテキストを使って複雑なコンポーネントを構成します

2. 状態管理（中）

• state-decouple-implementation - 状態の管理方法を把握するのはプロバイダーだけにします
• state-context-interface - 依存性注入のために、状態、アクション、メタ情報を含む汎用インターフェースを定義します
• state-lift-state - 兄弟コンポーネントからアクセスできるよう、状態をプロバイダーコンポーネントに移します

3. 実装パターン（中）

• patterns-explicit-variants - ブール値モードの代わりに、明示的なバリアントコンポーネントを作成します
• patterns-children-over-render-props - renderX プロパティの代わりに children を使って合成します

使用方法

詳しい説明とコード例については、個々のルールファイルをお読みください。

rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md

各ルールファイルには、以下が含まれます。

• 重要である理由の簡単な説明
• 説明付きの誤ったコード例
• 説明付きの正しいコード例
• 追加のコンテキストと参考資料

完全版ドキュメント

すべてのルールを詳しく記載した完全なガイドについては、AGENTS.md をご覧ください。