Vue 3でのバーチャルスクロールを実装して大量のデータを効率的に表示

作成日 2025.02.27
Vue.js
Vue.js

バーチャルスクロールは大量のデータをスムーズに表示するためのテクニックです。Vue 3では、この仕組みを簡単に取り入れることができ、表示される範囲だけを効率的にレンダリングすることで、ブラウザへの負荷を軽減します。

1. バーチャルスクロールとは何か
2. プロジェクトのセットアップ
3. 必要なデータの準備
4. バーチャルスクロール用コンポーネントの作成
5. スタイルの設定
6. 可視範囲の計算
7. 仮想リストの調整
8. パフォーマンスの最適化
9. エラーハンドリング
10. Vue Routerとの統合
11. SSRとの互換性
12. まとめ

バーチャルスクロールとは何か

通常、大量のデータをリストで表示するとパフォーマンスが低下します。しかし、バーチャルスクロールでは、実際に見えている範囲のデータのみを描画し、それ以外の部分は非表示にすることでパフォーマンスを大幅に向上させます。

プロジェクトのセットアップ

まずは新しいVue 3プロジェクトをセットアップし、必要なライブラリをインストールします。

npm init vue@latest
npm install

必要なデータの準備

仮想リストで表示するためのデータセットを用意します。

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

バーチャルスクロール用コンポーネントの作成

スクロールイベントを活用して、可視範囲内のアイテムだけを表示するコンポーネントを作成します。

<template>
  <div class="scroll-container" @scroll="onScroll">
    <div class="spacer" :style="{ height: spacerHeight + 'px' }"></div>
    <div
      v-for="item in visibleItems"
      :key="item.index"
      class="item">
      {{ item.value }}
    </div>
  </div>
</template>

スタイルの設定

スクロール領域のサイズや見た目を調整して、スムーズなスクロール体験を提供します。

.scroll-container {
  height: 400px;
  overflow-y: auto;
  position: relative;
}
.spacer {
  position: absolute;
  width: 100%;
}
.item {
  height: 50px;
}

可視範囲の計算

スクロール位置に基づいて表示するデータを動的に切り替えます。

setup() {
  const visibleItems = ref([]);
  const spacerHeight = ref(0);

  const onScroll = (event) => {
    const scrollTop = event.target.scrollTop;
    const startIndex = Math.floor(scrollTop / 50);
    visibleItems.value = items.slice(startIndex, startIndex + 10);
    spacerHeight.value = items.length * 50;
  };

  return { visibleItems, spacerHeight, onScroll };
}