---
title: architecture/prop-count · プロップ数
description: props が多すぎるコンポーネントは、担っている責務も多すぎます。
---

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

## チェック内容

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

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

## なぜ重要か

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

## 修正方法

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

## 設定

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

```js svelte-vitals.config.js
export default {
  rules: { 'architecture/prop-count': { options: { max: 10 } } }
};
```

## モードによる違い

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

## 無効化

個別に抑制するには、対象行の直前に `<!-- svelte-vitals-disable-next-line architecture/prop-count -->` を置きます。ルールごと無効化するには、次のように設定します。

```js svelte-vitals.config.js
export default {
  rules: {
    'architecture/prop-count': 'off'
  }
};
```