bvaughn/react-virtualized

これは何？

主な機能

• 01表示範囲内のセルだけを描画する、仮想化対応のList、Grid、Table、Masonryコンポーネント。
• 02サイズが動的に変化するセルを計測するCellMeasurer。
• 03スクロールに応じてデータを読み込むInfiniteLoader。
• 04複数のスクロール領域の位置を同期するScrollSync。
• 05scrollElement propによるウィンドウスクロールへの対応。
• 06TypeScriptの型定義を含む、tree-shaking可能なESおよびCommonJSビルド。

ユースケース

• React製の管理ダッシュボードで、数千行のテーブルを表示する。
• ヘッダーや列を固定した、スプレッドシート風のグリッドを構築する。
• ページ単位で読み込む、無限スクロール対応のフィードやリストを作成する。
• チャットメッセージやログなど、項目ごとに高さが異なる長いリストを表示する。

クイックスタート

1. 1

   npm で react-virtualized をインストールする

   npm install react-virtualized --save

使う前に知っておきたいこと

• !README では、新しいプロジェクト向けのより軽量な代替手段として react-window が推奨されています。
• !Peer dependencies の react と react-dom は、プロジェクトにインストールする必要があります。

トピック

よくある質問

react-virtualized とは？

表示範囲内の行やセルだけを描画し、大規模なリストや表データを効率よく表示するReactコンポーネント群。 react-virtualizedは、すべての項目を一度に描画せずに、大規模なリスト、グリッド、テーブルを表示するためのReactコンポーネント群です。List、Grid、Table、Masonryなどのコンポーネントは、現在のビューポート内にあるセルだけをマウントするため、データセットが大きくても高速に描画できます。

react-virtualized は無料で使えますか？ライセンスは？

react-virtualized は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

react-virtualized は今もメンテナンスされていますか？

活発にメンテナンス中。react-virtualized の最終コミットは 2026年10月19日 です。

react-virtualized は何に使えますか？

React製の管理ダッシュボードで、数千行のテーブルを表示する。 ヘッダーや列を固定した、スプレッドシート風のグリッドを構築する。 ページ単位で読み込む、無限スクロール対応のフィードやリストを作成する。 チャットメッセージやログなど、項目ごとに高さが異なる長いリストを表示する。

react-virtualized のインストール方法は？

npm で react-virtualized をインストールする: npm install react-virtualized --save

react-virtualized はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/bvaughn/react-virtualized