第8回：Reactで「リスト表示」を攻略：map関数の使い方とkey属性の重要性

前回：クリックや入力に反応する！Reactのイベントハンドリング基礎では、ユーザーの動きを「きっかけ」にして画面を動かす方法を学びました。

さて、本物のWebアプリを想像してみましょう。ToDoリスト、商品一覧、SNSの投稿……。これらはすべて「データの集まり」です。100個の投稿があるとき、100回コピー＆ペーストしてコードを書くのは現実的ではありませんよね。

2026年現在、React開発で大量のデータをスマートに表示するための最強の武器、map（マップ）関数をマスターしましょう！

1. JavaScriptの最強兵器「map関数」とは？
2. 忘れるとエラーになる「key（キー）属性」
3. 【実践】フルーツリストを一瞬で作ろう
1. App.jsx（最小構成版）
4. コードの解説（JavaScript & React）
1. JavaScriptのポイント
2. Reactのポイント
5. 2026年の学び：indexをkeyに使うのは「最終手段」
1. 今回のまとめ
2. 次回予告：表示したり消したりを自由自在に

1. JavaScriptの最強兵器「map関数」とは？

Reactでリストを作る際、HTMLの for文 は使いません。代わりにJavaScriptの map メソッド を使います。

mapの役割： 配列の中身を1つずつ取り出し、加工して「新しい配列」を作る。
Reactでの活用： 「データの配列」を「JSX（タグ）の配列」に変換する。

この「データ」を「見た目」へ変換するスピード感こそが、Reactが愛される理由の一つです。

2. 忘れるとエラーになる「key（キー）属性」

リスト表示をする際、Reactには絶対守らなければならないルールがあります。それは、ループで書き出す一番外側のタグに key という特殊な目印をつけることです。

なぜ必要か？： Reactは「どの項目が追加・削除・変更されたか」をこの key で見張っています。
何を入れるか？： 他と被らない「一意のID（識別子）」を入れます。

2026年の最新のReactでも、この key を忘れるとブラウザのコンソールに警告が表示され、パフォーマンス低下の原因になります。

3. 【実践】フルーツリストを一瞬で作ろう

今回は、配列に入ったフルーツの名前を、一気にリスト表示するサンプルを作ります。第2回の環境で作成した App.jsx を書き換えてみましょう。

App.jsx（最小構成版）

JavaScript

import React from 'react';

export default function App() {
  // 1. 表示したいデータの配列
  const fruits = ["りんご", "バナナ", "オレンジ", "メロン"];

  return (
    <div>
      <h1>今日のフルーツリスト</h1>
      
      {/* 2. JavaScriptの map 関数を使ってループする */}
      <ul>
        {fruits.map((fruit, index) => (
          // 3. 鉄則：一番外側のタグに key をつける
          // 本来はIDが望ましいですが、練習用として index（番号）を使います
          <li key={index}>
            {fruit} を食べる
          </li>
        ))}
      </ul>

      <p>※配列にデータを追加するだけで、リストは自動で増えます。</p>
    </div>
  );
}

CodeSandboxでリスト表示（map）を体験する

4. コードの解説（JavaScript & React）

JavaScriptのポイント

map((要素, 番号) => ...): 配列 fruits の中身を、1つずつ fruit という名前で取り出しています。
アロー関数の（）: => ( ... ) のように丸括弧を使うと、「中身をそのまま return（返却）する」という短い書き方になります。JSXを返すときはこの書き方が定番です。

Reactのポイント

{ } の中で実行: 第3回のJSXルールで学んだ通り、JavaScriptを実行するには波括弧 { } が必要です。その中で map を呼び出すのがReactの王道スタイルです。
第4回のコンポーネントとの組み合わせ: 今回は <li> を直接書きましたが、実際には <ProductCard key={...} /> のように自作コンポーネントをループさせることが多いです。