React 入門：リストレンダリングとキーの重要性

React でデータを扱うとき、配列をもとに複数の要素を並べて表示するケースはよくあります。例えば「Todo リスト」「商品一覧」「コメント一覧」などです。このように繰り返し要素を描画することを リストレンダリング と呼びます。

今回はリストレンダリングの基本と、なぜ「キー（key）」が必要なのかを整理して解説します。

基本的なリストレンダリング

React では配列のデータを map 関数で変換し、それを JSX として返すのが一般的です。

例：Todo リスト

function TodoList() {
  const todos = ["勉強する", "掃除する", "買い物に行く"];

  return (
    <ul>
      {todos.map((todo) => (
        <li>{todo}</li>
      ))}
    </ul>
  );
}

これでリストが表示されます。ただし、ここで React は警告を出します：

Warning: Each child in a list should have a unique “key” prop.

これは キー（key）を指定しなければならない という警告です。

key とは何か？

key は React がリスト要素を効率的に管理するための「識別子」です。

React は UI を更新するとき、差分を検出して必要な部分だけを書き換えます。そのとき「どの要素が変わったのか」を判断するために key が使われます。

key を追加した例

function TodoList() {
  const todos = ["勉強する", "掃除する", "買い物に行く"];

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

これで警告は消えます。

なぜ key が重要なのか？

key がない場合、React は「要素の順番」に基づいて要素を再利用します。そのため、要素の内容が入れ替わると意図しない動作を引き起こすことがあります。

悪い例（index を key に使う場合）

const todos = ["勉強する", "掃除する", "買い物に行く"];

もし「掃除する」を削除したとすると：

  • index を key にしていると、残りの要素がすべて「1 つずつずれる」扱いになる
  • React は「中身が変わった」と誤認し、不要な再レンダーや状態のリセットが発生する

適切な key の選び方

基本ルールは 「要素を一意に識別できる値」 を key にすることです。

  • 良い例：ID、ユニークな文字列
  • 避ける例：配列のインデックス（並び替えや削除で変わってしまう）

良い例（ID を利用）

function TodoList() {
  const todos = [
    { id: 1, text: "勉強する" },
    { id: 2, text: "掃除する" },
    { id: 3, text: "買い物に行く" },
  ];

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

これなら要素を削除・並び替えしても React は正しく差分を検出できます。

まとめ

  • リストレンダリング では map を使って配列を要素に変換する
  • key は React が要素を正しく識別するための「目印」
  • key には ユニークで安定した値 を使う（ID がベスト、index は避ける）
  • 正しい key を使うことで、パフォーマンスや正しい UI 更新が保証される