先生と生徒の会話形式で理解しよう

生徒

「Reactで画面を下にスクロールしたら自動でデータが追加される仕組みを作りたいんですけどできますか？」

先生

「それは無限スクロールという仕組みですね。カスタムフックを使えばシンプルに実装できますよ。」

生徒

「無限スクロールって聞いたことはあるんですけど、どういう動きをするんですか？」

先生

「例えばSNSやECサイトで下まで見たら自動で次の投稿や商品が読み込まれる仕組みが無限スクロールです。Reactで作り方を見ていきましょう！」

1. 無限スクロールとは？初心者向けに説明

無限スクロールとは、ページの一番下までスクロールすると自動的に新しいデータを読み込む仕組みのことです。例えばInstagramやTwitterで、画面を下に動かすだけで次の投稿が表示されるのが無限スクロールです。

ボタンを押して「次のページ」を読み込むより自然で使いやすいため、多くのWebアプリやReactアプリで利用されています。

2. Reactで無限スクロールを実装するメリット

Reactで無限スクロールを実装すると以下のメリットがあります。

ユーザーが操作しなくても次のデータが自動で表示される
ページ遷移が不要で快適にコンテンツを閲覧できる
APIとの連携で動的なデータ取得が可能になる

特に商品一覧や記事一覧など、データが多い画面では無限スクロールを使うとユーザー体験が向上します。

3. カスタムフックで無限スクロールを作る仕組み

無限スクロールの基本は「ユーザーが画面の下に到達したらAPIを呼び出して次のデータを取得する」ことです。これを実現するためにIntersectionObserverという仕組みを使うと便利です。


import { useState, useEffect, useRef } from "react";

function useInfiniteScroll(fetchData) {
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(1);
  const loaderRef = useRef(null);

  useEffect(() => {
    fetchData(page).then(newItems => {
      setItems(prev => [...prev, ...newItems]);
    });
  }, [page]);

  useEffect(() => {
    const observer = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting) {
        setPage(prev => prev + 1);
      }
    });
    if (loaderRef.current) {
      observer.observe(loaderRef.current);
    }
    return () => observer.disconnect();
  }, []);

  return { items, loaderRef };
}

export default useInfiniteScroll;

（このカスタムフックを使うと、スクロールが下に到達したときに自動で新しいデータを読み込めます）

4. 無限スクロールを使ったReactコンポーネント例

次に作ったフックを実際のコンポーネントで使ってみましょう。ここではサンプルAPIからデータを取得し、画面を下にスクロールすると新しい投稿が追加表示されます。


import React from "react";
import useInfiniteScroll from "./useInfiniteScroll";

function Posts() {
  const fetchData = async (page) => {
    const res = await fetch(
      `https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=5`
    );
    return await res.json();
  };

  const { items, loaderRef } = useInfiniteScroll(fetchData);

  return (
    <div>
      {items.map(post => (
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </div>
      ))}
      <div ref={loaderRef}>読み込み中...</div>
    </div>
  );
}

export default Posts;

（画面をスクロールすると新しい投稿が自動で追加されて表示されます）