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

生徒

「Reactで最新のデータを常に取得したいんですが、どうすればいいですか？」

先生

「それならポーリングを使う方法があります。一定の間隔でAPIを呼び出して、データを更新する仕組みです。」

生徒

「ポーリングって難しそうですね。Reactで簡単にできますか？」

先生

「カスタムフックを作ればシンプルに書けますよ。では、実際にコードを見ながら仕組みを理解していきましょう。」

1. ポーリングとは？初心者向けの解説

ポーリングとは、一定の間隔ごとにサーバーにリクエストを送ってデータを更新する仕組みのことです。例えば「毎秒ごとに新しいメールが届いているか確認する」といった使い方ができます。

リアルタイム性が重要なアプリ、例えばチャットや株価の更新、センサーのデータ取得などに役立ちます。初心者の方は「定期的にリロードして最新の情報を取りに行く」イメージを持つと理解しやすいでしょう。

2. Reactでポーリングを実装するメリット

Reactアプリでポーリングを実装すると、ユーザーがリロードしなくても自動で最新のデータが表示されます。これによりユーザー体験が向上します。

さらに、カスタムフックにまとめることで複数のコンポーネントで簡単に再利用でき、コードの見通しも良くなります。

3. カスタムフックでポーリングを作る基本

ポーリングの仕組みは、JavaScriptのsetIntervalを使って定期的にAPIを呼び出します。ReactではuseEffectを組み合わせて書き、カスタムフックにまとめます。


import { useState, useEffect } from "react";

function usePollingAPI(url, interval = 5000) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let timer;
    const fetchData = async () => {
      try {
        const res = await fetch(url);
        const json = await res.json();
        setData(json);
        setError(null);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData(); // 初回実行
    timer = setInterval(fetchData, interval); // 定期的に実行

    return () => clearInterval(timer); // クリーンアップ
  }, [url, interval]);

  return { data, loading, error };
}

export default usePollingAPI;

（このフックを使うと、指定した間隔でAPIを呼び出し続け、常に最新のデータを取得できます）

4. コンポーネントでポーリングを使う例

作成したカスタムフックをコンポーネントで使ってみましょう。ここでは記事の一覧を定期的に更新する例を紹介します。


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

function Posts() {
  const { data, loading, error } = usePollingAPI("https://jsonplaceholder.typicode.com/posts", 3000);

  if (loading) return <p>読み込み中です...</p>;
  if (error) return <p>エラーが発生しました: {error.message}</p>;

  return (
    <ul>
      {data.slice(0, 5).map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

export default Posts;

（画面に記事一覧が表示され、3秒ごとに最新のデータに更新されます）