こんにちは。フロントエンドの現場で長年Reactと向き合っていると、ふと「なぜこんなルールがあるのか？」という原点に立ち返ることがあります。
Reactを学び始めたばかりの頃、特に「リストレンダリング」と「keyプロパティ」の壁にぶつかって、「なぜindexを入れちゃダメなの？」と悩む人は本当に多いです。でも、大丈夫。これらはReactが画面を効率よく、そして正確に描画するための「大切な約束事」に過ぎません。
今日は、その仕組みを一緒に紐解いていきましょう。
—
1. 魔法の「map関数」でリストを作ろう
Reactでリストを表示するとき、私たちはよく `map` 関数を使います。これは、「お皿が並んでいるところに、料理を一つずつ載せていく」作業に似ています。
例えば、買い物リストを作るとしましょう。
const shoppingList = [“りんご”, “バナナ”, “みかん”];
function ShoppingCart() {
return (
-
{/ map関数を使って、配列の中身を一つずつ
- タグに変換します /}
{shoppingList.map((item) => ( - {item}
))}
);
}
これで画面には綺麗にリストが並びます。でも、ブラウザのコンソールを開くと、Reactから「警告（Warning）」が出ていませんか？
「各要素には一意の key プロパティを指定してください」と。
これこそが、今日一番伝えたい「keyの秘密」です。
—
2. なぜ「key」がないとダメなの？（名札の役割）
想像してみてください。あなたは巨大なスーパーの店長です。棚に並んだ「りんご、バナナ、みかん」の袋に、何も名前が書いていないとします。
もし、途中で「バナナ」を「ぶどう」に変えたとき、あるいは順番を入れ替えたとき、店長であるReactはどれがどれだか分からなくなってしまいます。「あれ？ さっきの袋はどこに行った？」とパニックになり、結局全部の袋を一旦片付けて、並べ直すという非効率な作業をしてしまうんです。
ここで登場するのが `key` という名札 です。
- keyがある場合： 「これは『りんご』というIDの袋」「これは『バナナ』というIDの袋」と識別できるので、変更があった箇所だけをピンポイントで差し替えれば済みます。
- keyがない（または不適切）場合： 全要素を一旦削除して、再作成するような無駄な動き（再レンダリングの暴走）が発生します。
—
3. 実践：正しいkeyの付け方
よくやってしまいがちなのが、「とりあえず配列のインデックス（0, 1, 2…）」をkeyにしてしまうこと。でも、リストの並び順が変わる可能性があるなら、それは危険です。
「変わらない、その要素固有のID」を使うのがプロの鉄則です。
const items = [
{ id: ‘a1’, name: ‘りんご’ },
{ id: ‘b2’, name: ‘バナナ’ },
{ id: ‘c3’, name: ‘みかん’ }
];
function ItemList() {
return (
-
{items.map((item) => (
- {item.name}
// indexではなく、データの固有IDをkeyとして渡します
))}
);
}
なぜインデックス（index）を使ってはいけないの？
例えば、一番上に「いちご」を追加したとします。
インデックスを使っていると、元々「0番目」だった「りんご」が、急に「1番目」にズレますよね。するとReactは、「0番目の『りんご』が『いちご』に変わった！」と勘違いして、無駄な更新処理を走らせてしまうんです。
「中身が変わっても、その要素はあなた自身ですよね」と証明できる ID を使うこと。 これが React を賢く動かすコツです。
—
まとめ：Reactとお友達になるために
ここまで読んでくださったあなたは、もうReactの「差分検出アルゴリズム（Virtual DOM）」という少し難しい概念の、本質的な部分を理解しています。
- リストを作るときは `map` を使う。
- 各要素には、必ず一意の `key`（名札）を付ける。
- `key` には、インデックスではなく、IDなどの固有の値を使う。
この3つを守るだけで、あなたの作るアプリケーションは驚くほど軽快で、バグの少ないものになります。
最初は難しく感じるかもしれませんが、現場のエンジニアもみんな同じ道を通ってきました。まずは「画面にリストを出すとき、この要素を識別する名札はあるかな？」と考える癖をつけてみてください。
もしまた詰まったら、いつでも戻ってきてくださいね。一緒に少しずつ、Reactマスターへの階段を登っていきましょう！
コメント