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

生徒

「Reactでサーバーからいろんなデータを同時に取りたいときって、どうすればいいんですか？」

先生

「Reactでは、Fetch APIとPromise.allを使うことで、複数のデータを一気に取ることができますよ。」

生徒

「一気にっていうのは、まとめて同時に取れるってことですか？」

先生

「そうです。順番に取るよりも早くて便利ですよ！具体的なやり方をわかりやすく見ていきましょう。」

1. 並列処理ってなに？

まず、「並列処理（へいれつしょり）」という言葉について説明します。

並列とは「同時に進める」という意味で、複数の作業を一緒に実行することです。たとえば、同時にコーヒーをいれながら洗濯機を回すようなイメージです。

ReactでAPI通信をする場合、順番に1つずつ処理するより、同時に取ってしまったほうが早く表示できます。

2. Promise.allとは？

Promise.all（プロミス・オール）は、JavaScriptの機能で、複数の非同期処理（時間がかかる作業）をまとめて実行して、全部終わるのを待つことができます。

Fetch APIも非同期処理なので、これを使えば複数のリクエストを一度に処理できます。

Reactでサーバー通信する場面では、APIを複数回呼ぶときにとても役立つ書き方です。

3. 例：2つのAPIから同時にデータを取得する

たとえば「記事データ」と「ユーザーデータ」を同時に取得して、画面に表示したいケースを考えてみましょう。


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

function App() {
  const [post, setPost] = useState(null);
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    Promise.all([
      fetch("https://jsonplaceholder.typicode.com/posts/1").then((res) =>
        res.json()
      ),
      fetch("https://jsonplaceholder.typicode.com/users/1").then((res) =>
        res.json()
      ),
    ])
      .then(([postData, userData]) => {
        setPost(postData);
        setUser(userData);
        setLoading(false);
      })
      .catch((error) => {
        console.error("エラーが発生しました:", error);
        setLoading(false);
      });
  }, []);

  return (
    
      {loading ? (
        <p>データを取得中です...</p>
      ) : (
        <div>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
          <hr />
          <h4>投稿者: {user.name}</h4>
          <p>メール: {user.email}</p>
        </div>
      )}
    
  );
}

export default App;

（最初に「データを取得中です...」と表示され、その後、記事タイトルと内容、ユーザー名とメールアドレスが画面に表示されます）

4. thenで分割して結果を受け取る

.then(([postData, userData]) => {...})の部分で、Promise.allの結果をそれぞれ取り出しています。

これは、配列で受け取った結果を分割して、それぞれpostDataとuserDataという変数に入れている書き方です。

5. エラー処理も忘れずに

複数のリクエストを送るとき、どれか一つでも失敗すると全体が止まってしまいます。

そのため、.catchで失敗時のメッセージや対処も入れておくと、安心です。

たとえばネット接続がないときなどに、「エラーが発生しました」と表示することで、ユーザーにもわかりやすくなります。

6. 並列処理はどんなときに使う？

並列処理が便利な場面はたくさんあります。

ユーザー情報と投稿一覧を同時に表示したいとき
ランキング情報とおすすめ情報を同時に取得したいとき
複数のAPIを一度に読み込んで、画面の表示を早くしたいとき

特にモバイル環境では、少しでも表示が早いとユーザーの満足度が上がります。

7. もし片方だけ成功させたいときは？

Promise.allはすべて成功しないと止まってしまいますが、Promise.allSettledを使えば、成功・失敗に関係なくすべての結果を受け取れます。

それぞれの結果に対して、状態（成功か失敗か）を確認して処理できるので、柔軟な対応が可能になります。


Promise.allSettled([
  fetch("URL1").then((res) => res.json()),
  fetch("URL2").then((res) => res.json()),
]).then((results) => {
  results.forEach((result) => {
    if (result.status === "fulfilled") {
      console.log("成功:", result.value);
    } else {
      console.error("失敗:", result.reason);
    }
  });
});

8. useEffectの中で書く理由は？

Reactでは、コンポーネントが表示されたタイミングでデータを取得したいことが多いです。

そのため、useEffectの中にFetch APIを入れて、「最初に1回だけ実行されるように」しているんです。

