コンポーネントのテンプレート

コンポーネントの説明と主な利用シーンを書きます。
1文目には、frontmatterのdescriptionと同じ文を記載します。一覧ページや検索結果、AIによる索引にも使われるため、以下の書式ルールに則ってください。

description書式ルール：〜のためのコンポーネントです。〜とき、〜ときに使います。

• 1文目：「何の代わりに使うか」または「何のためか」を冒頭に置き、対象（テキスト・日付など）と中心動詞（入力させる／表示する／選択する／切り替えるなど）を1セットで含める。詳細は2文目以降へ回す。
  • 例：「input[type="text"]の代替としてテキストや数値を1行で入力させるコンポーネントです。」
• 2文目：「〜するときに使います。」または「〜させるときに使います。」で利用シーンを書く。
  • 主語の使い分け
    • 入力系（フォーム系の要素）：システムを主語にして「〜させるとき」基調
      例:「金額値を入力させるときに使います。」
    • 操作系（上記以外のナビゲーション・操作系の要素）：ユーザーを主語にして「〜するとき」基調
      例:「アクションを選択するときに使います。」

さらに必要な説明があれば本文には続けて書けます。複数行に渡っても問題ありません。

使用上の注意

他のコンポーネントとの使い分けの基準、特に注意したいアンチパターンなど使用上の注意があれば書きます。
種類ごとの使いどころは種類に書きます。

{コンポーネント名}を使用したコンポーネント

開発で頻繁に利用する実装を別のコンポーネント化している場合は、子ページへのリンクや説明を書きます。

種類

コンポーネントのバリエーションを小見出しにわけて書きます。もし網羅的な比較が必要な場合、テーブル or previewでコンポーネントを一覧を表示します。

コンポーネント名（種類） 例: Primary

コンポーネント（種類）の説明が入ります。

単品

複数

iframeを使用したくない場合（非推奨）

プロダクト

レイアウト

メインの種類でなく、コンポーネントが持つその他の種類（サイズやアイコン付きなど）がある場合に書きます。

プレビューを埋め込む際の注意点

次のようなReactのAPIを使っていたり、PropsでReactコンポーネントを受け取るコンポーネントはMDX内で定義できません。

修正前：

このようなコンポーネントのプレビューを埋め込みたい場合は、別ファイルに切り出して import してください。

この際、内部でuseStateなどを使っている場合はclient:loadやclient:only="react"を付与してクライアントで動作するようにしてください。

修正後：

状態

コンポーネントが持つ（hoverやdisabledなど）状態がある場合に書きます。

ライティング

主題に種類がなく、ライティングルールを書きたい場合はここに書きます。〇〇の使い方..などはこのグループに所属させます。AirTableも必要であれば埋め込めます。

アクセシビリティ

主題全体に対するアクセシビリティの考え方として、特段言及したい場合は書きます。

デザインパターン

コンポーネント独自のデザインパターンがあればこのグループ内に書きます。基準サイズなどもこのセクションで書きます。

モバイル

モバイルでの表示について、特に言及したい場合はここに書きます。

モバイル表示におけるレイアウトやデザインパターンなどを記載する場合は、基本的にこのセクションにまとめて書くことを推奨します。 ただし、各セクションのなかでモバイル表示について言及するほうが都合がよい場合は、それぞれのセクションの中に書くことも問題ありません。

Props

コンポーネントが持つPropsを網羅して書きます。

関連リンク

• link

参考文献

• link