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

生徒

「Reactで複数のコンポーネントから同じAPIのデータを使いたいときってどうすればいいんですか？」

先生

「そんなときは、カスタムフックとContext APIを組み合わせると便利です。データを一度だけ取得して、全体で共有できるんですよ。」

生徒

「カスタムフックとContext APIってどうやって組み合わせるんですか？」

先生

「それでは、順番に仕組みと実際のコード例を見ていきましょう！」

1. Context APIとは？初心者向けの解説

Context APIは、Reactでデータをグローバルに共有する仕組みです。通常は親から子へと順番にpropsでデータを渡しますが、複数の階層を超えてデータを渡すとコードが複雑になります。Context APIを使えば、データを「どこからでも参照できる共有スペース」に保存できるので、どのコンポーネントからでも簡単に呼び出せます。

例えるなら、クラスの黒板のようなものです。先生が黒板に書いた情報は、教室のどの席に座っている生徒でも見ることができます。これと同じように、Context APIを使うと一度だけ設定したデータをアプリ全体で利用できるようになります。

2. カスタムフックと組み合わせるメリット

カスタムフックは処理をひとまとめにして再利用できる便利な仕組みです。APIの呼び出しやエラー処理をカスタムフックに書いておけば、複数のコンポーネントで同じ処理を何度も書く必要がなくなります。

さらに、Context APIと組み合わせると「一度取得したデータを全体で使い回せる」ようになります。これにより、無駄なAPI呼び出しを減らし、アプリの動作を効率化できます。

3. 実際にAPI管理用のカスタムフックを作ろう

まずは、APIを呼び出すカスタムフックを作ります。ここではユーザー情報を取得する例を使います。


import { useState, useEffect } from "react";

function useUsersAPI() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const res = await fetch("https://jsonplaceholder.typicode.com/users");
        const data = await res.json();
        setUsers(data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    fetchUsers();
  }, []);

  return { users, loading, error };
}

export default useUsersAPI;

（このカスタムフックを呼び出すと、ユーザー情報が取得されます）

4. Contextを作成してデータを共有しよう

次に、Context APIを使ってアプリ全体でデータを共有できるようにします。カスタムフックで取得したデータをContextに渡して、どのコンポーネントからでも利用できるようにします。


import React, { createContext, useContext } from "react";
import useUsersAPI from "./useUsersAPI";

const UsersContext = createContext();

export function UsersProvider({ children }) {
  const { users, loading, error } = useUsersAPI();
  return (
    <UsersContext.Provider value={{ users, loading, error }}>
      {children}
    </UsersContext.Provider>
  );
}

export function useUsers() {
  return useContext(UsersContext);
}

（UsersProviderで全体を囲むと、アプリ内のどこでもユーザー情報を呼び出せます）

5. Contextを使ってコンポーネントにデータを表示

最後に、実際にContextからデータを取り出して画面に表示してみましょう。


import React from "react";
import { UsersProvider, useUsers } from "./UsersContext";

function UsersList() {
  const { users, loading, error } = useUsers();

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

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

function App() {
  return (
    <UsersProvider>
      <h1>ユーザー一覧</h1>
      <UsersList />
    </UsersProvider>
  );
}

export default App;

（画面にユーザーの一覧が表示され、APIから取得したデータを全体で共有しています）