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

生徒

「ReactでAPIからデータを取ってきたいんですけど、どうやって書けばいいですか？」

先生

「Fetch APIを使えばサーバーからデータを取得できますよ。そして、その処理はuseEffectと一緒に使うのが基本です。」

生徒

「useEffectって、名前からして難しそう…何をするためのものなんですか？」

先生

「Reactで画面が表示されたタイミングで実行したい処理があるときに使います。今回はuseEffectとFetch APIを組み合わせる方法を、わかりやすく解説しますね！」

1. Fetch APIとは？

Fetch API（フェッチエーピーアイ）は、サーバーと通信するためのJavaScriptの標準機能です。

たとえば、「ブログ記事を読み込む」「天気情報を取得する」「ユーザー情報を表示する」など、データを外部から取得したいときに使います。

fetch関数を使えば、指定したURLからJSON形式のデータを簡単に受け取ることができます。

2. useEffectとは？

useEffect（ユーズエフェクト）は、Reactの関数のひとつで、「副作用（ふくさよう）」と呼ばれる処理を実行するために使います。

副作用とは、画面を表示するだけでなく、データの取得・タイマー処理・イベント登録など、画面の外で何かを動かすような処理のことです。

コンポーネントが最初に表示されたタイミングで一度だけ処理を実行したいときに、useEffectが活躍します。

3. なぜFetch APIとuseEffectを組み合わせるの？

Reactでは、コンポーネントが表示された瞬間にAPI通信をしたい場面がよくあります。

たとえば「アプリを開いたら、記事一覧を自動で読み込む」ような動作です。

このような「最初の1回だけ実行したい処理」は、useEffectと組み合わせることで自然に実現できます。

4. ReactでFetch APIとuseEffectを使った基本の書き方

ここでは、実際にReactでAPIからデータを取得して表示するサンプルコードを見てみましょう。


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

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

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then((res) => res.json())
      .then((data) => setPost(data));
  }, []);

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

export default App;

（画面に「読み込み中...」と表示され、その後、取得した記事のタイトルと本文が表示されます）

5. useEffectの第2引数に注目！

上のコードでuseEffect(() => { ... }, [])という書き方をしています。

この[]（空の配列）は、「このuseEffectは最初の1回だけ実行する」という意味になります。

もしここに値を入れると、その値が変わるたびにuseEffectが再実行されます。

6. エラー処理を追加してみよう

ネットが繋がっていなかったり、APIのURLが間違っていると、エラーになることがあります。

そのため、.catch()を使って、エラー処理も忘れずに追加しましょう。


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

このように書くことで、失敗時のトラブルにも対応できます。

7. async/awaitで書くパターン

初心者には少し難しいかもしれませんが、async/awaitという書き方も使えます。

この方法では、非同期処理をawaitで待つことができ、thenを何回も書く必要がなくなります。


useEffect(() => {
  const fetchData = async () => {
    try {
      const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
      const data = await res.json();
      setPost(data);
    } catch (error) {
      console.error("エラーが発生しました", error);
    }
  };

  fetchData();
}, []);

初心者のうちはthenで慣れておき、あとからasync/awaitに移行するとわかりやすいです。

8. ローディング状態の管理も大事

データが読み込まれていない間、「読み込み中...」と表示することで、ユーザーに優しいUIになります。

そのためには、useStateを使ってloadingという状態を作り、データ取得の前後で切り替えるようにします。

ユーザーが「アプリが動いてる！」と安心できるような工夫はとても大切です。

9. コンポーネントが表示されるときだけ実行する

useEffectは、「画面にコンポーネントが表示されたとき」に実行されるのがポイントです。

ボタンを押したときにAPIを呼びたい場合はuseEffectではなく、イベント処理の中でfetchを呼ぶようにします。

つまり、useEffectは「初回に自動実行する用」と覚えておくと良いでしょう。

まとめ

ReactでFetch APIとuseEffectを組み合わせてデータ取得を行う方法を振り返ると、画面表示のタイミングと非同期処理の関係を丁寧に理解することが大切だとわかります。特にuseEffectは、コンポーネントが表示された瞬間に処理を開始する便利な仕組みであり、外部APIから情報を取得して画面に反映させたい場合に非常に相性の良い機能です。さらに、Fetch APIを使うことで、ブログ記事や天気情報、ユーザーデータなど多様な外部データを柔軟に扱えるようになります。こうした仕組みを組み合わせることで、リアルタイム性のある動的なReactアプリケーションが実現でき、ユーザー体験をより豊かにしていけます。加えて、エラー処理やローディング状態の管理も、実践的なWebアプリ制作では欠かせない重要な要素です。単純にデータを取得するだけでなく、通信が失敗したときの動作や、読み込み中の表示を整えることによって、より信頼性の高いインターフェースが生まれます。async/awaitを使った書き方も覚えることで、非同期処理を直感的に記述でき、可読性の高いコードが実現します。以下では、useEffectとFetch APIの動きをより理解しやすくするために、実際の流れをまとめたサンプルコードを再掲しながらポイントを整理します。

サンプルコードで学ぶuseEffectとFetch APIの基本構造


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

function Article() {
  const [content, setContent] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadArticle = async () => {
      try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
        const json = await response.json();
        setContent(json);
      } catch (e) {
        console.error("データ取得時に問題が発生しました", e);
      } finally {
        setLoading(false);
      }
    };

    loadArticle();
  }, []);

  return (
    <div class="article-box">
      {loading ? (
        <p>読み込み中です…</p>
      ) : (
        <div>
          <h2>{content.title}</h2>
          <p>{content.body}</p>
        </div>
      )}
    </div>
  );
}

export default Article;

このコードでは、useEffectが「最初の1回だけ」実行される点が特に要となります。空の配列を第2引数に渡すことで、コンポーネントが描画された瞬間に非同期処理が開始され、データが届けば画面を再描画して表示を更新します。その間はローディングメッセージが利用者に状況を伝えてくれるため、視認性と操作性の両方が改善されます。また、try-catch-finallyを使うことで、通信成功時・失敗時・処理完了時のすべてを丁寧に扱い、堅牢なコードを実現できます。こうした実装はAPI連携を行うアプリでは非常に多くの場面で活用され、より信頼性の高いUIへとつながります。 Fetch APIとuseEffectの組み合わせは、React学習の中でもつまずきやすいポイントですが、一度仕組みを理解すると、データ取得・画面更新・ローディング管理の流れが自然に身につきます。今後、APIを複数回呼ぶケースや条件付きでuseEffectを発火させる応用的な使い方にもつながっていくため、今回の基礎をしっかり押さえておくことが重要です。

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

生徒

「useEffectがどんなタイミングで動くのか、実際のコードを見たらよく理解できました！最初の1回だけ実行したい理由も納得です。」

先生

「そうだね。画面が表示された直後にAPIを呼びたい場面はとても多いから、useEffectとの組み合わせは基本的なパターンになるよ。」

生徒

「ローディング表示もユーザーに優しくて大事なんですね。エラー処理も加えると一気に実践的な感じがしました！」

先生

「その通り。ユーザーの安心感を守るためにも、読み込み中の表示や通信失敗への対応は欠かせないよ。async/awaitに慣れるともっと自由に書けるようになるね。」

生徒

「はい！Fetch APIとuseEffectの組み合わせがしっかり理解できたので、これから他のAPI連携にも挑戦してみます！」