Next.jsで学ぶReact講座（完全初心者向け・30日） | 第2章：Reactの基本操作 – 配列の表示（map）

Next.js
スポンサーリンク

配列の表示（map）とは

React では、「同じ形のデータがたくさんある」ときに、それをまとめて画面に並べることがとても多いです。
例えば、Todoリスト・商品一覧・コメント一覧などは、まさに「配列を画面に表示する」典型例です。

JavaScript では、複数のデータをまとめて扱うために 配列 を使います。

const fruits = ["りんご", "バナナ", "ぶどう"];
JavaScript

React では、この配列を map という関数 で変換して、JSX のリストとして表示します。
この「配列 → JSX の配列 → 画面に表示」という流れが、とても重要です。

配列を表示する

そのままでは表示できない

配列をそのまま {} の中に入れて表示しても、意図通りにはなりません。

function Example() {
  const fruits = ["りんご", "バナナ", "ぶどう"];

  return <p>{fruits}</p>;
}
JSX

この場合、ブラウザ上ではだいたい りんご,バナナ,ぶどう のように、カンマ区切りで表示されます。
これでは「リスト」としては見づらいです。

そこで、配列の中身を一つずつ取り出して、JSX の要素に変換してあげる必要があります。
ここで登場するのが map です。

mapの使い方

map は「配列の各要素を変換して、新しい配列を作る」関数

JavaScript の map は、配列のメソッドで、次のような動きをします。

「配列の各要素に対して関数を実行し、その結果を並べた新しい配列を返す」

基本形はこうです。

const newArray = array.map((item, index) => {
  return 変換後の値;
});
JavaScript

React では、この「変換後の値」が JSX になります。
つまり、

「データの配列」から「JSX の配列」を作る

ために map を使います。

実際にリスト表示してみる

果物のリストを <ul> の中に表示する例です。

function FruitList() {
  const fruits = ["りんご", "バナナ", "ぶどう"];

  return (
    <ul>
      {fruits.map((fruit) => {
        return <li>{fruit}</li>;
      })}
    </ul>
  );
}
TSX

ここで行われていることを順番に見ていきます。

まず、fruits は文字列の配列です。
fruits.map((fruit) => { ... }) で、配列の各要素（fruit）に対して処理をしています。
return <li>{fruit}</li>; によって、"りんご" → <li>りんご</li> のように変換しています。
その結果、[<li>りんご</li>, <li>バナナ</li>, <li>ぶどう</li>] のような「JSX の配列」が {} の中に入ります。
React は、この JSX の配列を展開して、リストとして画面に表示します。

短く書くこともできる

慣れてきたら、波括弧と return を省略して、1行で書くことも多いです。

{fruits.map((fruit) => (
  <li>{fruit}</li>
))}
TSX

どちらも意味は同じですが、React のコードではこの「丸括弧バージョン」をよく見かけます。

keyの役割

key は「リストの各要素を一意に識別するためのID」

map を使ってリストを描画するとき、React から次のような警告が出ることがあります。

Each child in a list should have a unique “key” prop.

これは、「リストの要素には key を付けてください」という意味です。

React は、リストが更新されたときに、「どの要素が追加・削除・並び替えされたのか」を効率よく判断したいと思っています。
そのために必要なのが、各要素を一意に識別するID＝key です。

シンプルな例で key を付ける

先ほどの果物リストに key を付けてみます。

function FruitList() {
  const fruits = ["りんご", "バナナ", "ぶどう"];

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}
TSX

ここでは、fruit 自体がユニーク（重複しない）だと仮定して、key={fruit} としています。
React はこの key を使って、「この <li> はこのデータに対応している」と覚えます。

index を key にする場合

map((item, index) => ...) の第二引数 index を key に使うこともできます。

{fruits.map((fruit, index) => (
  <li key={index}>{fruit}</li>
))}
TSX

ただし、これは 順番が変わらない簡単なリストにだけ使うのが無難 です。
要素の追加・削除・並び替えがあるリストで index を key にすると、React がうまく変化を追えずにバグの原因になることがあります。

実際のアプリでは、サーバーから受け取るデータに id フィールドがついていることが多いので、それを key に使うのがベストです。

const users = [
  { id: 1, name: "太郎" },
  { id: 2, name: "花子" },
];

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

このように、

目に見えないけれど React が内部で追跡するためのID

として key がある、と理解しておくと良いです。

リスト表示の基本

オブジェクト配列を表示する例

実際のアプリでは、単なる文字列配列ではなく、「オブジェクトの配列」を扱うことが多いです。
例えば、Todoリストの例を考えてみます。

function TodoList() {
  const todos = [
    { id: 1, title: "買い物に行く" },
    { id: 2, title: "メールを返信する" },
    { id: 3, title: "Next.js の勉強をする" },
  ];

  return (
    <main>
      <h1>今日やること</h1>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </main>
  );
}
TSX

ここでの流れはこうです。

todos は「id と title を持つオブジェクト」の配列。
map で各 todo を受け取り、<li> に変換。
key には todo.id を使って、React がそれぞれの Todo を識別できるようにしている。

このパターンは、実務でもかなり頻出です。

JSX の中に map を書く感覚

最初は「JSX の中に map が突然出てくる」のが違和感かもしれませんが、
慣れると「配列データを画面に並べる標準パターン」にしか見えなくなってきます。

頭の中の変換としては、

データの配列を用意する
map で1件ずつ取り出して JSX 要素にする
全体を ul / div などで包む

という三段階です。

まとめ（配列×map×key の感覚）

配列を画面に表示するときは、「配列 → map で JSX の配列に変換 → React が展開して描画」という流れになる。
map は「配列の各要素を別の形に変換して、新しい配列を作る」関数で、React では「各要素を JSX に変換する」のに使う。
リスト表示では、React が各要素を識別できるように key を必ず付ける必要があり、通常は一意な id を key に使うのが安全。
文字列配列でもオブジェクト配列でも、「map の中で JSX を返す」というパターンは同じで、これを覚えれば Todoリスト・商品一覧・コメントリストなど、多くの UI を作れるようになる。

次のステップとしては、

簡単な Todo 配列を作って画面に並べる
ユーザー名の配列を並べる
map で作ったリストに onClick を付けて、クリックされた要素の情報を表示する

といった練習をすると、「配列を画面にする感覚」がかなりしっくり来るはずです。

スポンサーリンク
タイトルとURLをコピーしました