React公式ドキュメントを読む20 配列で生成される各要素にkeyを割り当て

前回からの続きです。今回読むReact公式ドキュメントは「リストと key」ページの後半です。

Reactでは、配列データからリストなどの要素を生成する場合、Reactが識別できるように生成される各要素に一意の key を割り当てる必要があります。Reactにおける key について、詳しく見ていきましょう。

keyの実例

Reactにおける key とは、どの要素が追加・変更・削除されたのかを React が識別するためのものです。Reactで配列データをもとにしてリストを生成する場合、生成された各要素が識別できるように一意の key を割り当てます。

例えば、以下の例では配列データのnumbersをもとにして、配列項目の個数だけli要素を生成しています。この際に生成された各li要素に keyを割り当てています。

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

keyとして割り当てる文字列として適したもの

利用できるIDがあれば、keyとして利用する

keyとして割り当てる文字列は、配列項目の兄弟間でその項目を一意に特定できるものが良いでしょう。上の例では、たまたま配列項目が一意の整数なので、それをkeyとして利用しています。

一般的には、利用できるIDがあれば、以下の例のようにそのまま key として利用してしまうのが良いでしょう。

// 利用できるIDがあれば、そのままkeyとして利用
const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

key として利用できそうなIDが無い場合

データのなかに key として利用できそうなIDが無い場合には、最終手段として、以下の例のように配列項目のindex番号を利用できなくはありません。

// 利用できるIDが無ければ、最終手段としてindex番号をkeyとして利用
const todoItems = todos.map((todo, index) =>
  <li key={index}>
    {todo.text}
  </li>
);

ただし、上記例のようにindex番号を利用するのは、あくまでも利用できるIDが無い場合の最終手段にした方が良いでしょう。なぜなら、配列の要素は並び順を変更される可能性があるためです。また、配列の項目数が大量になる場合には、 index番号を使っているとパフォーマンスに影響する可能性があります。

keyとして適しているのは、永続的で一意のデータです。将来的に変更される可能性のあるデータは key には不向きです。また、パフォーマンスへの影響を考慮すれば、その都度計算が必要になるデータは key には不向きです。

逆に言えば、配列の項目が静的で並べ替えや計算などが行われない場合、かつ、配列の項目数が大量ではない場合には、index番号を key として利用しても問題ないかもしれません。

keyが必要となるのは、どの要素？

keyが必要となるのは、配列に関連して生成された各要素に対してです。

例えば、以下の例は誤りです。以下のコードでは必要のないところで key を指定して、反対に必要なところで key を指定していません。

function ListItem(props) {
  const value = props.value;
  return (
    // 【誤】ここでkeyを指定する必要はありません
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 【誤】ここでkeyを指定する必要があります
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

適切にkeyを指定した正しいコードは、以下の通りです。keyが必要となるのは、原則としてmap() 呼び出しの中に現れる要素に対してです。

function ListItem(props) {
  // 【正】ここでkeyを指定する必要はありません
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 【正】keyは配列内で指定する必要があります
    <ListItem key={number.toString()}
              value={number} />

  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

上記のサンプルソースをHTMLファイルにしたものが以下です。

https://programming-world.net/sample/react_doc/keys1-1.html

key は兄弟要素の中で一意であればよい

key は、配列から生成される兄弟要素の中では一意である必要があります。しかし、プログラム全体の中で一意である必要はなく、別の兄弟で同じkeyが使われても問題ありません。つまり、1つの map() 内で処理を回している中で一意であれば良いということです。

以下のコードでは、1つの配列データをもとに、サイドバー部分とコンテンツ部分がそれぞれ別のmap()関数を使って作成されていますが、どちらも同じpost.idを key にしています。

// Blogコンポーネント
function Blog(props) {

  //サイドバー（post.idを key にしている）
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
  );

  //コンテンツ（post.idを key にしている）
  const content = props.posts.map((post) =>
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );

  //サイドバーとコンテンツを要素にまとめて返す
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );

}

// 配列データ
const posts = [
  {id:1, title:'はじめまして', content:'はじめての投稿です！'},
  {id:2, title:'二度目の投稿', content:'二度目の投稿です！！'}
];

// レンダリング
ReactDOM.render(
  <Blog posts={posts} />,
  document.getElementById('root')
);

上記のサンプルソースをHTMLファイルにしたものが以下です。

https://programming-world.net/sample/react_doc/keys1-2.html

key は React へのヒントとしてのみ使われる

key は React へのヒントとして使われます。Reactは key をヒントにして、配列項目の要素を識別できるようになります。しかし、 key はコンポーネントには渡されません。

例えば、以下のコードでは、Postコンポーネントを呼び出す際に、propsとしてkeyを渡しているように見えますが、実際には key はPostコンポーネントには渡されません。

const content = posts.map((post) =>
  <Post
    key={post.id}
    title={post.title} />
);

もし、 Postコンポーネントでpost.idの値が必要になるなら、同じ post.id の値を別の名前で渡す必要があります。

以下の例では、Postコンポーネントは props.id を読み取れますが、props.key は読み取れません。

const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);

次回へ続きます。