1. 配列とは何かをやさしく理解しよう

配列とは、同じ種類のデータを順番にまとめて入れておく箱のようなものです。たとえば、買い物メモに「牛乳、パン、卵」と並べて書くことがあります。この「並べて書く」という考え方が、配列の基本です。

プログラミングでは、この並びをそのままデータとして扱えます。 Reactでは、この配列の中身を使って画面を作ることがとても多くあります。

2. Reactで配列を画面に表示する考え方

Reactでは、画面に表示する内容を部品の組み合わせで考えます。同じ形の部品を何個も表示したい場合、一つずつ手で書くのではなく、配列を使ってまとめて表示します。

これにより、データが増えても減っても、プログラムを書き直す必要がありません。配列の中身を変えるだけで、画面の表示も自動で変わります。

3. map関数とは何をするものか

map関数とは、配列の中身を一つずつ取り出して、同じ処理を繰り返す仕組みです。難しく聞こえますが、「リストの一行ずつを順番に見る作業」と考えてください。

Reactでは、mapを使って「配列の数だけ表示を作る」ことができます。これをレンダリングと呼びます。レンダリングとは、データをもとに画面を作ることです。

4. 文字の配列をmapで表示してみよう

まずは、一番シンプルな例です。文字だけが入った配列を使って、一覧表示をしてみます。


import React from "react";

function App() {
  const foods = ["ごはん", "パン", "めん"];

  return (
    <div>
      <h1>食べ物リスト</h1>
      <ul>
        {foods.map((food) => (
          <li>{food}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（画面に「食べ物リスト」と表示され、その下に食べ物の名前が並びます）

この例では、foodsという配列の中身をmapで一つずつ取り出しています。取り出した内容をliタグで表示することで、リストが完成します。

5. mapの中で使われている書き方の意味

mapの中に書かれている部分は、「配列の一つ分の表示」を表しています。 foodという名前は自由に決められます。配列の中身を一時的に受け取る箱だと考えてください。

波かっこで囲まれている部分は、JavaScriptの処理を書く場所です。 Reactでは、画面の中に処理を書けるのが特徴です。

6. 数字の配列をmapで表示する例

次は、数字が入った配列を表示してみましょう。文字でも数字でも、考え方は同じです。


import React from "react";

function App() {
  const numbers = [1, 2, 3, 4, 5];

  return (
    <div>
      <h1>数字一覧</h1>
      <ul>
        {numbers.map((number) => (
          <li>{number}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（画面に1から5までの数字が一覧で表示されます）

このように、配列の中身が変わっても、 mapを使えば同じ形で表示できます。

7. オブジェクトの配列をmapで扱う基本

実際のReact開発では、名前や年齢など複数の情報をまとめて扱うことが多くあります。そのときに使われるのがオブジェクトです。オブジェクトとは、「項目と内容をセットで持つ箱」です。


import React from "react";

function App() {
  const people = [
    { name: "たろう", age: 20 },
    { name: "はなこ", age: 25 }
  ];

  return (
    <div>
      <h1>人物一覧</h1>
      <ul>
        {people.map((person) => (
          <li>
            {person.name}（{person.age}歳）
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（名前と年齢がセットで表示されます）

このように、mapの中ではオブジェクトの中身も自由に使えます。配列とmapを理解すると、Reactでできることが一気に広がります。