Zenn
🚀

【React-Virtuoso】動的サイズにも超簡単対応！大量リストデータを爆速表示

2024/10/14に公開
React
無限スクロール
virtuoso
tech

はじめに

Webアプリケーションで大量のリストデータを表示する場合、パフォーマンスが大きく影響を受けることがあります。
ページ読み込み速度が遅くなったり、スクロールがカクカクしたりと、ユーザー体験を損なう可能性があります。
この記事では、Reactで無限スクロールを実現するための強力なライブラリ、React-Virtuosoについて紹介します。

大量リストデータ表示の課題

  • ページ読み込みの遅延: 大量のDOM要素を一度にレンダリングするため、ページの読み込みが遅くなる。
  • スクロールのパフォーマンス低下: 多数のDOM要素が存在するため、スクロールが重くなり、カクカクとした動きになる。

無限スクロールとは

無限スクロールは、これらの問題を解決するための一般的な手法です。これは、ユーザーがスクロールするときに、必要なデータだけを動的に読み込んで表示することで、パフォーマンスを向上させます。

React-Virtuosoとは

React-Virtuosoは、Reactで無限スクロールを実現するための、高性能で使いやすいライブラリです。 動的なアイテムサイズにも対応しており、複雑なレイアウトでもスムーズなスクロールを実現できます。

前提条件

  • Reactの環境を構築済み
  • Virtuosoコンポーネント以外の説明は省略

React-Virtuosoの使い方

今回は基本的なVirtuosoコンポーネントのみを紹介します。
他にもグルーピングやテーブル、MUIListとの連携などありますので、詳細はDocsをご覧ください。

インストール方法

まず、React-Virtuosoをプロジェクトにインストールします。

npm install react-virtuoso

または

yarn add react-virtuoso

無限スクロールの実装

基本的な無限スクロールを実装するには、Virtuoso コンポーネントを使用します。

import { Virtuoso } from "react-virtuoso";

const items = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);

function App() {
  return (
    <Virtuoso
      style={{ height: "400px", border: "solid 1px red" }}
      totalCount={items.length}
      itemContent={(index) => <div>{items[index]}</div>}
    />
  );
}

export default App;

ポイント:

  • <Virtuoso> コンポーネントに style で高さを指定し、表示領域を制限します。
  • totalCount プロパティにアイテムの総数を渡します。
  • itemContent プロパティで各アイテムのレンダリング内容を定義します。

動的サイズへの対応

アイテムの高さが動的な場合でも、React-Virtuosoは自動でサイズを計測して適切にレンダリングします。

import { Virtuoso } from "react-virtuoso";

const items = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);

function App() {
  return (
    <Virtuoso
      style={{ height: "400px", border: "solid 1px red" }}
      totalCount={items.length}
      itemContent={(index) => (
        <div style={{ height: `${(index % 4) * 50 + 50}px` }}>
          {items[index]}
        </div>
      )}
    />
  );
}

export default App;

ポイント:

  • 各アイテムに50px/100px/150px/200pxの高さを適用し、高さを動的に変更しています。
  • React-Virtuosoは高さを自動計測し、スクロール位置を正しく維持します。

他のライブラリとの比較

他にも有名なライブラリでReact-WindowとReact-Virtualizedがあります。
それらとの比較を以下にまとめました。

各ライブラリの比較表

項目 React-Virtuoso React-Window React-Virtualized
初回リリース日 2019/05/04 2014/11/24 2015/11/27
GitHub Stars 5.2k 15.8k 26.3k
npm週間ダウンロード数 724k 2M 911k
動的サイズ対応 ✅ △（追加実装必要） △（追加実装必要）
サイズ 260kB 896kB 2.2MB
TypeScript対応 ✅ ✅ ✅
最終更新日 2024/10/14 2023/11/22 2023/04/18
ライセンス MIT MIT MIT

※ 数値は2024年10月14日時点のものです。

コード比較

React-Virtuoso

import { Virtuoso } from 'react-virtuoso'

function VirtuosoExample({ items }) {
  return (
    <Virtuoso
      style={{ height: '400px' }}
      data={items}
      itemContent={(index, item) => (
        <div>{item.name}</div>
      )}
    />
  )
}

React-Window

import { FixedSizeList as List } from 'react-window'

function WindowExample({ items }) {
  return (
    <List
      height={400}
      itemCount={items.length}
      itemSize={35}
      width={300}
    >
      {({ index, style }) => (
        <div style={style}>{items[index].name}</div>
      )}
    </List>
  )
}

React-Virtualized

import { List } from 'react-virtualized'

function VirtualizedExample({ items }) {
  return (
    <List
      width={300}
      height={400}
      rowCount={items.length}
      rowHeight={35}
      rowRenderer={({ index, key, style }) => (
        <div key={key} style={style}>
          {items[index].name}
        </div>
      )}
    />
  )
}

React-Windowとの比較

React-Windowは軽量で高速ですが、固定高さのアイテムに適しています。アイテムの高さが動的な場合、追加の実装が必要になります。一方、React-Virtuosoはデフォルトで動的高さに対応しており、実装が簡単です。

React-Virtualizedとの比較

React-Virtualizedは豊富な機能を持ちますが、APIが複雑で学習コストが高い傾向にあります。React-VirtuosoはシンプルなAPI設計で、初心者でも扱いやすいのが魅力です。

まとめ

React-Virtuosoを使用すれば、大量のリストデータもパフォーマンスを維持しながら簡単に無限スクロールを実装できます。
また動的なアイテムサイズにも簡単に対応できます。
🚀 パフォーマンスを改善したい
✨ スムーズなスクロール体験を提供したい
😊 開発効率を上げたい
そんな方は、ぜひReact-Virtuosoを導入してみてください！

参考資料

GitHubで編集を提案

Discussion