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

生徒

「ReactでAPIを呼び出すときに、画面が止まっているように見えるんですが、どうやって『読み込み中』を表示すればいいんですか？」

先生

「そのときに大切なのが『ローディング状態』を管理することです。カスタムフックを使えば簡単に管理できますよ。」

生徒

「ローディング状態ってなんですか？難しそうに聞こえます。」

先生

「ローディング状態とは『今データを取ってきていますよ』とアプリに教える印のことです。これをうまく使えば、ユーザーに『読み込み中』の表示を出せるようになります。」

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

ローディング状態とは、APIからデータを取得している最中に「まだ結果が来ていませんよ」と示す状態のことです。もしこの仕組みがないと、画面が空っぽに見えたり、固まっているように感じられてしまいます。

例えば、ネットショッピングで商品一覧を開いたとき、画面に「読み込み中…」と出ることがありますよね。これは「まだデータを準備中だから待ってください」という意味です。Reactでも同じで、ローディング状態を管理すればユーザーに安心感を与えられます。

2. カスタムフックでローディングを管理する理由

通常、API処理のたびにuseStateとuseEffectを使ってローディングを管理します。しかし、毎回同じようなコードを書くのは面倒ですし、コードが長くなってしまいます。

そこで便利なのが「カスタムフック」です。カスタムフックを作ってしまえば、ローディングの管理をまとめて再利用できるようになります。つまり、一度作った仕組みをいろんな画面で使えるようになるわけです。

これは、毎回お湯を沸かす代わりに「電気ポット」を置いておくようなものです。必要なときにすぐお湯が使えるように、ローディング管理もひとまとめにしておくと便利です。

3. カスタムフックでローディング状態を作る基本

まずはシンプルなカスタムフックを作ってみましょう。APIからデータを取ってくるときに「読み込み中」かどうかを判定できるようにします。


import { useState, useEffect } from "react";

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

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then((res) => res.json())
      .then((json) => {
        setData(json);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

export default useFetchWithLoading;

このフックでは、loadingという状態を管理しています。データ取得の前にtrueにして、取得が終わったらfalseにします。

4. 作ったフックを実際に使う

次に、このuseFetchWithLoadingをコンポーネントで使ってみましょう。


import React from "react";
import useFetchWithLoading from "./useFetchWithLoading";

function App() {
  const { data, loading } = useFetchWithLoading("https://api.example.com/items");

  if (loading) return <p>読み込み中です...</p>;

  return (
    <div>
      <h1>商品一覧</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（画面に「商品一覧」と表示され、APIから取得したデータがリストで出ます。データ取得中は「読み込み中です...」と表示されます）

5. ローディング状態をわかりやすく表示する工夫

ただ「読み込み中…」と出すだけでは味気ないですよね。Reactでは、スピナー（くるくる回るアイコン）を出すこともできます。BootstrapのアイコンやCSSアニメーションを組み合わせれば、ユーザーに「処理中ですよ」と直感的に伝えられます。

例えばECサイトでは、画面が空っぽだと「壊れてるのかな？」と不安になりますが、「読み込み中」と出るだけで安心感を与えられます。これはユーザー体験を良くする大切な工夫です。

6. エラーとローディングを組み合わせる

実際のアプリでは、API取得に失敗することもあります。そのときに「ローディング→失敗」を切り替えられるようにするとより実用的です。

例えば以下のように、エラー処理を追加することで「読み込み中」「成功」「失敗」を明確に分けられます。


import { useState, useEffect } from "react";

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

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then((res) => {
        if (!res.ok) {
          throw new Error("エラーが発生しました");
        }
        return res.json();
      })
      .then((json) => {
        setData(json);
        setLoading(false);
      })
      .catch((err) => {
        setError(err.message);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
}

export default useFetchWithLoading;

これで、読み込み中かどうか、成功か失敗かをすぐに判断できるようになります。

7. 実際のアプリでの活用シーン

ローディング管理は、ブログアプリやSNS、ショッピングサイトなど、どんなアプリでも必ず必要になります。特にネット回線が遅いときに「処理中」が出ていないと、ユーザーは混乱してしまいます。

カスタムフックでまとめておけば、同じ仕組みをいろんな画面で使えるので開発も楽になります。チーム開発でも「このフックを使えばローディングは統一できますよ」と共有できるのも大きなメリットです。

まとめ

ローディング状態を理解することの大切さ

今回の記事では、ReactでAPI処理を行うときに欠かせない「ローディング状態の管理」について学びました。ローディング状態とは、データを取得している途中であることをアプリ自身が把握し、利用者に分かりやすく伝えるための仕組みです。これがないと、画面が真っ白なままになったり、何も起きていないように見えたりして、使っている人に不安を与えてしまいます。

特にReactのようなフロントエンド開発では、画面の表示とデータ取得が別々のタイミングで行われるため、「今は待ち時間なのか」「もう表示できる状態なのか」を明確に区別することがとても重要です。ローディング状態を正しく扱えるようになると、アプリ全体の使いやすさが大きく向上します。

カスタムフックで管理をまとめるメリット

記事の中では、カスタムフックを使ってローディング状態を管理する方法も紹介しました。カスタムフックを使う最大のメリットは、同じ処理を何度も書かなくて済む点です。APIを呼び出すたびに毎回ローディング用のstateやuseEffectを書くのではなく、一度フックとしてまとめておけば、必要な場所で呼び出すだけで使えるようになります。

これは初心者の方にとっても大きな利点です。コードの量が減り、やっていることが整理されるため、「どこでローディングを切り替えているのか」が一目で分かるようになります。また、あとから機能を追加したり、エラー処理を強化したりする場合も、フックの中だけを直せばよいので修正が簡単です。

ローディング状態と画面表示の基本的な考え方

ローディング状態の基本的な考え方はとても単純です。データ取得を始める前に「読み込み中」にして、取得が終わったら「読み込み完了」に切り替えます。この二つを意識するだけで、画面の制御がぐっと楽になります。さらに、エラー状態も加えれば、「読み込み中」「成功」「失敗」という三つの状態をはっきり分けて扱えるようになります。

こうした状態管理は、ブログ、ニュースサイト、ショッピングサイト、業務アプリなど、どんなReactアプリでも共通して必要になる考え方です。早い段階で身につけておくと、後々の学習や実務でも必ず役立ちます。

簡単なサンプルの考え方


function Sample() {
  const { data, loading } = useFetchWithLoading("/api/sample");

  if (loading) {
    return <p>読み込み中です...</p>;
  }

  return <p>{data.message}</p>;
}

（画面に「読み込み中です...」と表示されたあと、「こんにちは！」のようなデータ内容が表示されます）

このように、ローディング状態を条件として画面表示を切り替えるだけで、利用者にとって分かりやすいアプリになります。難しいことをしているように見えても、実際には「今は待つ」「終わったら表示する」という考え方がベースになっています。

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

生徒

「最初はローディング状態って何のためにあるのか分からなかったんですが、画面が止まって見えないためなんですね。」

先生

「そうです。アプリがちゃんと動いていることを利用者に伝える、大事な役割があります。」

生徒

「カスタムフックにすると、同じ処理を何度も書かなくていいのも便利だと思いました。」

先生

「その気づきはとても大切ですね。Reactでは、処理をまとめて再利用できる形にする意識が重要です。」

生徒