Reactで非同期データをフェッチしながらスピナーを表示する方法

非同期データのフェッチ処理を実装する際、データがロードされるまでの間に何も表示されない状態では、ユーザーに混乱や不便を与える可能性があります。特にモバイル環境や低速ネットワークでは、この問題は顕著です。こうした場面で役立つのがスピナー（ローディングインジケーター）の表示です。本記事では、Reactを使って非同期データをフェッチしながらスピナーを表示する方法について解説します。基本的な非同期処理の実装から、スピナーのカスタマイズ、エラー処理まで、実用的なアプローチを具体例を交えて紹介します。これにより、ReactアプリケーションのUXを一段と向上させることが可能になります。

非同期データ処理の基本概念
スピナー表示の必要性とUXの向上
Reactでの基本的な非同期処理の実装方法
スピナーコンポーネントの作成
状態管理の工夫：ローディング状態の制御
スピナーとデータ表示の連携
エラー処理と代替表示の実装
応用：CSSアニメーションでスピナーをカスタマイズ
演習：複雑なデータフェッチの実践例
まとめ

非同期データ処理の基本概念

非同期処理とは、ある処理が完了するのを待たずに次の処理を実行する仕組みのことです。Reactを含むモダンなWebアプリケーションでは、APIからデータを取得したり、ファイルをアップロードしたりする際に頻繁に用いられます。

同期処理と非同期処理の違い

同期処理では、現在の処理が完了するまで次の処理がブロックされます。一方、非同期処理では、データの取得や演算がバックグラウンドで進行し、その間に他の操作を実行することが可能です。これにより、ユーザー体験を大幅に向上させることができます。

Reactにおける非同期処理の重要性

Reactアプリケーションでは、データの動的な取得や更新が求められる場面が多くあります。例えば、ニュースアプリで最新の記事を取得したり、SNSで新しい投稿を表示する場合、非同期処理が欠かせません。この処理を適切に行うことで、アプリケーションのパフォーマンスと操作性が向上します。

非同期処理の実現方法

Reactでは以下のような方法で非同期処理を実現します：

fetch API: ネイティブのJavaScript APIで、サーバーからデータを取得する際に使用。
Axios: fetchよりも柔軟な機能を提供する人気のライブラリ。
async/await: コードを直感的に書ける非同期処理の記述方法。
useEffectフック: Reactでコンポーネントのライフサイクルに基づいて非同期処理を実行するためのフック。

これらの基本的な概念を理解することで、Reactアプリケーションに非同期処理を適切に導入できます。次章では、この非同期処理とスピナー表示の関係について詳しく見ていきます。

スピナー表示の必要性とUXの向上

非同期データのフェッチ中にスピナーを表示することは、ユーザー体験（UX）の向上に大きく寄与します。これにより、データのロード中にアプリケーションが応答していないように見える「空白状態」を避けることができます。

スピナーが解決する問題

ユーザーの混乱を防ぐ
ロード中に何も表示されないと、アプリケーションがフリーズしたり壊れたりしていると誤解される可能性があります。スピナーは「処理中である」という視覚的な手がかりを提供します。
待機時間の認識を改善する
スピナーを表示することで、ユーザーはシステムが作業を進行中であることを理解でき、待機時間を受け入れやすくなります。

スピナーがUXに与える効果

信頼感の向上
スピナーを表示することで、アプリケーションが正常に動作しているという信頼感をユーザーに与えます。
待機時間の心理的短縮
心理学的に、待機時間に何かしらのフィードバックがあると、実際の待機時間が短く感じられます。スピナーや進捗表示はその効果を生むツールです。

スピナーの適切な使用例

API呼び出し中: サーバーからデータを取得する間に表示。
データ更新時: ユーザーが操作してデータが変更される際に表示。
ページ遷移中: 大量のデータがロードされる場合に、次のページが表示される前にスピナーを使用。

スピナーはシンプルなコンポーネントでありながら、アプリケーションのUXを大幅に改善できる要素です。次章では、Reactで非同期処理を実装する具体的な方法について解説します。

Reactでの基本的な非同期処理の実装方法

Reactでは、非同期データの取得や処理を実現するために、useEffectフックやasync/await構文がよく使われます。ここでは、これらを組み合わせた基本的な非同期処理の実装方法を説明します。

