map()とかでよく見る"should have a unique “key” prop."エラー腹立つ #4
📢 このシリーズについて
このシリーズは、React公式ドキュメント（ https://ja.react.dev/ ）を(できるだけ)全て読み、学んだことやコード例、自分なりの補足をまとめていくチャレンジの記録です。
目的
- Reactの基礎〜応用を公式の正しい情報で体系的に理解する
- 自分の言葉でアウトプットして知識を定着させる
このシリーズでは、ただ内容をなぞるのではなく、**「自分がReactを使っていても気づかなかった事実や落とし穴」**を重点的にまとめます。
読んだときに「へぇ、そうなんだ！」となったポイントは必ず記録します！
目次 - 本記事で取り扱う内容
- Reactではリストをどう扱うべきか
🗂 基本情報
- タイトル:リストのレンダー
- URL: https://ja.react.dev/learn/rendering-lists
- カテゴリ: Learn
- 難易度: ★
- 読了日: 2025-08-16
📌 内容
「同一コンポーネントに配列の要素をpropsで渡して複数レンダリングしたい！」って状況よくある。その際、JavaScriptのメソッドである “ map() “ や “ filter() “ などを使用する。
Reactではリストをどう扱うべきか
記事中にこんなコードがあった。
<ul>
<li>Creola Katherine Johnson: mathematician</li>
<li>Mario José Molina-Pasquel Henríquez: chemist</li>
<li>Mohammad Abdus Salam: physicist</li>
<li>Percy Lavon Julian: chemist</li>
<li>Subrahmanyan Chandrasekhar: astrophysicist</li>
</ul>
これは箇条書きを記述したHTMLである。これを複数の場所に描画したい場合、その都度書くのがめんどくさい。
そこで、React・JSXでは以下のように書くことで楽できる。（引用）
// リストの記述内容を定義
const people = [
'Creola Katherine Johnson: mathematician',
'Mario José Molina-Pasquel Henríquez: chemist',
'Mohammad Abdus Salam: physicist',
'Percy Lavon Julian: chemist',
'Subrahmanyan Chandrasekhar: astrophysicist'
];
// JSX表記に
const listItems = people.map(person => <li>{person}</li>);
// リストの使用
return <ul>{listItems}</ul>;
こうすることで読みやすく再利用性に優れたコードになる。
同様にfilter()も扱える。
しかし、この書き方だと以下のエラーが出る。
Warning: Each child in a list should have a unique “key” prop.
これはReactが「それぞれのアイテムがごっちゃになってわけわからんわ」という怒りのメッセージである。
これを回避するためには、 “ key “ を渡す必要がある。
これはふつう、動的に生成するのではなく各アイテムに定義するべきであり、DBのidなどが用いられる。
また、動的に生成した値をkeyにしてしまうと、レンダー間でkeyが異なることによる再利用ミスや状態のズレなどの微妙でややこしいバグの原因になるようだ。
絶対めんどくさい嫌だ気を付ける。
この記述により、Reactはそれぞれのアイテムを一意に識別でき、ソートや削除・追加を行った際、DOMツリーに正しい更新を反映できる。
🚀 宣伝コーナー
個人開発もやっています🍃
ぜひ一度触ってみてください！
1. CAN I DO THIS
📜概要
🌟 「この問題、私に解ける？」がすぐ分かる！ 🌟
CAN I DO THIS は、問題（文章／画像）をポンっと入れるだけで、「解くのに必要な前提知識」を瞬時に可視化するツールです💡
🛡 前提知識がないまま無理に挑んで、時間と体力をムダに消耗…
そんな経験、もうしなくてOK。
必要な知識が足りているか、すぐ判断できます！
✨ 主な機能
- 問題を貼るだけ → 必要知識リスト＋学習ルート自動生成
- 前提 → 派生が一目で分かる依存関係グラフ
- 登録不要＆無料（広告視聴で利用可能）
Discussion