1. ReactとAPIの関係を理解しよう

Reactは、ユーザーに画面を表示するライブラリですが、その画面に表示するデータはサーバーや外部サービスから取得する必要があります。このとき使うのが「API」です。APIは、アプリケーションとサービスの間でデータをやり取りする仕組みで、例えば天気情報やニュース記事などを取得するときに使います。

通常、APIを呼び出すにはfetchやaxiosといったツールを使います。しかし同じ処理を何度も書くのは大変なので、Reactでは「カスタムフック」を作ってAPIの呼び出しをまとめて管理するのが一般的です。

2. カスタムフックとは？初心者向けに解説

カスタムフックとは、自分で作れる特別な関数のことです。ReactにはuseStateやuseEffectといった「フック」がありますが、それを組み合わせて自分専用の便利な処理を作ることができます。

たとえば、APIを呼び出して結果をstateに保存し、読み込み中やエラーを管理する処理をまとめてカスタムフックにすると、どのコンポーネントでも簡単に使い回せるようになります。

3. 複数APIを同時に呼び出す仕組み

複数のAPIを同時に呼び出すには、JavaScriptのPromise.allという仕組みを使います。Promise.allは「すべてのAPIの処理が終わるまで待ってから結果をまとめて返す」という便利な機能です。

これをカスタムフックに組み込むことで、複数のデータを一度に取得し、効率よく画面に表示できるようになります。

4. 実際にカスタムフックを作ってみよう

ここでは例として、ユーザー情報と記事情報を同時に取得するカスタムフックを作ります。


import { useState, useEffect } from "react";

function useMultipleAPIs() {
  const [data, setData] = useState({ users: null, posts: null });
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchAPIs = async () => {
      try {
        const [usersRes, postsRes] = await Promise.all([
          fetch("https://jsonplaceholder.typicode.com/users"),
          fetch("https://jsonplaceholder.typicode.com/posts")
        ]);
        const users = await usersRes.json();
        const posts = await postsRes.json();
        setData({ users, posts });
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    fetchAPIs();
  }, []);

  return { data, loading, error };
}

export default useMultipleAPIs;

（このカスタムフックを使えば、ユーザー情報と記事情報を同時に取得し、画面に表示する準備ができます）

5. カスタムフックをコンポーネントで使う方法

作成したカスタムフックは、通常のフックと同じようにコンポーネントの中で呼び出して使います。


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

function App() {
  const { data, loading, error } = useMultipleAPIs();

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

  return (
    <div>
      <h1>ユーザー一覧</h1>
      <ul>
        {data.users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>

      <h1>記事一覧</h1>
      <ul>
        {data.posts.slice(0, 5).map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（画面にユーザー一覧と記事一覧が同時に表示されます）