MENU
  1. ホーム
  2. React
  3. Reactで非同期データに対する多段階ローディングインジケーターの実装方法

Reactで非同期データに対する多段階ローディングインジケーターの実装方法

React

非同期データを処理する際、ユーザーに「進行状況」を明確に示すことは、優れたユーザー体験（UX）の提供において重要な要素です。特に、データの取得や計算が複数段階にわたる場合、単一のローディングインジケーターではユーザーに進行状況を十分に伝えられないことがあります。多段階ローディングインジケーターを用いることで、現在の処理状況を直感的に伝え、ユーザーの不安を軽減し、よりスムーズなインタラクションを実現できます。本記事では、Reactを使用してこのようなインジケーターを効果的に設計・実装する方法を詳しく解説します。

目次

多段階ローディングインジケーターとは


多段階ローディングインジケーターは、非同期処理が複数のステージに分かれている際、それぞれの進行状況を視覚的に示す仕組みです。例えば、データを取得する際に以下のような段階があるとします：

  • サーバーへのリクエスト送信
  • データ取得の進行
  • 取得したデータの加工や検証

通常のローディングスピナーでは、これらの詳細な進行状況をユーザーに伝えることが難しいため、多段階ローディングインジケーターを用いることで、各ステージの進捗を具体的に表示できます。この手法は、ユーザーが「どの段階で待たされているのか」を理解できるようにし、待機時間へのストレスを軽減します。

なぜ多段階ローディングインジケーターが必要なのか

  • 透明性の向上：プロセスの進捗が見える化されることで、ユーザーに安心感を与えます。
  • 待機時間の短縮感覚：ステージが進行している様子を見ると、時間が短く感じられる傾向があります。
  • トラブルの迅速な把握：どのステージで問題が発生しているかを把握しやすくなります。

多段階ローディングインジケーターは、特に複雑な処理を伴うアプリケーションやデータ集約型のシステムにおいて、UXを大幅に改善する強力なツールです。

Reactにおける非同期処理の基本

Reactでは、非同期処理を通じてデータを取得し、状態（state）を更新することが一般的です。これは、外部APIの呼び出しや、遅延のある処理を扱う際に不可欠な仕組みです。本セクションでは、Reactでの非同期処理の基本概念を解説します。

非同期処理の基礎


非同期処理とは、特定のタスクが完了するのを待たずに他の処理を進める仕組みです。JavaScriptでは、これをPromiseやasync/awaitで実現します。Reactコンポーネント内では、これらを用いてデータを取得し、適切に状態を更新します。

非同期処理の基本コード例


