Vue.jsとIntersectionObserverで作る無限スクロール

<script setup>
import axios from 'axios';
import { onMounted, ref, useTemplateRef, nextTick } from 'vue';

const BATCH_SIZE = 10;
const posts = ref([]);
const isLoading = ref(false);
const hasMore = ref(true);
const list = useTemplateRef("ref-list"); // useTemplateRefでテンプレート内のDOM要素を取得
let observer = null;

const fetchPosts = async () => {
  if (isLoading.value || !hasMore.value) return; // isLoadingを含めることで重複リクエストを防止

  isLoading.value = true;

  // 初回以外の場合に遅延を設定
  if (posts.value.length > 0) {
    await new Promise(resolve => setTimeout(resolve, 500));
  }

  try {
    const response = await axios.get('https://vool.jp/wp-json/wp/v2/posts', {
      params: {
        offset: posts.value.length, // 既に取得済みのデータ数から開始
        per_page: BATCH_SIZE, // 1回のリクエストで返すレコードの数を指定
      },
    });

    if (response.data.length === 0) {
      hasMore.value = false;

      // 既存のオブザーバーを切断
      observer?.disconnect();
    } else {
      // 新しく取得したデータを追加
      posts.value = [...posts.value, ...response.data];

      // データ取得/追加後、DOM更新を待ってからobserveLastItem()を実行
      await nextTick();
      observeLastItem();
    }
  } catch (error) {
    console.error('データの取得中にエラーが発生しました:', error.message);
  } finally {
    isLoading.value = false;
  }
};

const observeLastItem = () => {
  // 既存のオブザーバーを切断
  observer?.disconnect();

  // 新しいオブザーバーを作成
  observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          fetchPosts();
        }
      });
    },
    {
      root: null,
      rootMargin: "0px 0px 0px 0px", // ビューポートの下端を基準
      threshold: 1 // 対象の要素の最下部を基準
    }
  );

  // リスト内の最後の子要素を監視
  const lastItem = list.value.lastElementChild;
  if (lastItem) {
    observer.observe(lastItem);
  }
};

onMounted(() => {
  fetchPosts();
});
</script>

<template>
  <div class="l-inner">
    <ul ref="ref-list" class="list">
      <TransitionGroup name="fade">
        <li v-for="post in posts" :key="post.id" class="item">
          <a :href="post.link" class="link" target="_blank" rel="noopener noreferrer">
            <p>ID：{{ post.id }}</p>
            <p>スラッグ：{{ post.slug }}</p>
            <p>タイトル：{{ post.title.rendered }}</p>
            <p v-html="post.excerpt.rendered"></p>
          </a>
        </li>
      </TransitionGroup>
    </ul>
    <div v-if="isLoading">
      <span class="loader"></span>
    </div>
  </div>
</template>

<style scoped>
.fade-enter-from {
  opacity: 0;
}

.fade-enter-active {
  transition: opacity 0.75s ease;
}

.fade-enter-to {
  opacity: 1;
}
</style>

<script setup>
  const response = await axios.get('https://vool.jp/wp-json/wp/v2/posts', {
    params: {
      offset: posts.value.length, // 既に取得済みのデータ数から開始
      per_page: BATCH_SIZE, // 1回のリクエストで返すレコードの数を指定
    },
  });
</script>

<script setup>
  // 新しく取得したデータを追加
  posts.value = [...posts.value, ...response.data];

  // データ取得/追加後、DOM更新を待ってからobserveLastItem()を実行
  await nextTick();
  observeLastItem();
</script>

<script setup>
  const list = useTemplateRef("ref-list");
</script>

<template>
  <div class="l-inner">
    <ul ref="ref-list" class="list">
    </ul>
  </div>
</template>

<template>
  <TransitionGroup name="fade">
    <li v-for="post in posts" :key="post.id" class="item">
      <a :href="post.link" class="link" target="_blank" rel="noopener noreferrer">
        <p>ID：{{ post.id }}</p>
        <p>スラッグ：{{ post.slug }}</p>
        <p>タイトル：{{ post.title.rendered }}</p>
        <p v-html="post.excerpt.rendered"></p>
      </a>
    </li>
  </TransitionGroup>
</template>

<style scoped>
  .fade-enter-from {
    opacity: 0;
  }

  .fade-enter-active {
    transition: opacity 0.75s ease;
  }

  .fade-enter-to {
    opacity: 1;
  }
</style>

<script setup>
  const isLoading = ref(false);

  const fetchPosts = async () => {
    isLoading.value = true;
    // 以下省略
  }
</script>

<template>
  <div v-if="isLoading">
    <span class="loader"></span>
  </div>
</template>