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

生徒

「Reactでサーバーからデータを取ってきたいときはどうすればいいんですか？」

先生

「そういうときにはAPIを呼び出します。そしてReactでは、useEffectを使うのが基本です。」

生徒

「APIってなんですか？むずかしそうに聞こえます。」

先生

「APIとは、データをやり取りするための入り口のようなものです。たとえば天気予報アプリなら『今日の天気を教えて』とお願いする場所がAPIです。」

生徒

「なるほど！じゃあReactではそのAPIをuseEffectの中で呼び出せばいいんですね。」

先生

「その通り！ただし正しい方法で書かないとエラーになるので、手順を丁寧に説明しますね。」

1. useEffectでAPIを呼び出す基本の流れ

ReactでAPIを呼び出すときは、useEffectの中で非同期処理を行います。非同期処理とは、時間のかかる作業を待っている間も画面が固まらずに動ける仕組みのことです。

例えば、スーパーでお弁当を注文したあと、自分は別の買い物をしながら店員さんがお弁当を準備してくれるようなイメージです。

useEffectはレンダリングのあとに実行されるので、「画面を表示してからAPIを呼ぶ」という自然な流れになります。

2. useEffectでのAPI呼び出しサンプルコード

それでは、実際にサーバーから記事データを取ってくる例を見てみましょう。


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

function App() {
  const [post, setPost] = useState(null);

  useEffect(() => {
    const fetchPost = async () => {
      const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
      const data = await response.json();
      setPost(data);
    };
    fetchPost();
  }, []);

  return (
    <div>
      <h1>記事のタイトル</h1>
      {post ? <p>{post.title}</p> : <p>読み込み中...</p>}
    </div>
  );
}

export default App;

（画面には最初「読み込み中...」と表示され、サーバーからデータが届くと記事のタイトルが表示されます）

このように、useEffectの中で非同期関数を定義して呼び出すのが正しい書き方です。

3. API呼び出しのときのエラーハンドリング

インターネットが不安定だったり、サーバーが応答しないこともあります。そのときのために「エラーハンドリング」を書いておくことが大切です。


useEffect(() => {
  const fetchPost = async () => {
    try {
      const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
      if (!response.ok) {
        throw new Error("データ取得に失敗しました");
      }
      const data = await response.json();
      setPost(data);
    } catch (error) {
      console.error("エラー:", error);
    }
  };
  fetchPost();
}, []);

このようにtry...catchを使えば、エラーが起きてもアプリ全体が止まらずに安全です。

4. 依存配列とAPI呼び出しのタイミング

useEffectの第二引数にある「依存配列」をうまく使うと、APIを呼び出すタイミングを制御できます。

[] 空配列を渡すと最初の1回だけ呼び出す
値を入れると、その値が変わるたびにAPIを呼び出す

例えば検索キーワードが変わるたびに新しいデータを取得したいときに使えます。

5. 読み込み中の表示（ローディング）を工夫する

API呼び出しは時間がかかることがあります。その間、何も表示しないとユーザーは「動いてないのかな？」と不安になります。そこで、「読み込み中...」などのメッセージを表示して安心させましょう。

このようなちょっとした工夫が、アプリを使いやすくするポイントになります。

6. 実際のアプリで使う場面

useEffectでAPIを呼び出すのは、実際のアプリでも頻繁に登場します。例えば次のようなケースです。

ニュースアプリで最新記事を取得するとき
天気予報アプリで気温や天気を表示するとき
ショッピングサイトで商品一覧を読み込むとき
プロフィール画面でユーザー情報を表示するとき

どれも「外部からデータを持ってきて画面に反映する」という共通点があります。その中心になるのが、useEffectを使ったAPI呼び出しの正しい書き方です。

まとめ

useEffectでAPIを呼び出す流れを振り返ろう

今回の記事では、ReactにおけるuseEffectを使ったAPI呼び出しの基本について、初心者の方でも理解できるように、考え方から実際のコード例まで段階的に解説してきました。 useEffectは「画面が表示されたあとに何か処理をしたいとき」に使う仕組みであり、サーバーからデータを取得する非同期処理と非常に相性が良いHooksです。

ReactでAPIを呼び出す場合、画面を描画する処理と通信処理をきちんと分けて考えることが重要です。 useEffectを使うことで、最初の描画が終わったあとにAPI通信を実行できるため、画面が固まることなく、自然なユーザー体験を実現できます。この「描画後にデータ取得」という考え方は、React開発の基礎として必ず身につけておきたいポイントです。

非同期処理とuseEffectの正しい書き方

useEffectの中でAPIを呼び出す際には、非同期処理の扱い方にも注意が必要です。 useEffect自体をasyncにすることはできないため、内部で非同期関数を定義してから実行する、という形が基本になります。これは最初は少し分かりにくく感じるかもしれませんが、慣れてくると「いつもの書き方」として自然に使えるようになります。

また、try...catchを使ったエラーハンドリングや、通信中であることを示すローディング表示も非常に重要です。 API通信は必ず成功するとは限らないため、エラーが起きた場合の動きをあらかじめ考えておくことで、ユーザーにとって安心できるアプリになります。 useEffectは単にAPIを呼ぶだけでなく、アプリ全体の安定性を高める役割も担っているのです。

依存配列を理解することが成長の近道

useEffectの第二引数である依存配列は、API呼び出しのタイミングを制御するための重要な仕組みです。空の配列を指定すれば、コンポーネントが最初に表示されたときだけ処理が実行されます。一方で、値を入れると、その値が変化するたびに再実行されるため、検索機能や条件付きのデータ取得など、応用的な処理にも対応できます。

依存配列を正しく理解せずに使ってしまうと、 APIが何度も呼ばれてしまったり、逆に呼ばれなくなったりといった問題が起こります。そのため、「いつAPIを呼びたいのか」を意識しながら依存配列を書くことが大切です。この考え方が身につくと、Reactの挙動を自分でコントロールできるようになり、開発がぐっと楽になります。

サンプルプログラムで復習しよう

ここで、useEffectを使ってAPIを呼び出す最小構成のサンプルをもう一度確認してみましょう。ローディング表示とデータ表示を切り替える、基本的な構成です。


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

function Sample() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
      const json = await response.json();
      setData(json);
    };
    fetchData();
  }, []);

  return (
    <div>
      {data ? <p>{data.title}</p> : <p>読み込み中...</p>}
    </div>
  );
}

export default Sample;

このコードでは、コンポーネントの表示後にAPIを呼び出し、データが取得できたら画面を更新しています。「状態を使って表示を切り替える」「useEffectで非同期処理を行う」というReactの基本的な流れがしっかり詰まった例です。まずはこの形をしっかり理解し、自分で書けるようになることが大切です。

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

生徒

「useEffectって難しそうだと思っていましたが、 APIを呼ぶための決まった流れがあると分かって安心しました。」

先生

「そうですね。描画のあとに処理をする、という考え方が分かれば怖くありません。」

生徒

「依存配列でタイミングを調整できるのが面白いです。検索機能にも使えそうですね。」

先生

「その通りです。 useEffectを理解できると、Reactでできることが一気に広がりますよ。」

生徒

「まずはシンプルなAPI取得からたくさん練習してみます。」