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

生徒

「先生、Reactでデータをサーバーから取ってくるとき、画面が一瞬空っぽになってしまうのはどうしたらいいですか？」

先生

「そのときに使うのが『ローディング状態』です。データがまだ来ていないときは『読み込み中』などのメッセージを出して、ユーザーを安心させるんです。」

生徒

「なるほど！じゃあそのローディング状態はどうやって作るんですか？」

先生

「ReactではuseStateとuseEffectを組み合わせて簡単に作れますよ。順番に説明していきますね。」

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

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

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

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

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

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

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. エラーハンドリングを組み合わせる

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


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