これは「副作用（ふくさよう）」と呼ばれる処理で、ユーザーの操作とは関係なく実行されます。

まとめ

Reactにおける複数リクエストの並列処理を振り返る

この記事では、ReactでFetch APIを使って複数のサーバーリクエストを同時に処理する方法について学びました。単一のデータ取得だけであれば基本的なfetchの書き方でも十分ですが、実際のWebアプリケーションでは、投稿データとユーザー情報、設定情報と一覧データなど、複数のAPIから同時に情報を取得したい場面が多くあります。そのようなときに役立つのが、JavaScriptの標準機能であるPromise.allです。

Promise.allを使うことで、複数のFetch APIリクエストを並列で実行し、すべての通信が完了したタイミングでまとめて結果を受け取ることができます。これにより、順番に通信を行う場合と比べて待ち時間が短くなり、画面の表示速度やユーザー体験の向上につながります。 Reactアプリでは、表示の速さがそのまま使いやすさに直結するため、並列処理の考え方はとても重要なポイントです。

Promise.allとuseEffectの組み合わせが基本

ReactでFetch APIを使う場合、多くのケースでuseEffectの中に通信処理を書きます。これは、コンポーネントが画面に表示されたタイミングでデータを取得したいからです。 useEffectの第二引数に空の配列を指定することで、最初の一回だけ処理が実行され、無限に通信が繰り返されるのを防ぐことができます。

Promise.allとuseEffectを組み合わせることで、「画面表示時に複数のAPIから同時にデータを取得し、その結果をまとめて画面に反映する」という流れを、シンプルで分かりやすく書けるようになります。この構造を理解しておくと、Reactでのデータ取得処理に自信が持てるようになります。

並列処理の基本形をもう一度確認


useEffect(() => {
  Promise.all([
    fetch("https://example.com/api1").then((res) => res.json()),
    fetch("https://example.com/api2").then((res) => res.json()),
  ])
    .then(([data1, data2]) => {
      setData1(data1);
      setData2(data2);
    })
    .catch((error) => {
      console.error("通信エラー", error);
    });
}, []);

（画面表示時に複数のデータを同時に取得し、すべてそろった後で画面に反映されます）

この形は、ニュース一覧とユーザー情報の取得、商品情報とレビュー情報の取得など、多くの実務シーンで応用できます。まずはこの基本形をしっかり身につけることが、Reactでの並列通信を理解する近道です。

エラー処理とPromise.allSettledの考え方

Promise.allは非常に便利ですが、注意点もあります。それは、複数の通信のうち一つでも失敗すると、全体が失敗として扱われる点です。そのため、どれか一つでも欠けると画面を表示できないケースでは問題ありませんが、「片方が失敗しても、成功したデータだけは表示したい」という場合には向いていません。

そのような場合には、Promise.allSettledを使うことで、成功と失敗を個別に判断しながら処理を進めることができます。状況に応じてPromise.allとPromise.allSettledを使い分けられるようになると、より柔軟で安定したReactアプリを作れるようになります。

並列処理を理解するとReact開発の幅が広がる

複数リクエストの並列処理を理解すると、Reactで作れるアプリケーションの幅は大きく広がります。ダッシュボード画面、管理画面、一覧と詳細を同時に表示する画面など、実際のサービスでは複数のAPI通信が当たり前のように使われています。並列処理を正しく使えるかどうかで、表示速度やユーザーの満足度にも差が出てきます。

最初は少し難しく感じるかもしれませんが、「同時に通信する」「すべて終わったらまとめて使う」という考え方を意識すると、 Promise.allは決して難しいものではありません。基本の形を何度も書いて、自然に使えるようになることが大切です。

先生と生徒の振り返り会話

生徒

「複数のAPIを同時に取れるって聞くと難しそうでしたが、 Promise.allを使えば意外とシンプルなんですね。」

先生

「そうですね。useEffectと組み合わせるだけで、実務でもよく使う書き方になります。」

生徒

「順番に取るより早く表示できる理由も、並列処理だと分かりました。」

先生

「その理解はとても大切です。並列処理を使いこなせるようになると、 Reactで作れるアプリの完成度が一段上がりますよ。」