非同期処理の実装例

以下は、外部APIからデータを取得する基本的な実装例です。

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

function DataFetcher() {
  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://api.example.com/data");
        if (!response.ok) {
          throw new Error("データの取得に失敗しました");
        }
        const result = await response.json();
        setData(result); // データを保存
      } catch (err) {
        setError(err.message); // エラーを保存
      } finally {
        setLoading(false); // ローディング状態を終了
      }
    };

    fetchData(); // 関数を実行
  }, []); // 空の依存配列で初回レンダー時のみ実行

  // ローディング中、エラー、データ表示の切り替え
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  return <div>Data: {JSON.stringify(data)}</div>;
}

export default DataFetcher;

コードのポイント

useEffectフックの活用
useEffectは、コンポーネントがマウントされる際や依存関係が変更された際に非同期処理を実行するために使用します。
async/awaitで非同期処理を簡潔に記述
fetch APIを使ってデータを取得し、結果をawaitで待つことで非同期処理をわかりやすく記述できます。
状態管理でUIを制御
useStateを使って、loading、data、errorの3つの状態を管理し、現在の状態に応じてUIを更新します。

ポイントの整理

依存配列: []を指定することで、非同期処理が初回レンダー時のみに実行されるよう制御。
例外処理: try-catchブロックを使用してエラーをキャッチし、ユーザーにわかりやすいメッセージを表示。

この基本的な実装をもとに、次章ではスピナーコンポーネントを作成して、ローディング中のUIを改善する方法を解説します。

スピナーコンポーネントの作成

スピナー（ローディングインジケーター）は、非同期処理中に「データをロード中である」ことを視覚的に伝える重要な要素です。この章では、Reactでシンプルなスピナーコンポーネントを作成する方法を解説します。

基本的なスピナーコンポーネントの実装

以下のコードは、CSSアニメーションを利用したシンプルなスピナーの例です。

import React from "react";
import "./Spinner.css"; // CSSを外部ファイルに分ける

function Spinner() {
  return (
    <div className="spinner">
      <div className="double-bounce1"></div>
      <div className="double-bounce2"></div>
    </div>
  );
}

export default Spinner;

スピナーのCSS

以下のCSSを使用してスピナーのアニメーションを作成します。

.spinner {
  width: 40px;
  height: 40px;
  position: relative;
  margin: auto;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #3498db;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  animation: bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  animation-delay: -1.0s;
}

@keyframes bounce {
  0%, 100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}

スピナーの使用例

作成したスピナーコンポーネントを、非同期データフェッチの実装に組み込む方法を説明します。

import React, { useState, useEffect } from "react";
import Spinner from "./Spinner";

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

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch("https://api.example.com/data");
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error("データ取得エラー:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {loading ? <Spinner /> : <div>Data: {JSON.stringify(data)}</div>}
    </div>
  );
}

export default DataFetcherWithSpinner;

デザインの工夫

カラー変更: スピナーの色をテーマに合わせて変更することで、一貫性のあるデザインを実現します。
サイズ調整: 小型のスピナーからフルスクリーンのローディング画面まで、用途に応じてサイズを調整します。

このスピナーコンポーネントを使えば、ロード中のUIを改善し、アプリケーションのプロフェッショナルな印象を高めることができます。次章では、ローディング状態の管理方法について詳しく説明します。

状態管理の工夫：ローディング状態の制御

非同期処理中にスピナーを表示するためには、ローディング状態を適切に管理することが重要です。ReactのuseStateフックを活用することで、ローディング状態を簡単に制御できます。この章では、状態管理のベストプラクティスを解説します。

ローディング状態の管理

ローディング状態の基本的な管理方法を以下に示します。

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

function DataLoader() {
  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://api.example.com/data");
        if (!response.ok) {
          throw new Error("データ取得に失敗しました");
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message); // エラー状態を設定
      } finally {
        setLoading(false); // ローディングを終了
      }
    };

    fetchData();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  return <div>Data: {JSON.stringify(data)}</div>;
}

ベストプラクティス

状態を明確に分ける
loading、data、errorといった状態を分けて管理することで、ロジックがわかりやすくなり、バグを防ぎやすくなります。
状態の初期化
コンポーネントのマウント時に、明確に初期状態（例: loading = true）を設定することで予期せぬ挙動を回避します。
状態に基づくUI切り替え
loading状態を利用して、スピナーの表示やデータのレンダリングを切り替えます。

