はじめに｜Reactでリスト表示につまずいた話
Reactを初めて学んだとき、僕が混乱したのが「リストの表示」でした。
最初はエラーや警告に悩まされましたが、仕組みを理解すると一気にスッキリしました。
この記事では、Reactのリスト表示の基礎（map関数とkey属性） を、初心者向けに丁寧に解説していきます。
Reactでリスト表示をする基本の考え方
- Reactでは、配列のデータを
map関数で要素に変換して描画します。 - HTMLのように「同じタグを手書きで並べる」必要はなく、配列を繰り返し処理してJSXを生成するのが基本です。
- その際、Reactは要素を正しく追跡するために
key属性が必須になります。
この2つ（map と key）を押さえることが、Reactのリスト表示の第一歩です。
Reactでmap関数を使ったリスト表示の書き方
コード全文（App.js）
function App() {
const fruits = ["りんご", "みかん", "ぶどう"];
return (
<div>
<h1>フルーツ一覧</h1>
<ul>
{fruits.map((fruit) => (
<li>{fruit}</li>
))}
</ul>
</div>
);
}
export default App;抜粋
{fruits.map((fruit) => (
<li>{fruit}</li>
))}解説
fruits.map((fruit) => ( ... ))
→ 配列fruitsの中身を1つずつ取り出して<li>に変換しています。- JSXでは
{ ... }の中にJavaScriptの式を書けるため、mapの戻り値（配列）をそのまま要素として描画できます。 - 短い式なので
( ... )で囲む書き方が多いですが、複数行になるときは必須です。 for文では同じように直接要素を返せないため、Reactでは mapを使うのが定石です。
初心者がつまずくポイント
returnを書き忘れてundefinedを返してしまう- JSXを複数行に書くときに括弧で囲まず、構文エラーになる
Reactにおけるkey属性の役割と正しい使い方
コード全文（App.js）
function App() {
const fruits = ["りんご", "みかん", "ぶどう"];
return (
<div>
<h1>フルーツ一覧</h1>
<ul>
{fruits.map((fruit, index) => (
<li key={index}>{fruit}</li>
))}
</ul>
</div>
);
}
export default App;抜粋
<li key={index}>{fruit}</li>解説
key属性は、Reactがリストの要素を一意に識別するための目印です。- UIを再レンダリングするとき、Reactは「前回と同じ要素かどうか」をkeyで判断します。
- keyがなければReactは効率的な差分計算（Virtual DOM比較）ができず、警告を出します。
indexをkeyに使うのは原則NG
- 上の例では
indexを使っていますが、実務では非推奨です。 - 配列の並びが変わると
keyがずれてしまい、不要な再描画や状態のバグが起きます。 - 理想はユニークなIDを使うことです。
たとえば以下の例を考えてみましょう。
const fruits = ["りんご", "みかん", "ぶどう"];この配列を index を key にして表示すると：
<ul>
<li key={0}>りんご</li>
<li key={1}>みかん</li>
<li key={2}>ぶどう</li>
</ul>ここで「先頭に新しい要素」を追加します。
const fruits = ["バナナ", "りんご", "みかん", "ぶどう"];React側ではこう認識されます：
<li key={0}>バナナ</li>
<li key={1}>りんご</li>
<li key={2}>みかん</li>
<li key={3}>ぶどう</li>一見正しそうに見えますが、Reactは「key=0 は前回の りんご と同じ要素」と勘違いします。
結果として、UIは正しく更新されても、内部的には状態やアニメーションがズレることがあります。
Reactでオブジェクト配列をリスト表示する方法
コード全文（App.js）
function App() {
const users = [
{ id: 1, name: "太郎", age: 20 },
{ id: 2, name: "花子", age: 22 },
{ id: 3, name: "次郎", age: 18 },
];
return (
<div>
<h1>ユーザー一覧</h1>
<ul>
{users.map((user) => (
<li key={user.id}>
{user.name}（{user.age}歳）
</li>
))}
</ul>
</div>
);
}
export default App;抜粋
<li key={user.id}>
{user.name}（{user.age}歳）
</li>解説
- データベースから取得したデータのように、オブジェクト配列を扱う場面が多いです。
user.idをkeyに指定すれば、ユーザーごとに一意の識別子となり安全。- 複数のプロパティ（
name,age）を{ ... }で埋め込むことで柔軟に表示できます。 - この仕組みを理解すれば、ToDoリストや商品一覧など、実用的なUIが作れるようになります。
まとめ｜Reactでmap関数とkey属性を正しく使いこなそう
- Reactでリストを表示する基本は map関数
- 要素を追跡するために key属性は必須
- indexではなく、ユニークIDをkeyに使うのがベストプラクティス
僕自身、最初は「警告がうるさいな」としか思っていませんでした。
でも、仕組みを理解してからは「Reactって無駄な再描画を避けるためにここまで考えられてるのか！」と感心しました。
リスト表示はアプリ開発で必ず使うので、早めにマスターしておきましょう！
HTMLなら
ul > liを手書きすれば済むのに、Reactでは配列をどうやってJSXに変換するのか、そしてkey属性をなぜ必ず書かないといけないのか……。