【入門編】仮想リストによる大量データ描画の最適化 – React実践ガイド

こんにちは。フロントエンドの現場で日々コードと格闘しているチーフアーキテクトです。

Reactを学び始めて、「画面にたくさんのデータを表示したい！」とワクワクしながらリストを作ったことはありませんか？でも、データが100個、1000個と増えた瞬間、画面がカクついたり、ブラウザが重くなったりして「あれ、おかしいな？」と焦った経験、きっと一度はあるはずです。

今日は、そんな「大量データの描画で、ブラウザが悲鳴を上げる問題」を、魔法のように解決する「仮想リスト（Virtual List）」というテクニックについてお話しします。

—

まず、身近な例え話をしましょう。あなたは今、「1万冊の本が並ぶ巨大な図書館」の司書さんだと想像してください。

もし、お客さんに「全1万冊を一度に見せて！」と言われたらどうしますか？ 1万冊すべてを床に並べたら、図書館は足の踏み場もなくなり、酸欠で倒れてしまいますよね。これが、ブラウザで1万個のDOM（HTML要素）を一度に生成しようとした時に起きる「重さ」の正体です。

Reactは優秀ですが、「画面に見えていないものまで全部律儀に作ってしまう」という、ちょっとおせっかいな癖があります。これがメモリを食いつぶし、ブラウザの動きを鈍くする原因なんです。

そこで登場するのが「仮想リスト」という考え方です。

図書館の例で言うなら、「お客さんが今、立っている場所から見える範囲の本棚だけを出す」という工夫です。スクロールして上のほうへ行けば、下にあった本は一旦片付け、今見える場所の本だけを差し替える。これなら、常に手元には数冊分のスペースしか必要ありません。

プログラミングの世界では、この「見える部分だけを切り取る窓」のことを仮想化（Virtualization）と呼びます。

Reactの世界には、この面倒な処理を肩代わりしてくれる `react-window` という頼れるライブラリがあります。車輪の再発明をする必要はありません。まずは先人の知恵を借りましょう。

まずはインストールです。

npm install react-window

1000個のデータを持つリストを、たったこれだけのコードで爆速にできます。

import React from ‘react’;
import { FixedSizeList as List } from ‘react-window’;

// 1000個のアイテムがある想定のリストデータ
const items = Array.from({ length: 1000 }, (_, index) => `アイテム番号: ${index + 1}`);

const Row = ({ index, style }) => (
// style を受け取るのがポイント。これで「表示位置」を制御してくれます

{items[index]}

);

export default function App() {
return (

{Row}

);
}

`height` と `width`: これが「窓」のサイズです。このサイズからはみ出た部分は、DOMすら生成されません。
`style` の受け渡し: `react-window` は、どの位置にその要素を配置すべきかという「座標情報」を `style` として渡してくれます。これを使うことで、スクロールしても常に正しい位置にアイテムが表示される仕組みです。
DOMの節約: 1000個データがあっても、実際に画面に並ぶDOMは10個〜15個程度。ブラウザは「たったこれだけ作ればいいのね！」と余裕の表情になります。

—

ここまで読んで「よし、全部仮想リストにしよう！」と思ったあなた、ちょっと待ってください。

実は、仮想リストは「万能薬」ではありません。

高さがバラバラなリストには注意: 今回の `FixedSizeList` は「全員同じ高さ」が前提です。もし高さがバラバラなら、計算が少し複雑な `VariableSizeList` を使う必要があります。
デザインとの兼ね合い: 非常に凝ったレイアウトのリストだと、仮想化することでスタイルが崩れたり、スクロールバーの挙動が少し変わったりすることがあります。

「とりあえず何でも仮想化」ではなく、「DOMが数百個を超えて、画面がモタつき始めたら導入を検討する」くらいが、エンジニアとしての適度な距離感です。

—

Reactを始めたばかりの頃は、「なぜこんなに複雑な仕組みが必要なんだろう？」と迷うことも多いと思います。でも大丈夫。最初からすべてを理解している人なんていません。

「画面に見えているものだけ描けばいい」という、シンプルだけど強力な知恵。この「仮想リスト」の考え方は、Reactだけでなく、どんな開発の現場でも役に立つ大切なマインドセットです。

まずは小さく、リストの描画から最適化を楽しんでみてください。あなたが書いたコードで、ユーザーの体験がスッと軽くなる瞬間。それこそが、フロントエンドエンジニアにとって最高の醍醐味ですよ！

何か分からないことがあれば、いつでもまた聞きに来てくださいね。応援しています！