【React】配列の表示方法(リスト表示、map,filterなど)

React

Reactで配列を表示する方法について紹介します。

Reactで配列を表示する方法

べた書きする(ほぼ使わない)

まず、以下のような方法は非効率なため、通常とりません。

const animals = ["犬", "ゴリラ", "たぬき"];

const Example = () => {

  return (
    <>
      <h3>配列の操作</h3>
      <ul>
        <li>{animals[0]}</li>
        <li>{animals[1]}</li>
        <li>{animals[2]}</li>
      </ul>
    </>
  );
};

export default Example;

for文で表示


const animals = ["犬", "ゴリラ", "たぬき"];

const Example = () => {

  const list = [];
  for (const animal of animals) {
    list.push(<li>{animal}</li>)
  }
  return (
    <>
      <h3>配列</h3>
      <ul>
        {list}
      </ul>
    </>
  );
};

export default Example;

for文で、pushしているのはJSXのため、JavaScriptオブジェクトとなります。
最終的には上のベタ書きと同じ形式になります。

mapで表示


const animals = ["犬", "ゴリラ", "たぬき"];

const Example = () => {

  const list = animals.map(animal => <li>{animal}</li>)
  return (
    <>
      <h3>配列</h3>
      <ul>
        {list}
      </ul>
    </>
  );
};

export default Example;

mapを使うとかなりスッキリとした見た目になります。
mapについて、JavaScriptの配列を加工するmap(),filter(),reduce()メソッドの使い方を参照してみてください。
また、for文は文のため、JSX内には記述できないのですが、mapは式のため、JSXに直接記述することも可能です。
JSX内にJavaScriptの式を埋め込む方法と式と文の違いは、JSX内にJavaScriptの式を埋め込む方法と式と文の違いを参照してみてくさだい。

Reactで配列を表示するときには必ずキーを設定する

const animals = ["犬", "ゴリラ", "たぬき"];

const Example = () => {
  const list = animals.map((animal) => <li key={animal}>{animal}</li>);
  return (
    <>
      <h3>配列</h3>
      <ul>{list}</ul>
    </>
  );
};

export default Example;

Reactは、React要素ツリーの差分を検出してDOMを更新(commit)しています。
その差分の検出にkeyがあることで、子要素をすべて洗い直しする必要なく、差分のみを検出できるようになります。
そのため、key属性を必ずつける必要があります。

key属性の注意点

  • keyは、必ず一意の値であること
  • keyに設定した値は、変更しないこと
  • keyは、配列のインデックスは極力使わないこと

配列のインデックスを使わないほうがいいのは、先頭に要素を追加したり削除したりすると、
配列の0番目の要素が変更されるにも関わらず、インデックスが再度振られて、異なる要素にひもづくようになります。
つまり、正しく差分を検出できなくなります。
要素を全部洗い替えしないといけなくなるため、パフォーマンスの低下につながります。

Reactでフィルターメソッドを使う

import { useState } from "react";

const animals = ["犬", "ゴリラ", "たぬき","abc", "def"];

const Example = () => {
  const [filteredVal, setFilteredVal] = useState("");
  const list = animals
    .filter((animal) => animal.indexOf(filteredVal) !== -1)
    .map((animal) => <li key={animal}>{animal}</li>);

  return (
    <>
      <h3>
        配列:
        <input type="text" value={filteredVal} onChange={(e) => setFilteredVal(e.target.value)} />
      </h3>
      <ul>{list}</ul>
    </>
  );
};

export default Example;

filterメソッドを使うことで、一致したものだけを新しい配列に格納することができます。
mapとfilterはチェーンでつなげることができます。
合わせてよく使うものに、indexOfがあります。
indexOfメソッドに関しては、JavaScriptで文字列を操作するを参照してみてくさだい。
簡単にいうと、一致する文字列が含まれている場合は、-1以外を返して、含まれていない場合は-1を返します。
そのため、indexOfで指定した文字列に一致しないかどうかは、indexOfで返される値が-1かどうかを判定すればいいことになります。

animals
    .filter((animal) => animal.toLowerCase().indexOf(filteredVal) !== -1)

小文字でも一致させたいときは、toLowerCase()を使ったりします。

React

Posted by devsakaso