問題一覧に戻る
上級パフォーマンス最適化
問題85: 仮想化

大量リストを効率的に表示する仮想化技術を学びます。仮想スクロールは表示されているアイテムと小さなバッファのみをレンダリングします。これにより数千のアイテムを持つリストのパフォーマンスが劇的に向上します。react-windowなどのライブラリがこのパターンを実装しますが、コア概念を理解することで任意の大規模データセットのレンダリングを最適化できます。

import React, { useState, useMemo } from 'react';

{/* 仮想リストコンポーネント */}
function VirtualList({ items, itemHeight = 50, height = 400 }) {
  const [scrollTop, setScrollTop] = useState(0);
  
  {/* 表示範囲を計算 */}
  const visibleRange = useMemo(() => {
    const start = Math.floor(scrollTop / );
    const end = Math.ceil((scrollTop + height) / itemHeight);
    return { start, end };
  }, [, height, itemHeight]);

  const handleScroll = (e) => {
    setScrollTop(e.target.scrollTop);
  };

  return (
    <div 
      style={{ height, overflow: 'auto' }}
      onScroll={handleScroll}
    >
      {/* コンテナの総高さ */}
      <div style={{ height: items.length *  }}>
        <div style={{ transform: `translateY(${visibleRange.start * itemHeight}px)` }}>
          {items.slice(visibleRange., visibleRange.).map((item, i) => (
            <div key={visibleRange.start + i} style={{ height: itemHeight }}>
              {item}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function App() {
  {/* 大規模データセットのシミュレーション */}
  const items = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);
  
  return <VirtualList items={items} />;
}

export default App;