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

生徒

「Reactでリストを表示するときに、keyって必ず書かないといけないんですか？」

先生

「はい。keyはReactにとって、とても大切な目印になります。」

生徒

「目印ということは、なくても表示はできそうな気がします……。」

先生

「表示できる場合もありますが、あとで困ることが多いです。なぜ必要なのか、順番に説明しますね。」

1. Reactのkey属性とは何か？

Reactのkey属性とは、リスト表示するときに、それぞれの要素を区別するための目印です。難しく聞こえますが、「一人ひとりに付ける名札」だと思ってください。

たとえば、クラスに同じ服を着た生徒が並んでいた場合、名札がないと誰が誰なのか分かりません。 Reactも同じで、リストの中身が変わったときに、どれがどれなのかをkeyで判断しています。

2. keyが必要になる場面とは？

Reactでは、配列を使ってデータを一覧表示することがよくあります。このような表示方法をリストレンダリングと呼びます。リストレンダリングでは、map関数を使ってデータを一つずつ画面に表示します。

このとき、Reactは画面の変化をできるだけ少なくして、速く表示しようとします。その判断材料として使われるのがkey属性です。

3. keyを書かないとどうなるのか

keyを書かずにリストを表示すると、エラーではなく警告が表示されることがあります。見た目は正しく表示されていても、内部ではReactが混乱している状態です。

たとえば、リストの途中に新しいデータを追加したとき、本来動かなくてよい部分まで作り直されてしまうことがあります。これにより、入力中の文字が消えたり、意図しない動作が起こる可能性があります。

4. keyを使った基本的な書き方

まずは、配列の番号を使ってkeyを指定する方法を見てみましょう。これは一番簡単で、初心者が最初に覚える書き方です。


import React from "react";

function App() {
  const colors = ["赤", "青", "黄色"];

  return (
    <div>
      <h1>色の一覧</h1>
      <ul>
        {colors.map((color, index) => (
          <li key={index}>{color}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（画面に「色の一覧」と表示され、その下に色の名前が順番に並びます）

indexとは、配列の順番を表す数字です。最初は0、次は1というように、自動で番号が付きます。この番号をkeyとして使うことで、Reactは要素を区別できます。

5. なぜindexをkeyにするのは注意が必要なのか

indexをkeyにする方法は便利ですが、万能ではありません。リストの途中にデータを追加したり削除したりする場合、番号がずれてしまうことがあります。

その結果、Reactが別のデータとして認識してしまい、表示が崩れたり、操作中の内容が消えてしまうことがあります。そのため、実際の開発では、できるだけ固定された値をkeyに使います。

6. idを使った安全なkeyの指定方法

よく使われるのが、idという一意の番号をkeyに指定する方法です。一意とは、「他と重ならない」という意味です。マイナンバーのように、一人に一つだけ割り当てられる番号を想像してください。


import React from "react";

function App() {
  const tasks = [
    { id: 1, title: "そうじ" },
    { id: 2, title: "かいもの" },
    { id: 3, title: "べんきょう" }
  ];

  return (
    <div>
      <h1>やることリスト</h1>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（画面にやることが一覧で表示されます）

このようにidをkeyに使うと、順番が変わってもReactが正しく判断できます。安定した動作につながるため、多くの現場で使われています。