以下のコードは、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(() => {
    async function fetchData() {
      try {
        setLoading(true);
        const response = await fetch("https://api.example.com/data");
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, []);

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

export default DataFetcher;

Reactで非同期処理を扱う際の注意点

  1. 状態の管理：非同期処理が完了するまで、loadingやerrorなどの状態を適切に設定します。
  2. メモリリークの防止：コンポーネントがアンマウントされた後に状態を更新しないよう、useEffectのクリーンアップを活用します。
  3. エラーハンドリング：エラー発生時のユーザー体験を考慮して、適切なフィードバックを提供します。

Reactの非同期処理を理解することで、複雑なデータフローをスムーズに管理でき、次のステップで説明する多段階ローディングインジケーターの実装が容易になります。

多段階ローディングインジケーターの設計原則

多段階ローディングインジケーターを効果的に設計するためには、ユーザー体験（UX）を重視しながら、技術的な要件を満たすことが重要です。ここでは、その設計原則を解説します。

設計時の考慮事項

1. ステージの明確化


非同期処理を段階に分け、それぞれのステージを明確に定義します。例えば：

  • サーバー接続の確立
  • データ取得中
  • データ加工またはキャッシュの更新

これにより、進行状況を具体的にユーザーに伝えることが可能になります。

2. 進行状況の視覚化


各ステージが進むごとに、視覚的なフィードバックを提供します。例として：

  • スピナー：進捗中のステージを示す回転アイコン。
  • プログレスバー：全体の進捗を数値で視覚化。
  • アイコンの切り替え：完了したステージにチェックマークを付ける。

3. フォールバックの準備


各ステージにおけるエラーやタイムアウトへの対応策を設けます。例えば、データ取得に失敗した場合は、再試行オプションを表示します。

良いデザインのポイント

一貫性のあるUI


多段階インジケーターのデザインはアプリ全体のUIと統一感を持たせるべきです。同じカラーパレットやフォントを使用し、ユーザーが違和感を持たないようにします。

リアルタイムの応答性


各ステージの進行状況がすぐに反映されるようにし、遅延が発生してもユーザーに進行状況を示し続けます。

冗長性の回避


ステージ数が多すぎると、逆にユーザーが混乱します。必要最小限のステージで進捗を伝え、情報量を適度に制限します。

デザイン原則の具体例


以下は、設計に基づいた多段階ローディングインジケーターのイメージ例です：

  1. ステージ1: 「データリクエスト送信中」→スピナー表示
  2. ステージ2: 「データ受信中」→プログレスバーで進捗を表示
  3. ステージ3: 「処理完了」→チェックマーク付きのメッセージを表示

これらの設計原則を活用することで、ユーザーの満足度を高めると同時に、開発者がメンテナンスしやすいインジケーターを構築できます。

ローディングステート管理の実装

多段階ローディングインジケーターをReactで実装するためには、状態（state）を適切に管理し、各ステージの進行状況を反映させることが重要です。本セクションでは、ローディングステート管理の方法を解説します。

ステート管理の基本構造


ReactではuseStateフックを使用して、ローディングの進捗を状態として管理します。以下は、典型的なステート管理の例です：

import React, { useState } from "react";

function MultiStageLoader() {
  const [currentStage, setCurrentStage] = useState(0); // 進行中のステージ
  const stages = ["接続中", "データ取得中", "処理中", "完了"];

  const advanceStage = () => {
    if (currentStage < stages.length - 1) {
      setCurrentStage(currentStage + 1); // 次のステージに進む
    }
  };

  return (
    <div>
      <h2>現在のステージ: {stages[currentStage]}</h2>
      <button onClick={advanceStage}>次のステージに進む</button>
    </div>
  );
}

export default MultiStageLoader;

このコードでは、currentStageを使用して現在のステージを追跡し、ボタンをクリックすることで次のステージに進みます。

非同期処理と連携したステート管理


ステート管理を非同期処理と組み合わせることで、データの進捗状況をリアルタイムに反映できます。以下はその例です：

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

function AsyncMultiStageLoader() {
  const [currentStage, setCurrentStage] = useState(0);
  const stages = ["接続中", "データ取得中", "処理中", "完了"];

  useEffect(() => {
    const processStages = async () => {
      for (let i = 0; i < stages.length - 1; i++) {
        await new Promise((resolve) => setTimeout(resolve, 1000)); // 模擬的な遅延
        setCurrentStage((prev) => prev + 1);
      }
    };
    processStages();
  }, []);

  return (
    <div>
      <h2>現在のステージ: {stages[currentStage]}</h2>
      {currentStage === stages.length - 1 && <p>全ての処理が完了しました！</p>}
    </div>
  );
}

export default AsyncMultiStageLoader;

コード解説

  1. 非同期処理の模擬: setTimeoutで処理遅延を再現し、各ステージの進捗を疑似的に実現。
  2. useEffectフック: コンポーネントマウント時に非同期処理を開始。
  3. 条件付き表示: 全てのステージが完了した際、完了メッセージを表示。

エラーハンドリングの追加


ローディング処理中にエラーが発生した場合の対応も必要です。以下はエラーステートを追加した例です：

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

useEffect(() => {
  const processStages = async () => {
    try {
      // 各ステージの処理を実行
    } catch (err) {
      setError("エラーが発生しました");
    }
  };
  processStages();
}, []);

エラーが発生した場合、適切なフィードバックを表示し、ユーザーの操作をサポートします。

ローディングステートの適切な管理により、ユーザーに進行状況を明確に示し、スムーズな体験を提供できます。

ステージごとのローディングUIの作成

多段階ローディングインジケーターを実現するには、各ステージに対応したUIを設計し、それぞれの進行状況を明確に示すことが重要です。以下では、Reactを用いた具体的なローディングUIの作成方法を説明します。

基本的なローディングUIの構造


ステージごとの進捗を視覚化するために、以下のUI要素を使用できます：

  • スピナー：各ステージが進行中であることを示す回転アイコン。
  • プログレスバー：全体の進捗率を数値や視覚的に表現。
  • チェックマーク：完了したステージを示すアイコン。

UIの基本例


以下は各ステージにスピナーとチェックマークを使ったUIの例です：

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

function MultiStageUI() {
  const [currentStage, setCurrentStage] = useState(0);
  const stages = ["接続中", "データ取得中", "処理中", "完了"];

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentStage((prev) => Math.min(prev + 1, stages.length - 1));
    }, 1000);
    return () => clearInterval(interval); // クリーンアップ
  }, []);

  return (
    <div>
      {stages.map((stage, index) => (
        <div key={index} style={{ display: "flex", alignItems: "center", marginBottom: "10px" }}>
          {index <= currentStage ? (
            index === currentStage ? (
              <div style={{ marginRight: "10px" }}>⏳</div> // 進行中のステージ
            ) : (
              <div style={{ marginRight: "10px" }}>✔️</div> // 完了済みのステージ
            )
          ) : (
            <div style={{ marginRight: "10px" }}>⬜</div> // 未開始のステージ
          )}
          <span>{stage}</span>
        </div>
      ))}
    </div>
  );
}

