先生と生徒の会話形式で理解しよう

生徒

「Reactでリストを表示すると、keyが必要って言われるんですが、なぜなんですか？」

先生

「keyは、画面の中の部品を見分けるための目印のようなものです」

生徒

「同じkeyを使うとダメって聞いたんですが、どうしてですか？」

先生

「それが、keyの衝突と呼ばれる問題です。今日はそれを防ぐ考え方を説明します」

1. Reactにおけるkeyの役割とは

Reactのリスト表示では、それぞれの要素にkeyを指定します。

keyは、人で言えば名札のようなものです。誰が誰なのかを区別するために使われます。

Reactは、画面が変わったときに、どの部分を更新すればよいかを keyを見て判断しています。

2. keyの衝突とは何か

keyの衝突とは、同じリストの中で、同じkeyが複数使われてしまう状態です。

これは、クラスに同じ番号のロッカーが二つあるようなものです。どちらの持ち物か分からなくなります。

Reactでも、表示がずれたり、意図しない動きをする原因になります。

3. よくある間違い：indexをそのまま使う

初心者がよくやってしまうのが、配列の番号をkeyにする方法です。


function App() {
  const items = ["りんご", "みかん", "ばなな"];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

（果物の名前がリストで表示されます）

この方法は、表示が固定されている場合は動きますが、並び替えや削除があると問題が起きやすくなります。

4. 一意なIDを使うのが基本戦略

keyの衝突を防ぐ一番の方法は、そのデータ専用のIDを使うことです。

一意とは、他と絶対に重ならないという意味です。


function App() {
  const items = [
    { id: 1, name: "赤" },
    { id: 2, name: "青" },
    { id: 3, name: "黄色" }
  ];

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

（色の名前が正しくリスト表示されます）

5. 表示専用の文字列をkeyに使う考え方

データにIDがない場合でも、内容が絶対に重ならないなら、文字列をkeyに使うことができます。


function App() {
  const animals = ["ねこ", "いぬ", "ぞう"];

  return (
    <ul>
      {animals.map(animal => (
        <li key={animal}>{animal}</li>
      ))}
    </ul>
  );
}

（動物の名前が安定して表示されます）