1. key属性とインデックスの基本をおさらい

Reactで配列データを画面に表示するとき、key属性が必要になります。 key属性は、それぞれの表示要素を区別するための目印です。人が集まるイベントで、名札を付けて誰が誰か分かるようにするのと同じ考え方です。

インデックスとは、配列の順番を表す番号のことです。最初は0、次は1というように、自動で番号が割り振られます。 map関数では、このインデックスを簡単に使えるため、初心者はkeyに指定しがちです。

2. インデックスをkeyに使った基本的な例

まずは、インデックスをkeyに使ったシンプルな例を見てみましょう。一見すると、何も問題がないように見えます。


import React from "react";

function App() {
  const fruits = ["りんご", "バナナ", "みかん"];

  return (
    <div>
      <h1>フルーツ一覧</h1>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（画面にフルーツの名前が順番に表示されます）

このように、表示するだけであれば、インデックスをkeyにしても問題は起きません。そのため、初心者のうちは「これで大丈夫」と思ってしまいがちです。

3. なぜインデックスをkeyにすると問題が起きるのか

問題が起きるのは、リストの中身が途中で変わったときです。 Reactは、keyをもとに「どの要素が変わったか」を判断しています。

インデックスは順番を表す数字なので、リストの途中に新しい要素が入ったり、削除されたりすると、後ろの要素の番号がすべてずれてしまいます。その結果、Reactは別の要素だと勘違いしてしまいます。

4. インデックスkeyで起きやすいトラブル例

たとえば、入力フォーム付きのリストを考えてみましょう。入力途中のデータが、別の行に移動してしまうことがあります。これは、Reactがkeyを頼りに要素を管理しているためです。


import React, { useState } from "react";

function App() {
  const [items, setItems] = useState(["A", "B", "C"]);

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

export default App;

（リストの順番を変更すると、入力内容がずれることがあります）

見た目では分かりにくいですが、内部ではReactが混乱しています。これが、インデックスをkeyに使う最大の注意点です。

5. インデックスkeyが許されるケース

すべての場合で、インデックスkeyがダメというわけではありません。リストの順番が変わらない、追加や削除がない場合は、大きな問題になりにくいです。

たとえば、固定された説明文の一覧や、完全に静的な表示などです。ただし、後から機能を追加する可能性がある場合は、最初から安全な方法を選ぶ方が安心です。

6. インデックスの代わりに使うべきkey

もっともおすすめなのは、idのような一意の値をkeyに使うことです。一意とは、他と重ならないという意味です。学生番号や会員番号を思い浮かべると分かりやすいでしょう。


import React from "react";

function App() {
  const users = [
    { id: 1, name: "たろう" },
    { id: 2, name: "はなこ" },
    { id: 3, name: "じろう" }
  ];

  return (
    <div>
      <h1>ユーザー一覧</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（順番が変わっても、正しく表示され続けます）

この方法なら、リストの順番が変わってもReactは正しく判断できます。安定した動作につながるため、実務でもよく使われています。