Vue3で仮想スクロールを実装する方法｜ライブラリ比較・自作・最適化まで

npm install @tanstack/vue-virtual

<script setup lang="ts">
import { ref } from 'vue'
import { useVirtualizer } from '@tanstack/vue-virtual'

const items = Array.from({ length: 50000 }, (_, i) => ({
  id: i,
  label: `アイテム ${i + 1}`,
}))

const scrollContainerRef = ref<HTMLElement | null>(null)

const virtualizer = useVirtualizer({
  count: items.length,
  getScrollElement: () => scrollContainerRef.value,
  estimateSize: () => 40, // 各行の推定高さ（px）
  overscan: 5,
})
</script>

<template>
  <div
    ref="scrollContainerRef"
    style="height: 500px; overflow-y: auto;"
  >
    <div
      :style="{ height: `${virtualizer.getTotalSize()}px`, position: 'relative' }"
    >
      <div
        v-for="row in virtualizer.getVirtualItems()"
        :key="row.key"
        :style="{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: `${row.size}px`,
          transform: `translateY(${row.start}px)`,
        }"
      >
        {{ items[row.index].label }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useVirtualizer } from '@tanstack/vue-virtual'

interface Message {
  id: number
  text: string
}

const messages = ref<Message[]>(
  Array.from({ length: 10000 }, (_, i) => ({
    id: i,
    text: `メッセージ ${i + 1}：${'あ'.repeat(Math.floor(Math.random() * 200) + 10)}`,
  }))
)

const scrollContainerRef = ref<HTMLElement | null>(null)

const virtualizer = useVirtualizer({
  count: messages.value.length,
  getScrollElement: () => scrollContainerRef.value,
  estimateSize: () => 60,
  overscan: 8,
})
</script>

<template>
  <div ref="scrollContainerRef" style="height: 600px; overflow-y: auto;">
    <div :style="{ height: `${virtualizer.getTotalSize()}px`, position: 'relative' }">
      <div
        v-for="row in virtualizer.getVirtualItems()"
        :key="row.key"
        :ref="(el) => { if (el) virtualizer.measureElement(el as HTMLElement) }"
        :data-index="row.index"
        :style="{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          transform: `translateY(${row.start}px)`,
        }"
      >
        <div style="padding: 8px 12px; border-bottom: 1px solid #eee;">
          {{ messages[row.index].text }}
        </div>
      </div>
    </div>
  </div>
</template>

npm install virtua

<script setup lang="ts">
import { VList } from 'virtua/vue'

const items = Array.from({ length: 100000 }, (_, i) => `項目 ${i + 1}`)
</script>

<template>
  <VList :data="items" style="height: 500px;">
    <template #default="{ item, index }">
      <div style="padding: 8px 16px; border-bottom: 1px solid #f0f0f0;">
        {{ item }}
      </div>
    </template>
  </VList>
</template>

npm install vue-virtual-scroller

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

const app = createApp(App)

// グローバル登録
import VueVirtualScroller from 'vue-virtual-scroller'
app.use(VueVirtualScroller)

app.mount('#app')

<script setup lang="ts">
const items = Array.from({ length: 30000 }, (_, i) => ({
  id: i,
  name: `ユーザー ${i + 1}`,
}))
</script>

<template>
  <RecycleScroller
    class="scroller"
    :items="items"
    :item-size="48"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="user-row">
      {{ item.name }}
    </div>
  </RecycleScroller>
</template>

<style scoped>
.scroller {
  height: 500px;
}
.user-row {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #eee;
}
</style>

<script setup lang="ts">
interface ChatMessage {
  id: number
  body: string
}

const messages: ChatMessage[] = Array.from({ length: 5000 }, (_, i) => ({
  id: i,
  body: `投稿 ${i + 1}：${'テスト'.repeat(Math.floor(Math.random() * 30) + 1)}`,
}))
</script>

<template>
  <DynamicScroller
    :items="messages"
    :min-item-size="40"
    key-field="id"
    class="scroller"
  >
    <template v-slot="{ item, index, active }">
      <DynamicScrollerItem
        :item="item"
        :active="active"
        :data-index="index"
      >
        <div class="message-card">
          {{ item.body }}
        </div>
      </DynamicScrollerItem>
    </template>
  </DynamicScroller>
