React初心者向け｜mapでリスト表示するときのkeyの意味と使い方

はじめに

Reactでmapメソッドを使ってテストデータを一覧表示する課題があったのですが、最初はうまくできませんでした。
今回は、その経験をもとに記事にまとめました。

問題

今回、つまずいたポイントは以下です。

• Reactのkeyを設定する意味を理解していなかった
• mapメソッドに渡す引数の使い方を理解していなかった

解決方法

結論: 以下の書き方で画面に表示できました。

const records = [
    { title: "勉強の記録1", time: 1},
    { title: "勉強の記録2", time: 3},
    { title: "勉強の記録3", time: 5}
];

function App() {
  return (
    <div>
      <h1> 学習記録一覧</h1>
      {records.map((record) => (
        <p key={record.time}>
          {record.title} {record.time}時間
        </p>
      ))}
    </div>
  );

表示される内容のイメージ

勉強の記録1 1時間
勉強の記録2 3時間
勉強の記録3 5時間

理解した点

この部分で苦労しましたが、以下の点が理解できました。

      {records.map((record) => (
        <p key={record.time}>
          {record.title} {record.time}時間
        </p>
      ))}

• JSX内に書かれている点:HTML風に見えるけど、実際はJavaScriptの中でUIを定義している。
• mapメソッド: 配列の各要素に対して関数を実行し、新しい配列を作るメソッド
• mapに渡す引数: データの意味が分かる名前にすると読みやすい
• Reactでkeyを設定する意味: keyは「この要素が誰か」をReactに教える識別番号

ざっくりとこんな感じです。keyの記法について別でまとめます。

keyの記法について

<p key={record.time}>
  {record.title} {record.time}時間
</p>

{record.time}>:ここに識別番号であるkeyを入力します。
自分がわからなかったのはここに何を書いて定義すればいいのかがわかりませんでした。

結論:ユニークな値を使うことです

• record.time が各要素で被らないならOK
  同じ値がある場合は id など一意な値を使う

理由はReactが迷うからです。
番号を振っているのに同じ番号があるとReactは困惑します。
既存の要素を上書きしてしまったり、状態（入力値やチェックなど）がズレることがあります
なのでkeyを設定する上では独自の値にしましょう

日常の具体例でイメージするとわかりやすい！

• リストの要素 = 生徒
• key = 生徒番号

2人が同じ番号だと、Reactは「どちらの生徒か」を迷ってしまう

結果、座席表（表示）や持ち物（状態）がズレちゃいます。

なのでkeyに設定する際は重複のないよう設定することが大事です！

おわりに

スピードを意識して、高速でアウトプットすることを心掛けつつ
記事をたくさん書いて力をつけようと思います💪

参考