Reactのコンポーネントのリスト表示とkey属性の役割を徹底解説！初心者でもわかるReact入門

1. Reactのリスト表示とは？

1. Reactのリスト表示とは？

Reactでは、複数の要素やコンポーネントを繰り返し表示したい場面がよくあります。たとえば「買い物リスト」「ユーザー一覧」「メニュー項目」などです。
JavaScriptには配列（データを順番に並べて保存する入れ物）がありますが、Reactではこの配列を使って画面に同じパターンのコンポーネントを表示します。これを「リスト表示」と呼びます。

初心者の方がイメージしやすいように例えると、配列は「生徒名簿」で、Reactのリスト表示は「名簿を読み上げて一人ひとりを呼ぶ」ようなものです。同じ形式の呼び出しを繰り返すから、プログラムを書くのも効率的になります。

2. リスト表示の基本的な書き方

2. リスト表示の基本的な書き方

実際にReactでリスト表示を行うときは、mapという配列を処理するメソッドをよく使います。mapは配列の中身を1つずつ取り出して、新しい形に変換できる便利な機能です。

import React from "react";

function App() {
  const fruits = ["りんご", "みかん", "バナナ"];

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

export default App;

このようにmapを使えば、配列の中身を自動でリストに変換できます。初心者の方でも一度動かしてみると、仕組みがよく分かるはずです。

3. key属性の役割とは？

3. key属性の役割とは？

Reactでリスト表示をするときには、各要素に必ずkey属性をつける必要があります。keyは、リストの中でそれぞれの項目を一意（ユニーク）に識別するための「名前札」のようなものです。

もしkeyがないと、Reactは「どの項目が変わったのか」を見分けにくくなり、余計な再描画（画面を無駄に更新すること）が発生してしまいます。これはパフォーマンスの低下や思わぬ不具合につながる原因になります。

わかりやすい例としては、クラスで点呼をするときに「名前」ではなく「背の順」で呼んでしまうと、座席の位置が変わっただけで誰が誰だかわからなくなるのと同じです。Reactでも、ちゃんと「誰が誰か」を見分けられるように、keyで目印をつけてあげる必要があるのです。

4. keyに使うべき値

4. keyに使うべき値

初心者の方はよくindex（配列の順番）をkeyに使いがちですが、できれば避けた方が良いとされています。なぜなら、順番が入れ替わるとReactが「別の要素」と勘違いしてしまうことがあるからです。

一番おすすめなのは、そのデータが持っているユニークなID（たとえばユーザーIDや商品コードなど）を使うことです。もしユニークIDがない場合には、仕方なくindexを使うこともありますが、基本的には固有のIDをkeyに指定するのがベストです。

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

function UserList() {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

5. keyをつけ忘れるとどうなる？

5. keyをつけ忘れるとどうなる？

もしkeyをつけ忘れると、ブラウザのコンソールに「Warning: Each child in a list should have a unique "key" prop.」という警告が出ます。これは「リストの中の子要素にはユニークなkeyが必要ですよ」という意味です。

初心者の方は最初びっくりするかもしれませんが、慌てなくて大丈夫です。Reactが正しく動作するように、ただkeyを追加してあげれば解決します。

6. 初心者がつまずきやすいポイント

6. 初心者がつまずきやすいポイント

Reactのリスト表示とkey属性で初心者がよくつまずくポイントをまとめておきましょう。

• mapの中で必ずreturnを書かないと表示されないことがある
• keyを正しく設定しないと警告が出る
• indexを安易にkeyに使うと、並べ替えや追加削除で不具合が出やすい

これらを意識しておくだけで、Reactでのリスト表示がずっとスムーズに扱えるようになります。

まとめ

まとめ

Reactでのリスト表示とkey属性について振り返ると、まず基本として配列をmapで処理し、同じ形式のコンポーネントを効率的に画面に並べることができることがわかります。配列のデータを繰り返し処理することで、同じ形の部品を複数作る作業が簡単になり、初心者でも効率的にUIを構築できます。

そして、リスト表示で最も重要なのがkey属性です。keyは各要素を一意に識別する目印として働き、Reactが効率的に再レンダリングを行うために必要です。keyを正しく設定することで、リスト内の要素が変更された際にReactが正確に差分を把握でき、パフォーマンスの低下や不具合を防げます。

初心者の方がよくやってしまうのは、配列の順番であるindexをkeyに使うことですが、順番が入れ替わるとReactが要素を誤認識してしまうことがあります。そのため、可能な限りデータが持つユニークなIDやコードをkeyに設定することが推奨されます。例えばユーザーIDや商品コードなどが最適です。

また、JSX内でmapを使う際はreturnの記述や適切なkeyの設定を忘れないことも重要です。これにより、初心者でもReactのリスト表示をスムーズに扱えるようになり、コードの可読性や保守性も向上します。

サンプルプログラムまとめ

import React from "react";

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

function UserList() {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

Reactで複数のコンポーネントを表示するにはどうすればいいですか？

Reactで同じようなコンポーネントをたくさん表示したい場合は、リスト表示という方法を使います。配列のデータを使って、繰り返しコンポーネントを表示することができます。