Reactでリストをレンダリングするとき、ほとんどの場面でmapメソッドを使いますよね。公式ドキュメントでもそうだし、ネット上の記事やチュートリアルもほぼすべてがmapで実装しています。
JavaScriptの基本的なループ構文であるforループは使うべきではないのか？とまとまっている記事がなかったので、まとめてみたのと、実際に検証してみることにしました。
基本的な実装方法
まずは両方の実装方法を見てみましょう。
mapメソッドを使う方法
function ListComponent({ items }) {
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
これが最もよく見かける方法です。JSX内に直接mapを書いて、配列の各要素に対応するJSX要素を返します。とてもシンプルですね。
メリット
- 余計なコードがなく、直感的に書ける
- Reactの宣言的プログラミングスタイルと相性がいい
- 元の配列を変更せず、新しい配列を返す
- filterやreduceなどの他のメソッドとチェーンできる
- わざわざ変数に代入しなくてもいい
参考
forループを使う方法
function ListComponent({ items }) {
const listItems = [];
for (let i = 0; i < items.length; i++) {
listItems.push(<li key={i}>{items[i]}</li>);
}
return <ul>{listItems}</ul>;
}
こちらはJSX外でforループを使って要素を配列に詰めていき、最終的にその配列をJSX内で展開します。
メリット
- 多くのプログラマーが最初に学ぶループ構文
- 複雑な条件分岐やネストを柔軟に記述できる
- 関数呼び出しがないぶん、わずかに高速の可能性
パフォーマンス検証
ここで気になるのがパフォーマンスです。理論上はforループのほうがオーバーヘッドが少ないはずですが、実際の違いはどれくらいあるのでしょうか？
検証するために、シンプルなベンチマークツールを作りました。様々なサイズの配列に対して、両方のアプローチでJSX要素を生成する時間を計測しています。
検証結果
参考程度に私のマシン、Chrome135環境での検証結果です。
ユーザーが体感できるレベルでの差はなさそうです。
実際のアプリ開発では？
パフォーマンス面だけで見ればforループに軍配が上がりますが、実際のアプリ開発では他の要素も考慮する必要があります。
特別な理由がない限り公式ドキュメントでも案内されているmapを使うことをお勧めします。
for文と比較して、そのメリットを整理すると、
- コードが簡潔で読みやすい
- Reactの宣言的スタイルと一致している
- Reactのほとんどの開発者が慣れている書き方
- パフォーマンスの差は実用上無視できるレベル
まとめ
Reactでリストをレンダリングする際、mapメソッドは単なる習慣ではなく、宣言的な記述と相性が良いという合理的な理由で採用されています。わずかなパフォーマンスの差よりも、コードの簡潔さや保守性を優先すべきですね。