【React】スクロール位置に応じて処理をさせたい！これ実装してみて（遅延読み込み）

投稿者 投稿日:

※ 今回は「スクロール位置に応じて画像を取得するAPIを呼び出す」を例に紹介していきます


1. Intersection Observer API を使う方法

Intersection Observer APIを使うと、要素がビューポートに入ったときにイベントを発生させることができます
これを使って、画像が表示されるエリアに到達したときにAPIを呼び出すことが可能です

Intersection Observerのセットアップ

Intersection Observerを使って監視する要素を設定します

import React, { useEffect, useRef } from 'react';

const ImageComponent = ({ src, alt }) => {
  const imgRef = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          // APIを呼び出して画像を取得
          fetchImage();
          observer.unobserve(entry.target); // 一度観察対象から外す
        }
      },
      { threshold: 0.1 } // 画像が10%表示されたら発火
    );

    observer.observe(imgRef.current);

    return () => {
      observer.disconnect();
    };
  }, []);

  const fetchImage = () => {
    // ここにAPI呼び出しのロジックを記述
    console.log("Fetching image...");
  };

  return <img ref={imgRef} src={src} alt={alt} />;
};

export default ImageComponent;

画像コンポーネントの使用

上記のコンポーネントを使って、表示する画像リストを作成します

import React from 'react';
import ImageComponent from './ImageComponent';

const App = () => {
  const images = [
    { src: 'image1.jpg', alt: 'Image 1' },
    { src: 'image2.jpg', alt: 'Image 2' },
    // その他の画像
  ];

  return (
    <div>
      {images.map((img, index) => (
        <ImageComponent key={index} src={img.src} alt={img.alt} />
      ))}
    </div>
  );
};

export default App;

2. ライブラリを使用する方法

Reactには、スクロール位置に応じて要素をロードするための便利なライブラリもあります
その一つがreact-intersection-observerです

インストール

npm install react-intersection-observer

使用方法

react-intersection-observerを使って、画像が表示エリアに到達したときにAPIを呼び出します

import React from 'react';
import { useInView } from 'react-intersection-observer';

const ImageComponent = ({ src, alt }) => {
  const { ref, inView } = useInView({
    threshold: 0.1, // 画像が10%表示されたら発火
    triggerOnce: true // 一度だけトリガー
  });

  React.useEffect(() => {
    if (inView) {
      // APIを呼び出して画像を取得
      fetchImage();
    }
  }, [inView]);

  const fetchImage = () => {
    // ここにAPI呼び出しのロジックを記述
    console.log("Fetching image...");
  };

  return <img ref={ref} src={src} alt={alt} />;
};

export default ImageComponent;

ちょっと説明を

useInView フックの使用

  • 「ref」は監視するDOM要素に設定するためのものです
  • 「inView」はその要素がビューポートに表示されているかどうかを示すブール値です

要素の監視

  • 「ref」を画像のDOM要素に設定することで、その要素がビューポートに入るとinViewの値がtrueになります
  • 「threshold: 0.1」は要素が10%表示されたときにトリガーされることを意味します
  • 「triggerOnce: true」は一度トリガーされたら再度トリガーされないようにします

APIの呼び出し

  • useEffectフック内で「inView」の値が変わったときに実行される処理を記述します
  • 「inView」がtrueになったときにfetchImage関数が呼ばれ、API呼び出しが行われます

短時間に多くのAPIを呼び出すのではなく、必要なときにのみ呼び出すことができます
サーバーの負荷を下げることができるのですよね

是非ご参考に下さい！

是非フォローしてください

最新の情報をお伝えします

投稿者: Mon