React mapを使ってリストを描画する方法を初心者向けに解説

フロントエンド開発•2025/1/24

はじめに

Reactでは配列のデータを画面上に並べるシーンが多いですよね。例えばAPIから取得したユーザー一覧や、商品リストを表示したい場合などが典型的ではないでしょうか。そういった場面で便利に使われるのがreact mapによるリスト描画です。今回は、初心者でも理解しやすいようにmapを使ったリスト描画の基本から応用までを解説します。実際の業務でもよく使われるテクニックなので、しっかり把握しておくと後々役立つはずです。

Reactで配列を扱う基本の考え方

Reactはコンポーネントという単位でUIを構築しますが、配列データが存在する場合にはそれをmap関数で繰り返し処理し、要素を一つずつ描画します。このとき配列の要素に変化があっても、Reactが再レンダリングの必要性を判断して部分的にUIを更新してくれます。つまり、Reactにおける状態管理とmapによるリスト描画が組み合わさることで、効率的に画面更新を行えるのです。一方で、単純なforループやwhile文でHTMLを生成してしまうと、React独自の仮想DOMとの連携がうまく機能しません。このように、Reactの描画パフォーマンスや管理しやすさを引き出すには、配列のmapが欠かせないと言えるでしょう。

mapの基本的な書き方と注意点

mapはJavaScriptの配列メソッドとして提供されており、React特有の関数ではありません。ただしReactコンポーネントで利用するときは、以下のように必ず要素にkey属性を設定することが推奨されています。理由としては、Reactがどの要素が追加・削除・変更されたのかを判断するためにkeyを参照しているからです。もしkeyを適切に設定しないと、コンソールに警告が表示されたり、意図しない挙動が起きる場合があります。具体的なコード例を確認してみましょう。


import React from "react";

function UserList() {
  const users = ["Alice", "Bob", "Charlie"];

  return (
    <ul>
      {users.map((user, index) => (
        <li key={index}>{user}</li>
      ))}
    </ul>
  );
}

export default UserList;

上記の例では、単純な文字列配列をmapで繰り返し、<li>要素を返しています。初心者の方は、要素を描画するときにkeyを設定する習慣をつけると良いかもしれません。

実務での活用シーン

実務においては、たとえばAPIから取得したデータを一覧表示する場面が考えられます。 ECサイトで商品リストを並べるケースや、社内向けツールでユーザーのステータス一覧を表示するといった状況が多いのではないでしょうか。こうしたAPI応答のデータは多くの場合、配列で返されます。 Reactアプリでは、その配列データをuseStateやuseEffectと組み合わせて状態管理し、mapを使ってUIに反映する形を取ります。もし取得したデータを編集しながら表示する必要がある場合も、元の配列を操作しながらmapを回すことが基本パターンとなるため、よく活用するテクニックになるはずです。

よくあるエラーと対処法

mapを使った描画で初心者の方がつまずきやすいのは、key属性がない、もしくは重複したkeyを使っているケースです。 keyはユニークでなければいけないので、可能であればデータベースに保存されているIDなどを利用するといいでしょう。 index（インデックス）をkeyに使うのは推奨されないことがありますが、例外的に配列の内容が固定で変化しない場合には使われることもあります。もしコンソールに「Each child in a list should have a unique 'key' prop」といった警告が出ている場合は、keyにユニークな値が指定されているかを確認してみてください。

keyを設定していない、または重複しているとReactが要素の追跡に困ってしまいます。その結果、リストの更新が正常に行われない可能性があるので注意しましょう。

mapと条件分岐・フィルタリングの組み合わせ

リスト描画を行うときに、ある条件を満たす要素のみを表示したいシーンがあります。実務でいえば、ユーザーのステータスがアクティブなデータだけを出したい場合などが該当するかもしれません。このときはあらかじめ配列をfilterしてからmapで描画する、もしくはmapの中で条件分岐を挟むといった方法があります。ただしmapの中に複雑な条件分岐を入れすぎると可読性が下がるため、filterなどで先にデータを絞り込んでおくのがおすすめです。また、配列が大きい場合はパフォーマンスに注意しながら、必要な要素のみをmapする仕組みにすると、アプリ全体を軽く保ちやすいでしょう。


import React from "react";

function ActiveUserList({ userData }) {
  // userDataの中でisActiveがtrueのユーザーのみを抽出
  const activeUsers = userData.filter(user => user.isActive);

  return (
    <div>
      <h3>アクティブユーザー一覧</h3>
      <ul>
        {activeUsers.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default ActiveUserList;

このように、filterとmapを組み合わせることで条件付きのリストを簡潔に表現できるのです。

mapとフラグメントの利用

複数の要素を返したい場合に、親要素を一つ用意するか、React.Fragmentを利用することがあります。 mapで回している要素の中に、<div>や<li>ではなく、より柔軟な構成が必要な場合に有効ではないでしょうか。たとえばテーブルの行を出力するときに、<tr>や<td>を複数まとめて返したいケースで活躍します。 React.Fragmentは余計なDOM要素を増やさないため、レイアウトを汚さないメリットがあります。以下のコード例は、テーブルの行をmapで作る場合を想定しています。


import React from "react";

function UserTable({ userData }) {
  return (
    <table>
      <thead>
        <tr>
          <th>名前</th>
          <th>ステータス</th>
        </tr>
      </thead>
      <tbody>
        {userData.map(user => (
          <React.Fragment key={user.id}>
            <tr>
              <td>{user.name}</td>
              <td>{user.status}</td>
            </tr>
          </React.Fragment>
        ))}
      </tbody>
    </table>
  );
}

export default UserTable;

このように、単一の要素で囲えない場合でもReact.Fragmentを使えば、mapの繰り返し処理を柔軟に記述できます。

mapを使った実務的なパターン例

先ほど挙げたユーザーリスト以外にも、実務ではさまざまなデータを扱う機会があります。例えばダッシュボード上で売上情報や注文リストを表示するときに、配列の中身をmapで展開してテーブルを作るケースがよく見られます。さらに、チャート用のライブラリにデータを渡す際に、下準備としてmapでフォーマットを揃えることもあるかもしれません。 Reactアプリケーションでは、受け取ったデータをどのような形に変換してUIへ反映するかが大事です。そのために、まずはmap関数で配列をどのように加工できるかを理解することが、開発のベースになってくるように思われます。

大規模なシステムでも、配列の基本的な扱い方は重要です。 Reactと組み合わせるときは、mapで要素を描画する流れを確実に理解しておくと安心ですね。

まとめ

React開発において、react mapは頻繁に使われる必須テクニックです。配列をループ処理しながら、動的にUIを組み立てるときに便利だと感じる方も多いでしょう。実務ではAPIレスポンスやデータベースの情報を受け取り、filterなどで絞り込んでからmapで表示する流れがオーソドックスです。また、key属性やReact.Fragmentを組み合わせることで、複数の要素を扱うシーンでも混乱が減ります。ぜひ皆さんも、配列処理を行うときはmapの活用方法を思い出して、柔軟にUIを構築してみてください。