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

生徒

「先生、Reactでデータを取得するときに、複数の非同期処理を一度に扱いたいんですが、どうすればいいですか？」

先生

「いい質問ですね。ReactのuseEffectでは、非同期処理を組み合わせる方法がいくつかあります。例えばAPIを二つ呼び出して両方のデータを画面に表示することができます。」

生徒

「二つのAPIを同時に呼び出すんですか？なんだか難しそうです…」

先生

「大丈夫です。初心者でもわかるように、ゆっくり具体例を交えて説明しますね。」

1. 非同期処理とは？

非同期処理とは「終わるまで待たずに進める処理」のことです。例えば友達にメールを送って返事を待たずに別の作業をするようなイメージです。Reactではfetchなどを使ってサーバーからデータを取ってくるときに非同期処理を使います。

一方で複数の非同期処理を同時に行う場合、「どの順番で終わるか分からない」という特徴があります。そこでPromise.allなどを使って「全部の処理が終わるまで待つ」という方法がよく使われます。

2. useEffectで非同期処理を書くときの注意

useEffectはコンポーネントが描画されたときに実行される関数ですが、直接asyncを付けることはできません。そのため、中で非同期関数を定義して呼び出す必要があります。

また、複数の非同期処理を扱うときには「途中でエラーが出たらどうするか」や「片方だけ失敗したときにどう表示するか」といった設計も大事です。初心者の方はまず基本のPromise.allを使った方法を覚えるのがおすすめです。

3. 複数のAPIを同時に呼び出す例

ここでは「ユーザー情報」と「投稿データ」を同時に取得して画面に表示する例を紹介します。


import React, { useState, useEffect } from "react";

function MultiFetch() {
  const [user, setUser] = useState(null);
  const [post, setPost] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const [userRes, postRes] = await Promise.all([
          fetch("https://jsonplaceholder.typicode.com/users/1"),
          fetch("https://jsonplaceholder.typicode.com/posts/1")
        ]);
        const userData = await userRes.json();
        const postData = await postRes.json();
        setUser(userData);
        setPost(postData);
      } catch (error) {
        console.error("データの取得に失敗しました", error);
      }
    };
    fetchData();
  }, []);

  return (
    <div>
      <h1>{user ? user.name : "ユーザー読み込み中..."}</h1>
      <p>{post ? post.title : "投稿読み込み中..."}</p>
    </div>
  );
}

export default MultiFetch;

（画面には「ユーザーの名前」と「投稿のタイトル」が表示されます。読み込み中は「読み込み中...」と表示されます）

4. 処理を順番に実行したい場合

ときには「一つ目のAPIが終わってから二つ目を呼びたい」というケースもあります。例えばユーザーのIDを取得してから、そのIDを使って別のデータを取る場合です。そのときはawaitを順番に書くことで実現できます。


useEffect(() => {
  const fetchSequential = async () => {
    try {
      const userRes = await fetch("https://jsonplaceholder.typicode.com/users/1");
      const userData = await userRes.json();
      setUser(userData);

      const postRes = await fetch(
        `https://jsonplaceholder.typicode.com/posts/${userData.id}`
      );
      const postData = await postRes.json();
      setPost(postData);
    } catch (error) {
      console.error("順番に取得中にエラー", error);
    }
  };
  fetchSequential();
}, []);

このようにすれば、まずユーザー情報を取ってから、そのユーザーに関連する投稿を取得することができます。