mui-base

MUI Headless UI のベストプラクティス

MUI Base UI のパターンに従って、ヘッドレスな React コンポーネントライブラリを構築するための包括的なスタイルガイドです。5 つのカテゴリにわたる 48 のルールを、影響度の高い順にまとめています。

適用する場面

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

• ヘッドレス／スタイルなしのコンポーネントライブラリを構築するとき
• コンテキストベースのコンポジションを使って複合コンポーネントを作成するとき
• ARIA パターンを使ってアクセシブルな UI プリミティブを実装するとき
• スタイルの柔軟性を高めるため、レンダープロパティと className コールバックを使用するとき
• 制御モードと非制御モードの両方をサポートするコンポーネントを作成するとき

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

優先度	カテゴリ	影響度	プレフィックス
1	コンポーネントパターン	CRITICAL	comp-
2	命名規則	HIGH	name-
3	構成	HIGH	org-
4	エラー処理	HIGH	err-
5	スタイル	MEDIUM	style-

クイックリファレンス

1. コンポーネントパターン（CRITICAL）

• comp-forward-ref-named - 名前付き関数で forwardRef を使用する
• comp-props-parameter-naming - Props パラメーターを componentProps と命名する
• comp-use-render-element - DOM のレンダリングに useRenderElement を使用する
• comp-context-undefined-default - デフォルト値を undefined としてコンテキストを作成する
• comp-context-error-message - 階層構造を持つコンテキストエラーメッセージ
• comp-use-controlled - 2 つのモードに対応するため useControlled フックを使用する
• comp-state-memoization - 状態オブジェクトをメモ化する
• comp-context-value-memo - コンテキストプロバイダーの値をメモ化する
• comp-plain-function-root - DOM を使わないルートには通常の関数を使用する
• comp-hook-namespace-exports - フックの名前空間エクスポート
• comp-props-destructure-order - Props の分割代入の順序
• comp-use-client-directive - use client ディレクティブを追加する

2. 命名規則（HIGH）

• name-component-naming - コンポーネント名を ParentPart 形式にする
• name-file-matches-export - ファイル名を主要なエクスポートと一致させる
• name-directory-kebab-case - ディレクトリ名に kebab-case を使用する
• name-part-directory-lowercase - パートのディレクトリ名を小文字にする
• name-context-suffix - コンテキスト名にサフィックスを付ける
• name-context-hook - コンテキストフックを useComponentContext とする
• name-props-interface - Props インターフェースを ComponentProps とする
• name-state-interface - State インターフェースを ComponentState とする
• name-namespace-type-exports - 名前空間の型エクスポート
• name-event-type - イベント型の命名規則
• name-constants - 定数名に SCREAMING_SNAKE_CASE を使用する
• name-data-attributes - データ属性名を小文字にする
• name-hooks - フック名に use プレフィックスを付ける
• name-refs - ref 変数名にサフィックスを付ける
• name-handlers - ハンドラーの命名規則

3. 構成（HIGH）

• org-component-directory - コンポーネントのディレクトリ構成
• org-dual-barrel-exports - 2 種類のバレルエクスポートパターン
• org-test-colocation - テストファイルを同じ場所に配置する
• org-context-placement - コンテキストファイルの配置
• org-data-attributes-file - データ属性のドキュメントファイル
• org-state-attributes-mapping - 状態属性の対応表ファイル
• org-css-vars-file - CSS 変数のドキュメントファイル
• org-package-exports - パッケージレベルのワイルドカードエクスポート

4. エラー処理（HIGH）

• err-dev-only-warnings - 開発時のみの警告
• err-deduplicated-warnings - 重複を除いた警告メッセージ
• err-message-prefix - メッセージのプレフィックス標準
• err-context-error-guidance - コンテキストエラーの案内
• err-prop-validation-timing - Prop 検証のタイミング
• err-cancelable-events - キャンセル可能なイベントパターン
• err-event-reason-constants - イベント理由の定数
• err-typed-event-reasons - 型安全なイベント理由

5. スタイル（MEDIUM）

• style-react-import - React を名前空間としてインポートする
• style-internal-imports - 内部インポートのパス
• style-explicit-undefined - Prop の型で undefined を明示する
• style-default-values - 分割代入でデフォルト値を指定する
• style-jsdoc-documentation - JSDoc ドキュメント

使用方法

詳しい説明とコード例については、個別のリファレンスファイルを参照してください。

• セクションの定義 - カテゴリー構成と影響度
• ルールのテンプレート - 新しいルールを追加するためのテンプレート
• 例：comp-forward-ref-named
• 例：org-component-directory

ソース

MUI Base UI のコードベースから 2026-01-17 に抽出されました。

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

すべてのルールを展開した完全なガイド：AGENTS.md