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

生徒

「Reactでデータをサーバーから取得しているとき、読み込み中の表示ってどうすればいいんですか？」

先生

「ReactではFetch APIを使ってデータ取得ができますが、読み込み中の状態も自分で管理する必要がありますよ。」

生徒

「ローディング状態ってどうやって作るんですか？初心者なので難しそうです…」

先生

「大丈夫ですよ！わかりやすく解説しますね。一緒にローディング表示を作ってみましょう！」

1. Fetch APIとは？

まずは「Fetch API（フェッチエーピーアイ）」について説明しましょう。これは、JavaScript（ジャバスクリプト）の機能で、サーバーにデータを取りに行くための仕組みです。

たとえば、「天気予報のサイト」や「商品一覧」などを表示するとき、裏側ではFetch APIが使われて、データベースやAPIから情報を取得しています。

React（リアクト）では、このFetch APIを使って、外部のデータを画面に表示することができます。

2. ローディング状態ってなに？

ローディング状態とは、「データを取りにいっている最中ですよ〜」という状態をユーザーに伝えるためのものです。

これがないと、画面が真っ白なまま「止まってるのかな？」と思われてしまうので、ユーザーにとっても開発者にとっても重要な情報です。

たとえば「読み込み中...」や「ぐるぐる回るアイコン」が表示されるのがローディングの一例ですね。

3. useStateとuseEffectで状態管理する

Reactでは「useState（ユーズステート）」という仕組みで、画面の状態を管理します。

ローディング中かどうかも、このuseStateを使って保存します。データを取ってくる関数は、コンポーネントの最初に実行される「useEffect（ユーズエフェクト）」の中で呼び出します。

4. サンプルコード｜ローディング中の表示をつくる

では、ReactでFetch APIを使ってローディング状態を表示するプログラムを見てみましょう。


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

function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true); // ローディング状態を定義

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then((res) => res.json())
      .then((json) => {
        setData(json);
        setLoading(false); // 読み込みが終わったらfalseにする
      });
  }, []);

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

export default App;

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

5. 三項演算子でローディング表示を切り替える

上記コードの中で使っている{loading ? (...) : (...)}の部分は「三項演算子（さんこうえんざんし）」と呼ばれる書き方です。

これは、「もし loading が true（読み込み中）なら A を表示、そうでなければ B を表示」という条件分岐を1行で書ける便利な構文です。

6. なぜローディング状態を管理する必要があるの？

ローディング状態を管理しないと、ユーザーは「今、何が起きてるの？」と不安になります。

たとえば、ネット回線が遅いときに画面が真っ白なままだと、「エラーかな？」と思ってしまいますよね。

Reactでは、こうした「データがまだ届いていない状態」も、状態として丁寧に扱うことが、使いやすいWebアプリを作るコツになります。

7. ローディング中にスピナーを表示したいときは？

もっと見た目を良くしたい場合は、Bootstrapのスピナーを使うこともできます。

次のように、loadingがtrueのときにスピナーを表示するだけで、ぐるぐると回るアニメーションが表示されます。


{loading ? (
  <div className="spinner-border text-primary" role="status">
    <span className="visually-hidden">Loading...</span>
  </div>
) : (
  <div>データ取得完了！</div>
)}

（読み込み中は青いスピナーが表示され、完了後に「データ取得完了！」と表示されます）

8. エラーが起きたときも管理しよう

ローディング状態と同じくらい大切なのが、エラー（失敗）への対応です。

通信エラーやURLの間違いでデータが取れなかったとき、catchを使ってエラーメッセージを出すと、ユーザーに優しい設計になります。


fetch("https://example.com/data")
  .then((res) => res.json())
  .then((json) => {
    setData(json);
    setLoading(false);
  })
  .catch((error) => {
    console.error("エラーが発生しました:", error);
    setLoading(false);
  });

9. ReactでのFetchとローディングのまとめ方のコツ

ReactでFetch APIを使うときは、次の3つの状態をしっかり管理すると、安定したアプリが作れます。

loading：読み込み中の表示を出す
data：サーバーから受け取ったデータを保存
error：エラーがあったときの対応を行う

これを覚えておくだけで、ReactのFetchがかなり使いやすくなります。

まとめ

ReactでFetch APIとローディング状態を扱う全体像を振り返ろう

この記事では、ReactでFetch APIを使ってデータを取得する際に、 ローディング状態をどのように管理するかについて、初心者の方にも分かりやすく解説してきました。 Webアプリケーションでは、サーバーからデータを取得する処理が必ず発生しますが、その処理は一瞬で終わるとは限りません。だからこそ、データを取得している途中で「今は読み込み中である」ことをユーザーに伝える仕組みがとても重要になります。

Reactでは、画面の状態をuseStateで管理し、データ取得の処理をuseEffectの中で実行するのが基本的な流れです。ローディング中かどうかも状態として持たせることで、「読み込み中」「データ表示」「エラー表示」といった画面の切り替えを明確にコントロールできるようになります。この考え方は、ReactでAPI通信を行う際の土台となる重要なポイントです。

ローディング状態を管理するメリット

ローディング状態をきちんと管理することで、ユーザーは「アプリが正しく動いている」ことを直感的に理解できます。もしローディング表示がなければ、通信が遅いときに画面が止まったように見え、不安やストレスを与えてしまう可能性があります。 Reactでは、こうしたユーザー体験を意識した設計を、状態管理によって自然に実現できる点が大きな特徴です。

また、三項演算子を使って表示を切り替える方法を覚えることで、 JSXの中でも条件分岐をすっきりと書けるようになります。ローディング中はテキストやスピナーを表示し、データ取得後は本来のコンテンツを表示するという流れは、実際のReact開発でも非常によく使われるパターンです。

サンプルプログラムで最終確認

ここで、Fetch APIとローディング状態の管理を組み合わせたシンプルなサンプルプログラムをもう一度確認してみましょう。読み込み中の表示と、データ取得後の表示を切り替える基本構造です。


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

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

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

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

export default FetchSample;

このように、Reactではローディング状態を一つのstateとして扱うことで、非同期処理の流れを分かりやすく整理できます。データ取得、表示切り替え、エラー対応までを含めて考えることが、実用的なReactアプリを作るための大切なポイントです。

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

生徒

「Fetch APIって難しそうだと思っていましたが、ローディング状態を分けて考えると理解しやすくなりました。」

先生

「いいところに気づきましたね。 Reactでは状態を分けて管理することで、非同期処理も整理して書けるようになります。」

生徒

「読み込み中の表示があるだけで、アプリがちゃんと動いている感じがします。」

先生

「その通りです。ローディング表示はユーザー体験を良くするために欠かせません。」

生徒

「これからは、データ取得のときは loadingとerrorも一緒に考えるようにします。」