ローディング状態のカスタマイズ

ローディング状態をさらに効果的に管理する方法として、次の工夫が考えられます。

タイムアウト処理

データ取得が一定時間以上かかる場合にユーザーに通知します。

useEffect(() => {
  const fetchData = async () => {
    setLoading(true);
    const timeout = setTimeout(() => {
      setError("データ取得がタイムアウトしました");
      setLoading(false);
    }, 10000); // 10秒でタイムアウト

    try {
      const response = await fetch("https://api.example.com/data");
      clearTimeout(timeout);
      const result = await response.json();
      setData(result);
    } catch (err) {
      clearTimeout(timeout);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  fetchData();
}, []);

複数の非同期処理を管理

複数のデータ取得を並行して行う場合は、Promise.allを使用します。

useEffect(() => {
  const fetchMultipleData = async () => {
    setLoading(true);
    try {
      const [data1, data2] = await Promise.all([
        fetch("https://api.example.com/data1").then(res => res.json()),
        fetch("https://api.example.com/data2").then(res => res.json())
      ]);
      setData({ data1, data2 });
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  fetchMultipleData();
}, []);

ローディング状態のUI適用例

状態管理を適切に行うことで、以下のようなシナリオに対応できます。

ロード中にスピナーを表示
エラー時に明確なエラーメッセージを表示
複数のデータ取得が終了するまで待機

次章では、スピナーとデータ表示の連携について具体的に解説します。

スピナーとデータ表示の連携

非同期データの取得中にスピナーを表示し、データ取得後にはスムーズにデータをレンダリングすることで、ユーザーに快適な体験を提供します。この章では、スピナーとデータ表示を効率的に連携させる方法を解説します。

状態に基づくコンディショナルレンダリング

Reactでは、状態（loading、data、error）に基づいて異なるUIをレンダリングすることで、スピナーとデータ表示をシームレスに切り替えることができます。

import React, { useState, useEffect } from "react";
import Spinner from "./Spinner";

function DataFetcher() {
  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://api.example.com/data");
        if (!response.ok) {
          throw new Error("データ取得に失敗しました");
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <Spinner />; // ローディング中はスピナーを表示
  if (error) return <div>Error: {error}</div>; // エラーがあれば表示
  return <div>Data: {JSON.stringify(data)}</div>; // データ取得成功時の表示
}

スピナーとデータ表示の遷移をスムーズに

スピナーが突然消えると違和感を覚える場合があります。この問題を解決するには、遷移をスムーズにする工夫が必要です。

CSSトランジションを利用する

スピナーがフェードアウトし、データがフェードインするようにCSSを設定します。

.container {
  position: relative;
}

.spinner, .data-content {
  transition: opacity 0.5s ease-in-out;
}

.spinner.hidden, .data-content.hidden {
  opacity: 0;
  visibility: hidden;
}

.spinner.visible, .data-content.visible {
  opacity: 1;
  visibility: visible;
}

コンポーネントで適用

状態に応じてクラス名を切り替えます。

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

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      const response = await fetch("https://api.example.com/data");
      const result = await response.json();
      setData(result);
      setLoading(false);
    };

    fetchData();
  }, []);

  return (
    <div className="container">
      <div className={`spinner ${loading ? "visible" : "hidden"}`}></div>
      <div className={`data-content ${loading ? "hidden" : "visible"}`}>
        {data && <div>Data: {JSON.stringify(data)}</div>}
      </div>
    </div>
  );
}

ロード完了後のアニメーション表示

データの表示を魅力的にするために、ロード完了後のアニメーションを加えることも可能です。例えば、データがスライドインするエフェクトを追加できます。

スピナーとデータ表示の連携のポイント

状態の正確な管理: ローディング、エラー、データの各状態を明確に管理。
CSSアニメーションの活用: 遷移を滑らかにしてユーザー体験を向上。
ユーザーの焦点: 必要に応じて、スピナーやデータを中央に配置して視認性を高める。

この連携方法を活用すれば、ロード中からデータ表示までの流れをスムーズに演出できます。次章では、エラー処理と代替表示の実装方法を解説します。

エラー処理と代替表示の実装

非同期処理では、ネットワークエラーやサーバーエラーなど、データ取得に失敗するケースがあります。この場合、ユーザーに適切なフィードバックを提供することが重要です。この章では、エラー処理と代替表示の実装方法を解説します。

エラー処理の基本

非同期処理では、try-catch構文を使用してエラーをキャッチし、状態を更新してユーザーにエラー情報を伝えます。

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

function DataFetcherWithErrorHandling() {
  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://api.example.com/data");
        if (!response.ok) {
          throw new Error(`HTTPエラー: ${response.status}`); // HTTPエラーを明示
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message); // エラーメッセージを状態に設定
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <div>Loading...</div>; // ローディング表示
  if (error) return <div>Error: {error}</div>; // エラー表示
  return <div>Data: {JSON.stringify(data)}</div>; // データ表示
}

代替表示の工夫

エラー発生時に単純なエラーメッセージだけでなく、次のような代替表示を提供することで、ユーザー体験を向上させます。

リトライ機能

エラーが発生した場合にデータ取得を再試行できるボタンを表示します。

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

  const fetchData = async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await fetch("https://api.example.com/data");
      if (!response.ok) {
        throw new Error(`HTTPエラー: ${response.status}`);
      }
      const result = await response.json();
      setData(result);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error)
    return (
      <div>
        <div>Error: {error}</div>
        <button onClick={fetchData}>再試行</button> {/* リトライボタン */}
      </div>
    );
  return <div>Data: {JSON.stringify(data)}</div>;
}