export default MultiStageUI;

コードのポイント

  • currentStageを監視して現在の進行状況を切り替え。
  • 各ステージに対応するアイコンを条件付きレンダリングで表示。
  • CSSスタイルで簡単な視覚的整合性を確保。

プログレスバーの導入


プログレスバーを追加することで、進捗をより直感的に示すことができます：

function ProgressBar({ currentStage, totalStages }) {
  const progressPercentage = ((currentStage + 1) / totalStages) * 100;

  return (
    <div style={{ width: "100%", backgroundColor: "#ccc", borderRadius: "4px", overflow: "hidden" }}>
      <div
        style={{
          width: `${progressPercentage}%`,
          height: "10px",
          backgroundColor: "green",
        }}
      ></div>
    </div>
  );
}

function MultiStageWithProgressBar() {
  const [currentStage, setCurrentStage] = useState(0);
  const stages = ["接続中", "データ取得中", "処理中", "完了"];

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentStage((prev) => Math.min(prev + 1, stages.length - 1));
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <ProgressBar currentStage={currentStage} totalStages={stages.length} />
      {stages.map((stage, index) => (
        <p key={index} style={{ color: index === currentStage ? "blue" : "black" }}>
          {stage}
        </p>
      ))}
    </div>
  );
}

特徴

  • プログレスバー：進捗率を計算して視覚的に反映。
  • 色分け：現在のステージを青色でハイライト。

動的なローディングUIの応用例


上記の構成にアニメーションやカスタムスタイルを追加することで、よりリッチなユーザー体験を提供できます。また、各ステージの進捗時間を個別に制御することで、リアルな処理フローに近づけることも可能です。

ステージごとのローディングUIは、進行状況をユーザーにわかりやすく伝える重要なツールです。この実装を元に、より洗練されたインジケーターを作成できます。

コンポーネント化による再利用性の向上

多段階ローディングインジケーターをコンポーネント化することで、再利用性が向上し、コードの可読性や保守性が向上します。ここでは、ローディングインジケーターを分離して独立したコンポーネントとして実装する方法を解説します。

ローディングインジケーターのコンポーネント化

コンポーネント化の利点には以下があります：

  1. 再利用性：異なるページや機能で簡単に使い回しが可能。
  2. 分離されたロジック：ローディングに関するロジックを独立させ、メインのコンポーネントをシンプルに保てる。
  3. カスタマイズ性：パラメータを渡すことで表示内容を柔軟に変更可能。

コンポーネント例

以下は多段階ローディングインジケーターを独立したコンポーネントとして実装した例です：

import React from "react";

function LoadingIndicator({ stages, currentStage }) {
  return (
    <div>
      {stages.map((stage, index) => (
        <div key={index} style={{ display: "flex", alignItems: "center", marginBottom: "10px" }}>
          {index < currentStage ? (
            <span style={{ marginRight: "10px", color: "green" }}>✔️</span> // 完了ステージ
          ) : index === currentStage ? (
            <span style={{ marginRight: "10px", color: "blue" }}>⏳</span> // 進行中ステージ
          ) : (
            <span style={{ marginRight: "10px", color: "gray" }}>⬜</span> // 未開始ステージ
          )}
          <span>{stage}</span>
        </div>
      ))}
    </div>
  );
}

export default LoadingIndicator;

ローディングインジケーターの使用例

独立したコンポーネントを使用して、メインのロジックを簡潔に保ちながら、ローディングインジケーターを管理します：

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

function MultiStageLoader() {
  const [currentStage, setCurrentStage] = useState(0);
  const stages = ["接続中", "データ取得中", "処理中", "完了"];

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentStage((prev) => Math.min(prev + 1, stages.length - 1));
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <h1>多段階ローディング</h1>
      <LoadingIndicator stages={stages} currentStage={currentStage} />
    </div>
  );
}

export default MultiStageLoader;

プロパティの拡張性

独立したコンポーネントにプロパティ（props）を追加することで、柔軟なカスタマイズが可能です。以下のような拡張が考えられます：

  • カスタムスタイル: ステージごとの色やアイコンをプロパティで指定。
  • イベントコールバック: ステージ変更時に特定のイベントをトリガー。
