CORRECT001 · キー付き each ブロック

重大度: warning · カテゴリ: correctness

チェック内容

キーのない {#each} ブロックを検出します。src/ 配下のすべての .svelte コンポーネントを静的(CLI)解析します。次の2つの形は対象外とします:

• 定数のインライン配列リテラル({#each [1, 2, 3] as n})— 長さが固定で並べ替えが起きないため、キーを付けても意味がありません。
• アイテムを取らない each({#each { length: 8 }, i} という「N 回描画する」パターン)— キーを付けられるようなアイテムの同一性が存在せず、唯一付けられる index 自体をキーにしても無意味です。

なぜ重要か

キーがないと、リストの並べ替えや要素の挿入・削除が起きたとき、Svelte は末尾でノードを追加・削除し、途中にある DOM ノードのデータを書き換えます — そのため要素の状態(フォーカス・入力・トランジション)がアイテムではなく位置に張り付いてしまい、余計な処理も発生します。キーがあれば、Svelte は正しいノードを挿入・移動・削除できます。

修正方法

{#each items as item (item.id)}
  <li>{item.name}</li>
{/each}