architecture/prop-count · プロップ数

props が多すぎるコンポーネントは、担っている責務も多すぎます。

重大度: info · カテゴリ: architecture

チェック内容

$props() から 6 個を超えるプロップを分割代入しているコンポーネントを検出します。名前付きプロップとレスト要素（...rest）を併用していても、名前付きプロップの分はカウントされます。カウントされないのは、名前付きプロップを伴わないレスト要素のみの分割代入と、分割代入していない $props() の場合です。

この閾値は勘ではなく実測に基づいています。実在する Svelte 5 のコードベースを調査し、リポジトリごとに求めた 90 パーセンタイルの中央値が 6 でした。つまり典型的なプロジェクトでは、プロップが 7 個以上のコンポーネントは、プロップ数を数えられるコンポーネントの中で上位 1 割程度に入る幅の広さ、ということになります。調査対象を 13 リポジトリに広げてもこの値は変わらず、レスト要素（...rest）と併用された名前付きプロップを含めて数えても、リポジトリごとの p90 の中央値は 6.5 とほぼ同じです。そのためデフォルトは 6 としています。

なぜ重要か

受け取るプロップが多いコンポーネントはたいてい責務過多です。関連するプロップをオブジェクトにまとめるか、コンポーネント自体を分割すれば、API を理解しやすく保てます。

修正方法

<script>
  // 多数のフラットなプロップではなく、関連するものをオブジェクトにまとめる。
  let { user, layout } = $props(); // user: { name, avatar, … }
</script>

設定

オプション	型	デフォルト
`max`	integer	6

export default {
  rules: { 'architecture/prop-count': { options: { max: 10 } } }
};

モードによる違い

ありません。このルールが読むのは同じ .svelte / .ts のソースファイルなので、CLI、Vite プラグインのビルド、ライブダッシュボードの静的ベースラインのいずれでも結果は同一で、レンダリング済み HTML の解析で再評価されることもありません。--route で実行範囲を絞ると、このルールは動きません。コンポーネントスコープのルールには、検出を紐づけるルートが無いためです。

無効化

個別に抑制するには、対象行の直前に  を置きます。ルールごと無効化するには、次のように設定します。

export default {
  rules: {
    'architecture/prop-count': 'off'
  }
};