function LoadingIndicator({ stages, currentStage, onStageComplete }) {
  useEffect(() => {
    if (onStageComplete) onStageComplete(currentStage);
  }, [currentStage, onStageComplete]);

  return (
    <div>
      {stages.map((stage, index) => (
        <div key={index}>
          {index <= currentStage ? "✔️" : "⬜"} {stage}
        </div>
      ))}
    </div>
  );
}

再利用性のメリット

このようにコンポーネント化することで、異なるプロジェクトやシナリオで使い回しが可能になり、ローディングUIの作成時間を短縮できます。また、変更が必要な場合でも、1箇所のコンポーネントを修正するだけで、アプリ全体に反映されます。

コンポーネント化されたローディングインジケーターは、開発効率を向上させるだけでなく、アプリケーションの一貫したデザインを保つための鍵となります。

実用例：APIデータ取得の多段階表示

多段階ローディングインジケーターは、非同期でのAPIデータ取得に特に有効です。本セクションでは、API呼び出しに基づく多段階ローディングインジケーターの実装例を紹介します。複数のステージを持つデータ取得プロセスを想定し、それぞれのステージを表示します。

APIデータ取得のステージ例

以下のプロセスに基づくステージを設定します：

  1. サーバーへの接続確認
  2. データリクエスト送信中
  3. データ取得中
  4. データ処理完了

コード実装例

以下は、ReactでAPIデータ取得を管理する多段階ローディングインジケーターの例です：

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

