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

生徒

「ReactでAPIを呼び出すとき、毎回同じデータを取りにいって時間がかかることがあるんですが、どうにかなりませんか？」

先生

「それならキャッシュ機能を使うといいですよ。一度取得したデータを保存しておいて、次回は保存したデータを使えば無駄な通信を減らせます。」

生徒

「キャッシュってどうやって実装するんですか？」

先生

「Reactではカスタムフックを使ってキャッシュ機能を実装すると便利です。では実際に仕組みを見てみましょう。」

1. キャッシュとは？初心者向けにわかりやすく解説

キャッシュとは、一度取得したデータを保存しておいて、次に同じデータが必要になったときにすぐに取り出せるようにする仕組みです。たとえば、インターネットで同じページを何度も開くと、最初よりも早く表示されることがあります。これはブラウザがキャッシュを使っているからです。

ReactでAPIを呼び出すと、通常は毎回サーバーにデータを取りに行きます。しかし同じ情報ならわざわざもう一度取得する必要はありません。キャッシュを利用することで通信を減らし、アプリをスムーズに動かせます。

2. カスタムフックでキャッシュを管理するメリット

カスタムフックを使えば、キャッシュの仕組みを簡単に再利用できます。複数のコンポーネントで同じAPIを使うときも、カスタムフックにキャッシュ機能を組み込んでおけば効率よくデータを扱えます。

たとえば、ある画面で取得したユーザー情報を別の画面でも使いたいときに、キャッシュがあれば再びAPIを呼び出さずに済むのでユーザー体験が向上します。

3. カスタムフックにキャッシュを組み込む基本

まずは簡単な仕組みを考えてみましょう。データを保存するために、JavaScriptのオブジェクトをキャッシュとして利用します。これをフックの外に置くことで、同じアプリ内でデータを共有できます。


import { useState, useEffect } from "react";

const cache = {};

function useCachedAPI(url) {
  const [data, setData] = useState(cache[url] || null);
  const [loading, setLoading] = useState(!cache[url]);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!cache[url]) {
      const fetchData = async () => {
        try {
          const res = await fetch(url);
          const json = await res.json();
          cache[url] = json; // キャッシュに保存
          setData(json);
        } catch (err) {
          setError(err);
        } finally {
          setLoading(false);
        }
      };
      fetchData();
    }
  }, [url]);

  return { data, loading, error };
}

export default useCachedAPI;

（同じURLを渡したときは、すでに保存されたデータを使うのでAPIを再度呼び出しません）

4. キャッシュ付きカスタムフックを使う例

このカスタムフックを実際のコンポーネントで使ってみましょう。ユーザー情報を取得して表示する例です。


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

function Users() {
  const { data, loading, error } = useCachedAPI("https://jsonplaceholder.typicode.com/users");

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

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default Users;

（一度表示したユーザー情報はキャッシュに保存され、再度アクセスしたときは即座に表示されます）