エラー時の代替コンテンツ

エラー時に、ユーザーに役立つ代替コンテンツを表示します。

if (error) {
  return (
    <div>
      <h3>データ取得に失敗しました</h3>
      <p>インターネット接続を確認するか、後でもう一度お試しください。</p>
      <p>また、以下の人気記事もご覧ください:</p>
      <ul>
        <li><a href="/popular-article-1">人気記事1</a></li>
        <li><a href="/popular-article-2">人気記事2</a></li>
      </ul>
    </div>
  );
}

エラー処理のベストプラクティス

詳細なエラーメッセージ
ユーザーが原因を理解できるエラーメッセージを表示します（例: ネットワーク障害、サーバーエラーなど）。
視覚的なフィードバック
エラー状態を示すアイコンや強調されたテキストを使用して、視覚的にエラーを伝えます。
ユーザーへのガイド
リトライボタンや関連コンテンツへのリンクを提供することで、エラー後のユーザー行動を支援します。

エラー処理の効果

適切なエラー処理と代替表示により、ユーザーが問題を理解し、次の行動を選択しやすくなります。これにより、アプリケーションの信頼性とユーザー満足度が向上します。

次章では、CSSアニメーションを用いたスピナーのカスタマイズ方法について解説します。

応用：CSSアニメーションでスピナーをカスタマイズ

スピナーのデザインをカスタマイズすることで、アプリケーションのテーマやスタイルに合わせた洗練されたユーザー体験を提供できます。この章では、CSSアニメーションを利用してスピナーをカスタマイズする方法を解説します。

カスタマイズの基本

CSSアニメーションを使用すると、スピナーの動きやスタイルを自由に変更できます。以下に、複数のデザイン例を紹介します。

シンプルな回転スピナー

定番の回転するスピナーを作成します。

import React from "react";
import "./Spinner.css";

function Spinner() {
  return <div className="spinner"></div>;
}

export default Spinner;

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

パルスアニメーションスピナー

スピナーを丸い形状が大きくなったり小さくなったりするデザインに変更します。

.spinner {
  width: 40px;
  height: 40px;
  background-color: #3498db;
  border-radius: 50%;
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

波状スピナー

複数の点が順番に波状にアニメーションするスピナーを作成します。

function Spinner() {
  return (
    <div className="wave-spinner">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  );
}

export default Spinner;

.wave-spinner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 60px;
}

.wave-spinner div {
  width: 10px;
  height: 10px;
  background-color: #3498db;
  border-radius: 50%;
  animation: wave 1.2s infinite ease-in-out;
}

.wave-spinner div:nth-child(1) {
  animation-delay: -1.1s;
}
.wave-spinner div:nth-child(2) {
  animation-delay: -1.0s;
}
.wave-spinner div:nth-child(3) {
  animation-delay: -0.9s;
}
.wave-spinner div:nth-child(4) {
  animation-delay: -0.8s;
}
.wave-spinner div:nth-child(5) {
  animation-delay: -0.7s;
}

