vercel-composition-patterns

React のコンポジションパターン

柔軟で保守しやすい React コンポーネントを構築するためのコンポジションパターンです。コンパウンドコンポーネント、状態の引き上げ、内部のコンポジションを活用し、ブール値のプロパティが増えすぎるのを避けます。これらのパターンにより、コードベースの規模が大きくなっても、人間と AI エージェントの両方が扱いやすくなります。

適用する場面

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

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

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

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

クイックリファレンス

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

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

2. 状態管理（MEDIUM）

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

3. 実装パターン（MEDIUM）

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

4. React 19 API（MEDIUM）

⚠️ React 19+ のみ。 React 18 以前を使用している場合は、これらのパターンをスキップしてください。

• react19-no-forwardref - forwardRef は使用せず、useContext() の代わりに use() を使用します

使用方法

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

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

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

• 重要である理由の簡単な説明
• 説明付きの誤ったコード例
• 説明付きの正しいコード例
• 補足情報と参考資料

コンパイル済みドキュメント全体

すべてのルールを展開した完全なガイドについては、rules/ 内のファイルをお読みください