function ApiDataLoader() {
  const [currentStage, setCurrentStage] = useState(0);
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const stages = ["サーバー接続確認", "データリクエスト送信中", "データ取得中", "データ処理完了"];

  useEffect(() => {
    const fetchData = async () => {
      try {
        // ステージ1: サーバー接続確認
        setCurrentStage(0);
        await new Promise((resolve) => setTimeout(resolve, 1000)); // 模擬的な遅延

        // ステージ2: データリクエスト送信中
        setCurrentStage(1);
        await new Promise((resolve) => setTimeout(resolve, 1000)); // 模擬的な遅延

        // ステージ3: データ取得中
        setCurrentStage(2);
        const response = await fetch("https://jsonplaceholder.typicode.com/posts");
        if (!response.ok) throw new Error("データ取得に失敗しました");
        const result = await response.json();

        // ステージ4: データ処理完了
        setData(result);
        setCurrentStage(3);
      } catch (err) {
        setError(err.message);
      }
    };

    fetchData();
  }, []);

  if (error) return <p>エラー: {error}</p>;

  return (
    <div>
      <h1>多段階ローディング - APIデータ取得</h1>
      <div>
        {stages.map((stage, index) => (
          <div key={index} style={{ margin: "10px 0" }}>
            {index < currentStage ? "✔️" : index === currentStage ? "⏳" : "⬜"} {stage}
          </div>
        ))}
      </div>
      {currentStage === stages.length - 1 && (
        <div>
          <h2>取得したデータ:</h2>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}

export default ApiDataLoader;

コード解説

  1. 非同期API呼び出し
    各ステージに応じてsetTimeoutやfetchを使用し、実際のデータ取得プロセスを模擬。
  2. 状態管理
  • currentStageで現在の進行中ステージを追跡。
  • dataに取得したデータを保存。
  • errorでエラーメッセージを保持し、エラー時に表示。
  1. 動的表示
  • ステージごとに現在の状態を視覚化。
  • 最終ステージが完了したら取得データを表示。

ステージの可視化

ステージごとの進行状況を以下のように表示します：

  • ⏳: 現在進行中のステージ
  • ✔️: 完了したステージ
  • ⬜: 未開始のステージ

これにより、ユーザーはプロセスの進行状況をリアルタイムで把握できます。

応用可能なシナリオ

このアプローチは、以下のような複雑なシナリオにも応用可能です：

  • 複数のAPI呼び出しが必要な場合。
  • ステージごとに異なるローディングUIを使用したい場合。
  • 進捗バーやアニメーションを追加してさらに直感的なUIを提供する場合。

APIデータ取得プロセスを多段階で視覚化することで、ユーザーの信頼感を高め、より良いUXを実現できます。

応用編：複数APIの非同期処理への適用

多段階ローディングインジケーターは、単一のAPIだけでなく、複数のAPIを扱う非同期処理にも適用可能です。ここでは、複数のAPIを統合して進行状況を管理する方法と、それを視覚化する具体例を解説します。

複数APIの処理フロー

複数のAPI呼び出しを扱う際、以下のようなステージに分けることができます：

  1. サーバー接続確認
  2. API 1からデータ取得
  3. API 2からデータ取得
  4. 統合データの処理
  5. 処理完了

これにより、複雑な非同期フローでも進行状況を明確に管理できます。

実装例：複数APIのローディングインジケーター

以下は、2つのAPIからデータを取得し、それぞれの進行状況をローディングインジケーターに反映する例です：

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

function MultiApiLoader() {
  const [currentStage, setCurrentStage] = useState(0);
  const [data, setData] = useState({ api1: null, api2: null });
  const [error, setError] = useState(null);
  const stages = [
    "サーバー接続確認",
    "API 1からデータ取得中",
    "API 2からデータ取得中",
    "データ統合処理",
    "完了"
  ];

  useEffect(() => {
    const fetchApis = async () => {
      try {
        // ステージ1: サーバー接続確認
        setCurrentStage(0);
        await new Promise((resolve) => setTimeout(resolve, 1000)); // 模擬的な遅延

        // ステージ2: API 1からデータ取得
        setCurrentStage(1);
        const api1Response = await fetch("https://jsonplaceholder.typicode.com/posts");
        if (!api1Response.ok) throw new Error("API 1の取得に失敗しました");
        const api1Data = await api1Response.json();

        // ステージ3: API 2からデータ取得
        setCurrentStage(2);
        const api2Response = await fetch("https://jsonplaceholder.typicode.com/comments");
        if (!api2Response.ok) throw new Error("API 2の取得に失敗しました");
        const api2Data = await api2Response.json();

        // ステージ4: データ統合処理
        setCurrentStage(3);
        const integratedData = { api1: api1Data.slice(0, 5), api2: api2Data.slice(0, 5) }; // 統合処理例
        setData(integratedData);

        // ステージ5: 処理完了
        setCurrentStage(4);
      } catch (err) {
        setError(err.message);
      }
    };

    fetchApis();
  }, []);

  if (error) return <p>エラー: {error}</p>;

  return (
    <div>
      <h1>多段階ローディング - 複数API対応</h1>
      <div>
        {stages.map((stage, index) => (
          <div key={index} style={{ margin: "10px 0" }}>
            {index < currentStage ? "✔️" : index === currentStage ? "⏳" : "⬜"} {stage}
          </div>
        ))}
      </div>
      {currentStage === stages.length - 1 && (
        <div>
          <h2>取得したデータ:</h2>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}

export default MultiApiLoader;

コード解説

  1. ステージの進行
  • 各APIの呼び出し後にcurrentStageを更新して進行状況を管理。
  • エラー発生時は処理を中断し、ユーザーにエラーメッセージを表示。
  1. 統合データ処理
  • API 1とAPI 2のデータを統合し、結果をdataに保存。
  • 統合後のデータを最終ステージで表示。
  1. 動的ステージ表示
  • 各ステージの進行状況をアイコン（⏳、✔️、⬜）で示し、ユーザーがリアルタイムで把握できるように。

応用可能なシナリオ

このアプローチは、以下のようなケースに適しています：

  • データ取得が複数の非同期プロセスに依存する場合。
  • 各プロセスで異なるエラーハンドリングが必要な場合。
  • 並列処理や逐次処理を混在させる必要がある場合。

UX向上のための工夫

  • 並列処理：複数APIの呼び出しを同時に実行することで速度を最適化。
  • 進捗バー：全体の進行率を表示することでユーザーの待ち時間の不安を軽減。
  • ステージごとの詳細メッセージ：各ステージで現在のアクションを説明するメッセージを表示。

このように、複数APIを扱う非同期処理でも多段階ローディングインジケーターを活用することで、進行状況を直感的に伝え、複雑なデータフローでも優れたユーザー体験を提供できます。

まとめ

本記事では、Reactを用いた多段階ローディングインジケーターの設計と実装方法を解説しました。非同期データ処理の各ステージを明確に可視化することで、ユーザーに進行状況を直感的に伝え、待機時間による不安を軽減する方法を示しました。特に、APIデータ取得の実例や複数APIの応用において、その有効性を具体的に示しました。

多段階ローディングインジケーターを導入することで、以下のメリットが得られます：

  • ユーザー体験（UX）の向上
  • 非同期プロセスの進行状況を視覚的に提供
  • トラブルシューティングやデバッグの容易化

この記事で紹介したアイデアや実装例を基に、プロジェクトに応じたカスタマイズを加え、より洗練されたローディングUIを構築してください。多段階ローディングインジケーターは、特に複雑なデータ処理を伴うアプリケーションで、ユーザー満足度を向上させる重要な要素となるでしょう。

React
非同期処理 React UXデザイン

コメント

コメントする

目次