</template>

<style scoped>
.scroller {
  height: 600px;
}
.message-card {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}
</style>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'

// --- Composable ---
function useVirtualScroll<T>(
  allItems: T[],
  itemHeight: number,
  containerHeight: number,
  overscan = 3
) {
  const scrollTop = ref(0)
  const containerRef = ref<HTMLElement | null>(null)

  const totalHeight = computed(() => allItems.length * itemHeight)

  const startIndex = computed(() =>
    Math.max(0, Math.floor(scrollTop.value / itemHeight) - overscan)
  )

  const endIndex = computed(() =>
    Math.min(
      allItems.length,
      Math.ceil((scrollTop.value + containerHeight) / itemHeight) + overscan
    )
  )

  const visibleItems = computed(() =>
    allItems.slice(startIndex.value, endIndex.value).map((data, i) => ({
      data,
      index: startIndex.value + i,
      offsetY: (startIndex.value + i) * itemHeight,
    }))
  )

  function handleScroll() {
    if (containerRef.value) {
      scrollTop.value = containerRef.value.scrollTop
    }
  }

  onMounted(() => {
    containerRef.value?.addEventListener('scroll', handleScroll, { passive: true })
  })

  onUnmounted(() => {
    containerRef.value?.removeEventListener('scroll', handleScroll)
  })

  return { containerRef, totalHeight, visibleItems }
}

// --- 使用例 ---
const data = Array.from({ length: 100000 }, (_, i) => `行 ${i + 1}`)
const ROW_HEIGHT = 36
const CONTAINER_HEIGHT = 500

const { containerRef, totalHeight, visibleItems } = useVirtualScroll(
  data,
  ROW_HEIGHT,
  CONTAINER_HEIGHT
)
</script>

<template>
  <div
    ref="containerRef"
    :style="{ height: `${CONTAINER_HEIGHT}px`, overflowY: 'auto' }"
  >
    <div :style="{ height: `${totalHeight}px`, position: 'relative' }">
      <div
        v-for="entry in visibleItems"
        :key="entry.index"
        :style="{
          position: 'absolute',
          top: `${entry.offsetY}px`,
          left: 0,
          right: 0,
          height: `${ROW_HEIGHT}px`,
          lineHeight: `${ROW_HEIGHT}px`,
          padding: '0 12px',
          borderBottom: '1px solid #f0f0f0',
        }"
      >
        {{ entry.data }}
      </div>
    </div>
  </div>
</template>

let rafId: number | null = null

function onScroll() {
  if (rafId !== null) return
  rafId = requestAnimationFrame(() => {
    // スクロール位置を更新
    scrollTop.value = containerRef.value?.scrollTop ?? 0
    rafId = null
  })
}

.virtual-container {
  contain: strict;
  overflow-y: auto;
}

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useVirtualizer } from '@tanstack/vue-virtual'

const items = ref<string[]>([])
const isLoading = ref(false)
const page = ref(1)
const sentinelRef = ref<HTMLElement | null>(null)
const scrollContainerRef = ref<HTMLElement | null>(null)

async function loadMore() {
  if (isLoading.value) return
  isLoading.value = true
  // API から追加データを取得する想定
  const newItems = Array.from(
    { length: 50 },
    (_, i) => `ページ${page.value} - 項目${i + 1}`
  )
  items.value = [...items.value, ...newItems]
  page.value++
  isLoading.value = false
}

const virtualizer = useVirtualizer({
  get count() { return items.value.length },
  getScrollElement: () => scrollContainerRef.value,
  estimateSize: () => 40,
  overscan: 5,
})

onMounted(() => {
  loadMore()

  const observer = new IntersectionObserver(
    (entries) => {
      if (entries[0].isIntersecting) loadMore()
    },
    { root: scrollContainerRef.value, rootMargin: '200px' }
  )

  if (sentinelRef.value) observer.observe(sentinelRef.value)
})
</script>

<div role="list" aria-label="検索結果一覧" aria-rowcount="10000">
  <div
    v-for="row in virtualizer.getVirtualItems()"
    :key="row.key"
    role="listitem"
    :aria-rowindex="row.index + 1"
  >
    <!-- 行の内容 -->
  </div>
</div>