【Vue.js】無限スクロールを実装する方法｜Intersection Observerの活用

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'

const LIMIT = 10
const posts = ref([])
const page = ref(1)
const isLoading = ref(false)
const hasMore = ref(true)
const error = ref('')
const trigger = ref(null)
let observer = null

async function loadMore() {
  if (isLoading.value || !hasMore.value) return
  isLoading.value = true
  error.value = ''
  try {
    const res = await fetch(
      `https://jsonplaceholder.typicode.com/posts?_limit=${LIMIT}&_page=${page.value}`
    )
    if (!res.ok) throw new Error(`HTTP ${res.status}`)
    const data = await res.json()

    posts.value.push(...data)
    page.value++
    // 1ページ分に満たなければ、これが最後
    if (data.length < LIMIT) hasMore.value = false
  } catch (e) {
    error.value = '読み込みに失敗しました。'
  } finally {
    isLoading.value = false
  }

  // 読み込み後も監視要素が画面内に残っている場合に備えて、再判定させる
  if (hasMore.value && !error.value && observer && trigger.value) {
    await nextTick()
    observer.unobserve(trigger.value)
    observer.observe(trigger.value)
  }
}

onMounted(() => {
  observer = new IntersectionObserver(
    (entries) => {
      if (entries[0].isIntersecting) loadMore()
    },
    { rootMargin: '200px' } // 末尾の200px手前で先読みする
  )
  observer.observe(trigger.value)
})

onBeforeUnmount(() => {
  observer?.disconnect()
})
</script>

<template>
  <div class="post-list">
    <div v-for="post in posts" :key="post.id" class="post-item">
      {{ post.id }}. {{ post.title }}
    </div>

    <!-- 監視用の要素。常に末尾に置く -->
    <div ref="trigger" class="load-trigger">
      <p v-if="isLoading">読み込み中...</p>
      <p v-else-if="error">
        {{ error }}
        <button type="button" @click="loadMore">再試行</button>
      </p>
      <p v-else-if="!hasMore">すべて読み込みました</p>
    </div>
  </div>
</template>

<style scoped>
.post-list { max-width: 600px; margin: 0 auto; }
.post-item { padding: 16px; border-bottom: 1px solid #ccc; }
.load-trigger { min-height: 40px; padding: 16px; text-align: center; color: #888; }
</style>

// useInfiniteScroll.js
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'

export function useInfiniteScroll(callback, options = {}) {
  const target = ref(null)
  let observer = null

  onMounted(() => {
    observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) callback()
    }, { rootMargin: '200px', ...options })
    observer.observe(target.value)
  })

  onBeforeUnmount(() => observer?.disconnect())

  // 読み込み後に呼ぶと、画面内に残っていても再判定される
  async function recheck() {
    if (!observer || !target.value) return
    await nextTick()
    observer.unobserve(target.value)
    observer.observe(target.value)
  }

  return { target, recheck }
}

<!-- スクロール領域が window ではなく、特定の要素のとき -->
<div ref="scroller" class="scroller">
  ...
  <div ref="trigger"></div>
</div>

<script setup>
// root に、スクロールする側の要素を渡す
observer = new IntersectionObserver(callback, {
  root: scroller.value,
  rootMargin: '200px'
})
</script>