1. Reactで配列をループ表示するには？

React（リアクト）では、配列（はいれつ）を使って複数のデータを管理し、それをmap関数で画面に繰り返し表示することができます。

map関数（まっぷかんすう）とは、配列の中のひとつひとつの値を取り出して、指定した処理をしてくれる便利な機能です。

たとえば、「りんご」「みかん」「ぶどう」といった果物の名前を画面に並べて表示したいとき、map関数を使うと簡単にできます。

2. JSXでmap関数を使う書き方

実際のReactコードで、map関数を使ったループ表示の書き方を見てみましょう。


import React from "react";

function App() {
  const fruits = ["りんご", "みかん", "ぶどう"];

  return (
    <div>
      <h1>果物リスト</h1>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（画面に「果物リスト」と表示され、その下に「りんご」「みかん」「ぶどう」がリストとして表示されます）

3. なぜkeyが必要なの？

mapで要素を繰り返し表示するときは、keyという属性を必ず付ける必要があります。

key（キー）とは、各要素をReactが正しく管理するための「名前タグ」のようなものです。これがあることで、画面の更新がスムーズに行えます。

今回はindex（配列の順番の番号）を使っていますが、もっとわかりやすい固有のIDがある場合は、そちらを使うのが理想です。

4. オブジェクト配列をmapで表示する方法

配列の中身が「文字」だけでなく、「名前とIDを持つオブジェクト」のような形でもmap関数は使えます。


import React from "react";

function App() {
  const users = [
    { id: 1, name: "山田さん" },
    { id: 2, name: "田中さん" },
    { id: 3, name: "佐藤さん" }
  ];

  return (
    <div>
      <h1>ユーザー一覧</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（画面に「ユーザー一覧」と表示され、「山田さん」「田中さん」「佐藤さん」がリストで表示されます）

このように、map関数は配列の要素を繰り返して表示するのにとても便利です。

React初心者にとって、まずはこのmapを使った表示方法をしっかり覚えるのがおすすめです。

5. map関数の中で条件分岐したいときは？

「特定の要素だけを表示したい」という場面では、map関数の中でif文や三項演算子（さんこうえんざんし）を使うことができます。


{users.map((user) => (
  user.id !== 2 && <li key={user.id}>{user.name}</li>
))}

このように書くと、IDが2の人は表示されません。

6. 配列が空だったときの表示も工夫しよう

配列に何もデータがないとき、「データがありません」などのメッセージを出すと、より親切な画面になります。


{users.length === 0 ? (
  <p>ユーザーが見つかりませんでした。</p>
) : (
  <ul>
    {users.map((user) => (
      <li key={user.id}>{user.name}</li>
    ))}
  </ul>
)}

このようにすることで、空のときにも画面が寂しくならず、ユーザーに優しい表示になります。

まとめ

Reactで配列を画面に表示するしくみは、初心者にとって最初の大きな壁に感じられますが、実際には「配列をひとつずつ取り出して画面に並べる」という流れを理解すれば、とても分かりやすく使えるようになります。とくに、まっぷかんすう（map関数）は、ふくすうの要素をまとめて表示したいときに欠かせない重要な道具であり、Reactを学ぶうえで必ず身につけておきたい基本の考え方です。さらに、きー（key）という特別な値を使うことで、Reactが各要素を正しく識別し、画面更新をすばやく正確におこなえるようになります。また、配列の中身が文字でも、オブジェクトでも、ふくざつな構造でも、mapを使えば柔軟に表示できます。じょうけんぶんきを組み合わせたり、配列が空のときに別の表示を出したりする工夫も、実際のアプリではよく使われます。Reactの表示ロジックは「配列をどう扱うか」で大きく変わるため、この基本をしっかり理解しておくことで、より自由な画面づくりが可能になります。以下には、まとめとして「配列の基本表示」「条件つき表示」「空配列のときの表示」を組み合わせたサンプルを載せています。学んだ内容をひとつにまとめて確認できるので、復習にも役立ちます。

まとめのサンプルコード：配列をまとめて表示する応用例


import React from "react";

function SummaryList() {
  const items = [
    { id: 1, name: "りんご", visible: true },
    { id: 2, name: "みかん", visible: false },
    { id: 3, name: "ぶどう", visible: true }
  ];

  return (
    <div>
      <h2>まとめリスト</h2>

      {items.length === 0 ? (
        <p>アイテムがありません。</p>
      ) : (
        <ul>
          {items.map((item) =>
            item.visible ? (
              <li key={item.id}>{item.name}</li>
            ) : null
          )}
        </ul>
      )}
    </div>
  );
}

export default SummaryList;

（画面に「まとめリスト」と表示され、「りんご」「ぶどう」が表示されます）

このサンプルでは、配列のすべての要素を扱いながら、表示するかどうかをじょうけんで切り替えています。map関数の中で条件分岐を使うと、画面の見せ方を細かく調整できます。実務でも「特定の条件を満たすデータだけを表示したい」「あらかじめ非表示のデータを持っておきたい」といった場面は非常に多いため、今回の学習内容はそのまま活かせる知識になります。 Reactの配列処理は、アプリの画面づくりを支える中心的な部分であり、map関数を正しく使えることで開発の自由度が大きく広がります。細かな表示変更や条件つきの表示も、すべて配列とmapの組み合わせで対応できるため、まずは今回の内容をしっかり理解し、小さなアプリをつくりながら少しずつ慣れていきましょう。

先生と生徒の振り返り会話

生徒

「今日のまとめを読んで、map関数の使い方がだいぶわかってきました！配列を表示するだけじゃなくて、条件分岐も一緒に使えるんですね。」

先生

「そうですね。Reactでは、配列とmapをどう扱うかで画面づくりのやり方が大きく変わります。配列がからのときの表示も大切なポイントですよ。」

生徒

「はい！きー（key）も忘れずにつけるように気をつけます。これがないと動きが変になる理由もよく理解できました。」

先生

「とても良い理解です。これからリスト表示のあるアプリをつくるときには、今日の学びを意識して実装してみてくださいね。」