1. Reactのリスト表示とkeyの基本

Reactでは、複数のデータをまとめて画面に表示したいときに「リスト表示」を使います。リスト表示とは、同じ形の部品をデータの数だけ並べて表示する仕組みです。たとえば、買い物リスト、名前の一覧、メニュー表などを思い浮かべてください。

Reactでリストを表示するとき、必ず登場するのが「key属性」です。 keyとは、Reactがそれぞれの表示項目を見分けるための目印のようなものです。人間でいうと、名札や社員番号のような役割を持っています。

このkeyがあるおかげで、Reactは「どの表示が追加されたのか」「どれが消えたのか」「どれが入れ替わったのか」を正しく判断できます。そのため、keyの付け方はReactの動作や画面の安定性に大きく影響します。

2. ユニークなIDとは何かをやさしく理解しよう

keyに使う値としてよく出てくる言葉が「ユニークなID」です。ユニークとは「他と重ならない」という意味で、IDは「識別番号」のことです。つまり、ユニークなIDとは「一つひとつが必ず違う番号や文字列」を指します。

たとえば、学校の出席番号を考えてみてください。同じクラスの中で、同じ番号の人が二人いると混乱しますよね。 Reactのkeyも同じで、同じkeyがあるとReactが正しく判断できなくなります。

データベースやAPIから取得したデータには、idという項目が用意されていることが多く、これが最初からユニークなIDとして設計されています。 Reactでは、このidをkeyに使うのが基本中の基本です。

3. ユニークなIDをkeyに使う基本例


import React from "react";

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

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

export default App;

（画面には「たろう」「はなこ」「じろう」とリスト形式で表示されます）

この例では、usersというデータの中にidがあり、そのidをkeyに使っています。それぞれのidは重ならないため、Reactは安心して画面を管理できます。これがユニークなIDをkeyに使う最も基本的で安全な書き方です。

4. なぜユニークなIDがベストプラクティスなのか

ベストプラクティスとは、「多くの人が使っていて、失敗が少ないおすすめの方法」という意味です。 ReactでkeyにユニークなIDを使うことがベストプラクティスと呼ばれるのには理由があります。

Reactは画面を効率よく更新するために、前の画面と次の画面を比べています。このとき、keyが変わらなければ「同じ要素」と判断します。ユニークなIDはデータが変わらない限り一定なので、Reactの判断がとても正確になります。

逆に、正しくないkeyを使うと、入力した文字が消えたり、別の行に移動したりといった不思議な動きが起こることがあります。初心者ほど原因が分からず混乱しやすいため、最初から正しい方法を知っておくことが大切です。

5. フォーム付きリストでもIDをkeyに使う例


import React, { useState } from "react";

function App() {
  const [items] = useState([
    { id: "a1", text: "りんご" },
    { id: "b2", text: "みかん" },
    { id: "c3", text: "ぶどう" }
  ]);

  return (
    <div>
      {items.map(item => (
        <div key={item.id}>
          <input type="checkbox" /> {item.text}
        </div>
      ))}
    </div>
  );
}

export default App;

（果物の名前とチェックボックスが縦に並んで表示されます）

入力フォームがある場合でも、ユニークなIDをkeyに使うことで表示が安定します。チェックを入れた状態が勝手に変わるといったトラブルを防ぐことができます。