1. Reactのリスト表示をおさらい

Reactでは、配列のデータを画面に並べるときにリストレンダリングを使います。

配列とは、いくつかの値をまとめて管理する箱のようなものです。

Reactでは mapという仕組みを使い、配列の中身を一つずつ取り出して表示します。

2. keyとは何かを超やさしく理解する

keyとは、リストの各要素に付ける目印のことです。

例えるなら、ロッカーの番号や名札のような存在です。

Reactは、どの要素がどれなのかを keyで判断しています。

3. keyを付けないとどうなるか

keyを付けないと、 Reactは要素の変化を正確に判断できません。

その結果、表示が崩れたり、意図しない動作が起こることがあります。

小さなアプリでは問題が見えなくても、後から困る原因になります。

4. 正しいkeyの基本ルール

keyには、その要素を一意に判別できる値を使う必要があります。

一意とは、他と被らない、その要素だけの印という意味です。

データに idがある場合は、それを使うのが最も安全です。

5. 良い例のリストとkey


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

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

（名前が一覧で表示され、Reactが正しく管理します）

6. indexをkeyに使うのはなぜ注意が必要か

indexとは、配列の順番番号です。

一見便利ですが、並び替えや削除があると、 Reactが別の要素だと勘違いすることがあります。

表示だけでなく、入力内容が入れ替わるなどの問題が起こります。

7. indexを使ってもよいケース

データが完全に固定で、並び替えや追加削除が起こらない場合は、 indexでも問題になりにくいです。

ただし、初心者のうちはできるだけ一意な値を用意する意識が大切です。

8. 状態管理とkeyの関係

リストと状態管理を組み合わせると、 keyの重要性はさらに高まります。

Reactは状態の変化を keyを基準に判断しているため、間違ったkeyは状態のズレを引き起こします。

9. 状態を変更するリストの例


import React, { useState } from "react";

function App() {
  const [tasks, setTasks] = useState([
    { id: 1, text: "そうじ" },
    { id: 2, text: "かいもの" }
  ]);

  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>{task.text}</li>
      ))}
    </ul>
  );
}

export default App;

（状態として管理されたリストが表示されます）