NEXT.jsで配列から要素を表示する方法

はじめに

NEXT.jsでのアプリ作成中に、APIから取得した配列データを表示する方法について迷ったので調べてみました

1.mapを使用する

map関数の中に記載を行う一般的な方法です、関数の中にJSXを直接記載出来るため可読性も高いです

ちなみにkeyにindexを使うのは非推奨のため、keyに使用する要素がない場合以外は控えた方が良いです

page.tsx

"use client";
const array = ['Apple', 'Banana', 'Cherry'];

export default function Page() {

  return (
    <div>
      <ul>
        {array.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
    </div>
  );
}

2.forループを使用する

forループを使用して要素の表示をすることも可能です、途中で複雑な処理を追加する場合などはこちらでもよいかもしれません

whileなども同様に使用可能です

例

page.tsx

"use client";
import { ReactElement } from "react";

const array = ['Apple', 'Banana', 'Cherry'];
const list:ReactElement[] = [];;

for (let i in array) {
  list.push(<li key={i}>{array[i]}</li>);
}

export default function Page() {

  return (
    <div>
      <ul>{list}</ul>
    </div>
  );
}

ポイント:

key属性を明示的に設定する必要があります。
手動で配列を生成してからReactの要素に渡します。

3.直接記載する

配列を展開する際はあまり良い方法ではありませんが、配列の個数が固定の場合などは直接記載することも可能です

page.tsx

"use client";

const array = ['Apple', 'Banana', 'Cherry'];

export default function Page() {
  return (
    <div>
      <ul>
        <li>{array[0]}</li>
        <li>{array[1]}</li>
        <li>{array[2]}</li>
      </ul>
    </div>
  );
}

まとめ

基本的にmap関数を使用した方が可読性がよく使いやすそうです、複雑な処理を途中で入れたい場合であればfor文を使用するといった使い分けてもよいと思います