66万セル級の巨大データ表を動かす：TanStack Virtualによる超高性能UI実装の全貌
本記事は、サプライチェーン計画における在庫計画画面のリニューアル事例を通じて、大規模なデータ描画におけるフロントエンドの課題と解決策を詳細に解説しています。開発チームは、商品ごとのカード内に、最大100の拠点と9種類の指標を組み合わせた、合計約66万セルに及ぶ巨大なデータ表を実装する必要に迫られました。この規模のデータを通常のDOM描画で処理すると、ブラウザが処理しきれないほどの負荷がかかり、動作が極端に重くなるという問題が発生しました。
この課題を解決するため、ライブラリ「TanStack Virtual」を用いた仮想化（Virtualization）技術を導入しました。仮想化とは、画面に実際に表示されている範囲の要素のみをDOMとして描画し、それ以外の要素はメモリ上で管理する手法です。本実装では、縦方向（ページスクロール基準）と横方向（カード内のスクロール基準）の両方で仮想化を適用しました。これにより、単にDOMの数を減らすだけでなく、スクロールが発生するたびに再計算されるデータ量（計算負荷）を劇的に削減することに成功しました。
しかし、実装過程では複数の技術的な難関に直面しました。一つ目は、`position: sticky`（固定配置）と仮想化の組み合わせによるレイアウト崩れです。固定要素の高さを計測し、ReactのStateに格納する過程で、`ResizeObserver`とReactの再描画が引き起こす無限ループ（無限の再計算）に陥りました。これを解決するため、Stateを経由せず、CSS変数に直接値を書き込むことでループを断ち切りました。二つ目は、仮想化がDOMの描画負荷を減らすだけで、メモリ上のデータ量（オブジェクトの個数）は減らさないという点です。このため、大量のデータをJavaScriptのオブジェクトではなく、`Float64Array`などの型付き配列に畳み込むことで、ガベージコレクション（GC）の負荷を大幅に軽減し、安定した動作を実現しました。最終的に、この技術的アプローチにより、66万セルという超大規模な表をスムーズに動作させることに成功しました。
背景
本ニュースは、エンタープライズシステムにおける大規模データ可視化の課題を扱っています。サプライチェーンや在庫管理など、膨大なデータポイント（拠点×指標×期間）を扱う業務システムでは、数万〜数十万セルに及ぶ表の描画が必須です。しかし、従来のWeb技術では、これほどのデータ量をブラウザのDOMとして保持・描画しようとすると、パフォーマンスが著しく低下するという技術的な壁が存在します。
重要用語解説
- TanStack Virtual: React向けの仮想化ライブラリ。画面に表示される範囲の要素のみをDOMとして描画し、それ以外をメモリ管理することで、描画負荷を劇的に軽減する技術。
- 仮想化 (Virtualization): 大量のリストや表などの要素を扱う際に、実際に画面に表示されている部分だけをレンダリングする手法。DOMの数を抑え、パフォーマンスを維持する。
- position: sticky: CSSのプロパティの一つで、要素をスクロールコンテナ内の一部の位置に固定する機能。仮想化と組み合わせる際、スクロールの基準点（親要素）が変わり、レイアウト計算が複雑になる原因となる。
今後の影響
本事例は、大規模データ処理が求められるあらゆるWebアプリケーション（金融、製造、医療など）のフロントエンド開発における標準的な解決策となり得ます。単に描画速度を上げるだけでなく、メモリ管理やレイアウト計算のロジックを深く理解する必要があることを示しており、今後のWeb開発の高度化を促す指針となります。