ReactコンポーネントpropsのJSDoc

Reactコンポーネントのドキュメント化

Reactコンポーネントはpropsを受け取りJSXを返す関数です。ドキュメント化では、コンポーネントの目的、propsインターフェース、デフォルトのprop値、副作用を説明します。

シグネチャの例

function DataTable<T extends Record<string, unknown>>(props: {
  data: T[];
  columns: ColumnDef<T>[];
  onRowClick?: (row: T) => void;
  loading?: boolean;
}): JSX.Element

生成されるTSDoc

/**
 * 設定可能なカラム、行クリックハンドリング、ローディング状態を持つ
 * 汎用データテーブルコンポーネント。
 *
 * @typeParam T - 各データ行の形状。レコード型である必要があります。
 * @param props - コンポーネントのprops。
 * @param props.data - 表示する行データの配列。
 * @param props.columns - ヘッダーラベル、セルレンダリング、
 *   ソート動作を制御するカラム定義。
 * @param props.onRowClick - 行がクリックされた時に発火するオプションのコールバック。
 * @param props.loading - データの代わりにローディングスケルトンを表示。
 */

Propsのドキュメントパターン

Reactコンポーネントでは、propsパラメータのドット表記を使用して各propをドキュメント化します。

ドキュメント化すべき一般的なReact Props

• コールバックprops (onX): いつ発火し、どの引数を受け取るか
• ブーリアンフラグ: デフォルト値が何か
• Render props / children: どのコンテキストが渡されるか
• Ref転送: refがどの要素にアタッチされるか