vercel-composition-patterns

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

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

適用するタイミング

次のような場合に、これらのガイドラインを参照してください:

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

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

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

クイックリファレンス

1. コンポーネントアーキテクチャ (HIGH)

• architecture-avoid-boolean-props - 動作をカスタマイズするために boolean prop を追加せず、コンポジションを使用する
• architecture-compound-components - 共有コンテキストを使って複雑なコンポーネントを構造化する

2. 状態管理 (MEDIUM)

• state-decouple-implementation - プロバイダーだけが、状態がどのように管理されているかを知っている
• state-context-interface - 依存性注入のために、state、actions、meta を持つ汎用インターフェースを定義する
• state-lift-state - 兄弟コンポーネントからアクセスできるように、状態をプロバイダーコンポーネントに移動する

3. 実装パターン (MEDIUM)

• patterns-explicit-variants - boolean モードではなく、明示的なバリアントコンポーネントを作成する
• patterns-children-over-render-props - renderX prop を使う代わりに、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

各ルールファイルには次の内容が含まれています:

• なぜそれが重要なのかについての簡単な説明
• 誤ったコード例とその説明
• 正しいコード例とその説明
• 追加のコンテキストと参考資料

コンパイル済みの完全なドキュメント

すべてのルールを展開した完全なガイドは AGENTS.md を参照してください。