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

生徒

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

先生

「Reactでは、非同期処理を使ってサーバーからデータを取得します。そのときによく使うのがuseEffectという仕組みです。」

生徒

「非同期処理ってなんですか？」

先生

「非同期処理とは、同時に複数のことを並行して進める方法のことです。例えば、ラーメン屋さんで注文を受けている間に、別のお客さんの水を用意するようなものです。」

生徒

「なるほど！じゃあuseEffectを使えば、Reactでもそういう動きができるんですね。」

先生

「その通り！では、useEffectで非同期処理を行う基本パターンを見てみましょう。」

1. useEffectとは？

ReactのuseEffectは「副作用（サイドエフェクト）」を扱うためのフックです。副作用とは、画面の表示以外に起こる処理のことを指します。例えば、サーバーからデータを取得する、タイマーをセットする、ブラウザのタイトルを書き換える、などが副作用です。

パソコン初心者にもわかりやすく言えば、「画面に表示する以外の仕事をお願いする場所」だと考えるとイメージしやすいでしょう。

2. 非同期処理とは？

非同期処理とは、時間のかかる作業をしている間に、他の作業を止めずに進める仕組みのことです。例えば、インターネットからデータをダウンロードしている間に、ユーザーがボタンをクリックしても画面が固まらないようにできます。

日常生活の例でいうと、洗濯機に洗濯物を入れてスイッチを押したら、洗濯機が動いている間に掃除機をかけられるようなイメージです。これが「非同期処理」です。

3. useEffectで非同期処理を行う基本パターン

Reactでは、サーバーからデータを取ってきたいときにuseEffectの中で非同期処理を行います。JavaScriptのasyncやawaitという文法を使うことで、わかりやすく書くことができます。


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

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

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

  return (
    <div>
      <h1>非同期処理のサンプル</h1>
      {data ? <p>{data.title}</p> : <p>読み込み中...</p>}
    </div>
  );
}

export default App;

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

このように、useEffectの中にfetchDataという関数を作って、その中で非同期処理を行います。そして最後にその関数を呼び出すことで、データを取得して画面に表示することができます。

4. 依存配列（第二引数）の意味

useEffectには、第二引数として配列を渡すことができます。これは「いつこの処理を動かすか」を指定するものです。

空配列 [] の場合：最初の1回だけ実行
特定の値を入れた場合：その値が変わったときだけ実行

例えば、検索ボックスの入力が変わったときだけデータを取り直したい場合に使います。これにより、無駄な通信を減らして効率よく動かせます。

5. エラーハンドリングも忘れずに

サーバーとの通信では、必ずしも成功するとは限りません。インターネットの接続が切れていたり、サーバーが混雑していると失敗することもあります。そのため、非同期処理を書くときは、エラーハンドリング（エラーが起きたときの処理）を入れることが大切です。


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

このように、tryとcatchを使ってエラーを補足してあげると、エラーが起きてもアプリが止まらずに安全に動きます。

6. useEffectで非同期処理を使うときの注意点

初心者がよくつまずくポイントとして、「useEffectの中に直接asyncを書くことはできない」というものがあります。正しくは、useEffectの中でasync関数を定義して、それを呼び出す形で書く必要があります。

また、画面が切り替わる前に通信が終わらなかった場合、不要なデータ更新が起きてエラーになることもあります。これを防ぐために、「クリーンアップ処理」を書いておくとより安心です。

7. 知っておきたい使いどころ

非同期処理はReactアプリでよく使う機能です。例えば次のような場面で必ず登場します。

ユーザーのプロフィール情報をサーバーから取得して表示するとき
ショッピングサイトで商品一覧を表示するとき
天気予報アプリで最新の天気情報を取ってくるとき

どれも「外から情報を取ってきて画面に反映する」という流れです。これらをスムーズに動かすために、useEffectと非同期処理を組み合わせることが重要です。

まとめ

useEffectと非同期処理の基本をしっかり整理しよう

この記事では、ReactにおけるuseEffectと非同期処理の基本について、初心者の方でも理解しやすいように、考え方から具体的なコード例まで順を追って解説してきました。 Reactでサーバーからデータを取得する場合、単にJavaScriptで通信を書くのではなく、「いつ処理を実行するのか」「画面表示とどう関係するのか」を意識する必要があります。その中心となるのがuseEffectという仕組みです。

useEffectは、画面の描画が終わったあとに実行される特別な場所です。そのため、API通信やデータ取得、タイマー設定など、表示以外の処理をまとめて書くのに適しています。非同期処理と組み合わせることで、画面を止めることなくデータを取得し、取得結果に応じて表示を切り替える、といった自然な動きが実現できます。この流れを理解できると、Reactアプリの構造が一気に見えやすくなります。

非同期処理を使う理由とReactとの相性

非同期処理とは、時間のかかる処理を待っている間も、ほかの処理を止めずに進められる仕組みのことでした。サーバー通信は、ネットワークの状況によって時間がかかるため、非同期処理を使わないと画面が固まってしまいます。 Reactではユーザーの操作にすばやく反応することが重要なので、非同期処理は欠かせない考え方です。

useEffectの中でasyncやawaitを使うことで、非同期処理を同期処理のように読みやすく書ける点も大きなメリットです。ただし、useEffect自体を非同期関数にできないというルールがあるため、内部で非同期関数を定義して呼び出す、という基本パターンを守る必要があります。この書き方に慣れておくと、API通信だけでなく、今後学ぶさまざまな処理にも応用できるようになります。

依存配列を理解するとReactの動きが見える

useEffectの第二引数である依存配列は、非同期処理を「いつ実行するか」を決めるための重要な要素です。空配列を指定すれば、画面が最初に表示されたときに一度だけ実行されます。これは、初回表示時にデータを取得したい場合によく使われる書き方です。

一方で、依存配列に値を入れると、その値が変わるたびに処理が再実行されます。これにより、検索条件が変わったときに再取得する、選択した項目に応じて内容を切り替える、といった動きが可能になります。依存配列を正しく使えるようになると、無駄な通信を防ぎつつ、必要なタイミングでだけAPIを呼び出せるようになり、パフォーマンスの良いアプリを作れるようになります。

サンプルコードで最終確認

最後に、useEffectと非同期処理を組み合わせた基本形のサンプルコードを振り返ってみましょう。読み込み中の表示と、データ取得後の表示を切り替える、 Reactで非常によく使われる構成です。


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

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

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

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

export default Example;

このコードでは、コンポーネントの初回表示後にAPIを呼び出し、データが取得できたら画面に反映しています。状態管理、useEffect、非同期処理が一体となった、 Reactの基本が詰まった形です。まずはこの構造をしっかり理解し、自分で書けるようになることが、 React学習の大きな一歩になります。

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

生徒

「useEffectと非同期処理って難しそうでしたが、画面のあとにデータを取りに行く仕組みだと考えると分かりやすかったです。」

先生

「その理解がとても大切です。 Reactでは表示と処理の役割を分けて考えるのがポイントですね。」

生徒

「依存配列を使えば、いつ通信するかも自分で決められるんですね。」

先生

「そうです。 useEffectを使いこなせるようになると、実際のアプリ開発がぐっと楽になりますよ。」

生徒

「まずは今回の基本パターンをしっかり練習してみます。」