ReactのuseEffectでローディング状態を管理する方法を解説！初心者でもできる非同期処理の基本

1. ローディング状態とは？

1. ローディング状態とは？

ローディング状態とは、APIを呼び出している間やデータが届くまでの「待機時間」をユーザーにわかりやすく伝える仕組みのことです。例えば「読み込み中...」や「データを取得しています」というメッセージを出すのが一般的です。

これがないと、ユーザーは「アプリが止まったのかな？」と不安になります。逆にローディング状態を表示することで「今データを準備しています」と伝えられるので、安心して待ってもらえるのです。

2. useStateでローディング状態を管理する

2. useStateでローディング状態を管理する

Reactでは、状態（state）を使ってローディングの有無を管理します。最初はtrueにして「読み込み中」にしておき、データ取得が終わったらfalseに切り替えます。

イメージとしては「旗（フラグ）」を立てておいて、処理が終わったらその旗を下ろすようなものです。

3. useEffectでローディング状態を切り替えるサンプルコード

3. useEffectでローディング状態を切り替えるサンプルコード

実際にローディング状態を組み込んだコードを見てみましょう。

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

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

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

  return (
    <div>
      <h1>ローディング状態のサンプル</h1>
      {loading ? <p>読み込み中...</p> : <p>{data.title}</p>}
    </div>
  );
}

export default App;

このようにloadingという状態を作ることで、データがまだないときと取得後を切り分けられます。

4. エラーハンドリングを組み合わせる

4. エラーハンドリングを組み合わせる

実際のアプリでは、通信エラーが起きることもあります。その場合もローディング状態を正しく切り替えて「エラーが起きました」と表示してあげると親切です。

const [error, setError] = useState(null);

useEffect(() => {
  const fetchData = async () => {
    setLoading(true);
    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 (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  fetchData();
}, []);

finallyを使うと、成功でも失敗でも必ずローディング状態を解除できます。これで画面がずっと「読み込み中」のままになる心配がなくなります。

5. ローディング表示を工夫してみよう

5. ローディング表示を工夫してみよう

「読み込み中...」と表示するだけでも十分ですが、よりユーザーが待ちやすくする工夫もあります。例えば以下のような方法です。

• アニメーション付きのスピナーを表示する
• 灰色のブロックを仮の表示にして「読み込み中」を分かりやすくする（スケルトンUI）
• メッセージに「少々お待ちください」など親切な文章を加える

こうした工夫を取り入れると、アプリの使いやすさがぐっと上がります。

6. どんなアプリでも役立つローディング管理

6. どんなアプリでも役立つローディング管理

ローディング状態の管理は、どんなアプリでも共通して大事な仕組みです。たとえば次のような場面で必ず使います。

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

これらすべてに共通しているのは「ユーザーに待ってもらう時間がある」ということです。だからこそ、useEffectとstateを組み合わせたローディング管理が重要になります。

まとめ

まとめ

ローディング状態管理のポイントを振り返ろう

この記事では、Reactで非同期処理を行うときに欠かせない「ローディング状態」の考え方と、useEffectとuseStateを使った基本的な管理方法について学びました。 データを取得する処理は、どうしても時間がかかる場面があり、その間に何も表示されないと、利用者は不安を感じてしまいます。 そこで「読み込み中です」「データを取得しています」といった表示を行うことで、今何が起きているのかを画面上で丁寧に伝えられるようになります。

特にReactでは、画面表示が状態に強く結びついているため、ローディング状態を一つのstateとして持つ考え方がとても重要です。 trueとfalseを切り替えるだけのシンプルな仕組みですが、これを正しく使えるようになると、実務レベルのアプリ開発に一歩近づきます。 初心者のうちは「データが取れたかどうか」だけに意識が向きがちですが、「取れるまでの時間をどう見せるか」も同じくらい大切なポイントです。

useEffectと非同期処理の関係を整理

useEffectは、コンポーネントが表示されたあとに処理を実行するための仕組みです。 API通信やデータ取得のような「画面が表示されたあとに動かしたい処理」は、基本的にこの中に書くことになります。 非同期処理では、処理の開始時にローディングをtrueにし、処理が完了したタイミングでfalseに戻す、という流れを意識することが大切です。

また、通信が必ず成功するとは限らないため、エラーが起きた場合でもローディングが解除されるようにする必要があります。 そのためにtryとcatch、そしてfinallyを使う書き方は、実際の開発現場でもよく使われます。 この構造を理解しておくと、画面がずっと読み込み中のまま止まってしまう、といったトラブルを防ぐことができます。

まとめとしてのサンプルコード

最後に、この記事で学んだ内容をコンパクトにまとめたサンプルコードをもう一度確認してみましょう。 ローディング状態、データ取得、エラー管理という基本要素が一通り含まれています。

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

function SampleApp() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      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 (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);

  return (
    <div>
      <h1>まとめ用サンプル</h1>
      {loading && <p>読み込み中...</p>}
      {error && <p>{error}</p>}
      {!loading && !error && <p>{data.title}</p>}
    </div>
  );
}

export default SampleApp;

このように状態ごとに表示を切り替えることで、ユーザーにとって分かりやすく、安心して使える画面を作ることができます。 Reactの基本である「状態によって画面を変える」という考え方が、ローディング管理の中にしっかりと詰まっています。