1. 大量データのリスト表示で起こる問題

Reactでリストを表示するとき、配列の中身をすべて画面に並べることができます。

しかし、データが数百や数千になると、一度に描画される要素が増え、画面の動きがとても重くなります。

スクロールがカクカクしたり、ボタンの反応が遅くなったりするのは、このためです。

2. 仮想化リストとは何か

仮想化リストとは、画面に見えている分だけを表示する仕組みです。

たとえば、長い名簿を机の上にすべて広げるのではなく、今見ているページだけを開いている状態を想像してください。

画面に表示されていない部分は作らないため、パソコンへの負担が大きく減ります。

3. 通常のリスト表示の例

まずは、よくあるリスト表示の書き方を確認します。


function App() {
  const items = Array.from({ length: 1000 }, (_, i) => `アイテム${i}`);

  return (
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

（1000件のアイテムがすべて画面に表示されます）

この方法は分かりやすいですが、データが増えるほど表示が重くなります。

4. 仮想化リストの基本的な考え方

仮想化リストでは、実際に画面に見えている項目だけを作ります。

スクロールすると、見えなくなった項目を消し、新しく見える項目を追加します。

この切り替えを自動で行うことで、たくさんのデータでも軽い表示を保つことができます。

5. 仮想化リストの簡単なイメージ例

ここでは考え方を分かりやすくするため、表示する件数を制限した例を見てみます。


function App() {
  const items = Array.from({ length: 1000 }, (_, i) => `データ${i}`);
  const visibleItems = items.slice(0, 20);

  return (
    <ul>
      {visibleItems.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

（最初の20件だけが表示されます）

実際の仮想化では、スクロールに合わせてこの範囲を動かしていきます。

6. 専用ライブラリを使う理由

スクロール位置を自分で計算するのはとても大変です。

そのため、仮想化リスト専用のライブラリを使うと、少ないコードで実現できます。

Reactでは、大量データ表示のためによく使われるライブラリがあります。

7. 仮想化リストのシンプルな構造例

以下は、仮想化の考え方を意識したシンプルな構造例です。


function Row({ index }) {
  return <div>行番号 {index}</div>;
}

function App() {
  const rows = Array.from({ length: 1000 });

  return (
    <div>
      {rows.slice(0, 30).map((_, index) => (
        <Row key={index} index={index} />
      ))}
    </div>
  );
}

（表示される行数を制限して描画します）