@keyframes wave {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.4);
    opacity: 1;
  }
}

テーマに応じたスピナーの選択

シンプルなデザイン: ビジネス向けアプリやシリアスな用途では、回転スピナーのような控えめなデザインが適しています。
エンターテインメント向け: パルスや波状のスピナーは、カジュアルなアプリやゲームに最適です。
ブランドカラー: スピナーの色をブランドカラーに合わせて統一感を持たせます。

アクセシビリティの考慮

動きを最小限に: アニメーションが苦手なユーザーのために、CSSのprefers-reduced-motionを利用してアニメーションを無効にできます。

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

スピナーカスタマイズの効果

スピナーをテーマや用途に合わせてカスタマイズすることで、アプリケーション全体の一体感を高め、ユーザーに魅力的な印象を与えられます。

次章では、複雑な非同期データフェッチにおけるスピナー活用の実践例を紹介します。

演習：複雑なデータフェッチの実践例

複雑な非同期処理では、複数のデータソースを同時に扱ったり、条件に応じた動的なデータ取得を行う必要があります。この章では、スピナーを効果的に利用しながら、複数のデータを取得するケースの実践例を紹介します。

複数のAPIからのデータ取得

以下は、2つの異なるAPIからデータを並行して取得する例です。

import React, { useState, useEffect } from "react";
import Spinner from "./Spinner";

function MultiDataFetcher() {
  const [data1, setData1] = useState(null);
  const [data2, setData2] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchMultipleData = async () => {
      setLoading(true);
      try {
        const [result1, result2] = await Promise.all([
          fetch("https://api.example.com/data1").then(res => res.json()),
          fetch("https://api.example.com/data2").then(res => res.json())
        ]);
        setData1(result1);
        setData2(result2);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchMultipleData();
  }, []);

  if (loading) return <Spinner />;
  if (error) return <div>Error: {error}</div>;
  return (
    <div>
      <h3>Data 1</h3>
      <div>{JSON.stringify(data1)}</div>
      <h3>Data 2</h3>
      <div>{JSON.stringify(data2)}</div>
    </div>
  );
}

export default MultiDataFetcher;

条件に応じた動的データフェッチ

ユーザーのアクションや動的な条件に応じてデータを取得する例を示します。

function ConditionalDataFetcher() {
  const [query, setQuery] = useState("");
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchData = async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await fetch(`https://api.example.com/search?q=${query}`);
      const result = await response.json();
      setData(result);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <button onClick={fetchData}>Search</button>
      {loading && <Spinner />}
      {error && <div>Error: {error}</div>}
      {data && <div>Results: {JSON.stringify(data)}</div>}
    </div>
  );
}

実践例のポイント

Promise.allの活用
複数の非同期処理を同時に行い、すべての処理が完了するまで待機します。
動的パラメータの使用
検索クエリやユーザー選択に応じてAPIリクエストを変更します。
スピナーの汎用性
どのフェッチ操作でも再利用できるスピナーコンポーネントを使用して、コードの重複を避けます。

複雑なケースでのスピナー活用の効果

ロード中のフィードバックを提供し、ユーザーの混乱を防ぐ。
一貫したデザインで、異なるデータフェッチシナリオに対応。
直感的な状態管理により、可読性の高いコードを実現。

これらの実践例を通じて、より高度な非同期処理のニーズにも対応できるスピナーの利用法を習得できます。次章では、この記事の内容を簡潔にまとめます。

まとめ

本記事では、Reactを使って非同期データをフェッチしながらスピナーを表示する方法を詳しく解説しました。非同期処理の基本からスピナーの作成、ローディング状態の管理、エラー処理、そしてCSSアニメーションによるカスタマイズまで、多岐にわたる内容を紹介しました。

スピナーを活用することで、ユーザーがロード中に感じる不安を解消し、UXを向上させることができます。また、複数のデータフェッチや動的な条件に対応する実践例を通じて、複雑なアプリケーションにも応用できる方法を学びました。

これらの知識を基に、Reactアプリケーションの非同期処理をさらに効果的に実装し、魅力的で使いやすいUIを構築してください。