Reactで無限スクロールを実装

Webアプリケーションで多くのデータを表示する場合、ページングや無限スクロールを使って効率的にユーザーにデータを提供する方法があります。無限スクロールを使用すると、ユーザーがページの下部に達するたびに自動で新しいデータを読み込むことができ、スムーズな体験を提供します。

この記事では、Reactを使って無限スクロールを実装する方法を紹介します。主に使用するライブラリは、以下の2つです：

• react-infinite-scroller: 無限スクロールを実現するためのライブラリ
  • https://github.com/danbovey/react-infinite-scroller
• react-loading: データの読み込み中にローディングアニメーションを表示するためのライブラリ
  • https://github.com/MrXujiang/react-loading

実装方法

以下は、無限スクロールを実装するためのサンプルコードです。

必要なライブラリをインストール

まず、必要なライブラリをインストールします。

npm install react-infinite-scroller react-loading

‍

サンプルコード

次に、無限スクロールを実装するためのReactコンポーネントを作成します。このコンポーネントでは、データのリストを表示し、ページの下までスクロールすると次のデータを自動で読み込みます。

import React, { useState, useEffect } from 'react';
import InfiniteScroll from 'react-infinite-scroller';
import ReactLoading from 'react-loading';
import { getPageData } from './api'; // APIからデータを取得する関数

export const DataList = () => {
  const [items, setItems] = useState([]); // データリスト
  const [hasMore, setHasMore] = useState(true); // 追加データの有無
  const [page, setPage] = useState(1); // 現在のページ数

  const fetchData = async () => {
    try {
      const { data } = await getPageData(page);
      setItems((prevItems) => [...prevItems, ...data.items]);
      setHasMore(data.hasMore);
      setPage((prevPage) => prevPage + 1);
    } catch (error) {
      setHasMore(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <InfiniteScroll
      loadMore={loadMore}
      hasMore={hasMore}
      loader={
        <div style={{ margin: '0 auto' }} key={0}>
          <ReactLoading type="spokes" color="#ccc" height={30} width={30} />
        </div>
      }
    >
      {items.map((item: any, index: number) => (
        <div key={index}>{item.title}</div>
      ))}
    </InfiniteScroll>
  );
};

‍


サンプルコードの解説

1. 状態管理: useStateフックを使用して、現在のデータリスト、ページ番号、さらに読み込むデータがあるかどうかを管理します。
   • items: 表示するデータリスト
   • hasMore: まだデータが残っているかのフラグ
   • page: 現在のページ番号
2. データ取得関数: fetchData関数では、APIから次のページのデータを取得し、既存のデータリストに追加します。また、次のデータが存在するかを確認し、フラグを更新します。
3. 無限スクロールの実装: react-infinite-scrollerライブラリのInfiniteScrollコンポーネントを使用しています。loadMoreプロパティにデータ取得関数をセットし、hasMoreプロパティに次のデータがあるかどうかを指定します。
4. ローディングアニメーション: loaderプロパティに、react-loadingライブラリを使ったローディング中のアニメーションを設定しています。これにより、データのロード中にアニメーションが表示されます。

おわりに

無限スクロールは、ユーザーに途切れないデータの閲覧体験を提供するために非常に便利な機能です。react-infinite-scrollerとreact-loadingを使用することで、シンプルかつ効率的に実装することが可能です。APIの設計やデータの扱い方次第で、さらに柔軟なスクロール機能を追加できるので、ぜひプロジェクトに活用してみてください。

‍