MENU
  1. ホーム
  2. React
  3. Reactでデータフェッチング中のローディング状態を効率的に管理する方法

Reactでデータフェッチング中のローディング状態を効率的に管理する方法

React

React開発では、データフェッチング中のローディング状態を適切に管理することが重要です。特に非同期処理が多用される現在のWebアプリケーションでは、データ取得の遅延中にユーザーに適切なフィードバックを提供することが、良好なユーザーエクスペリエンスを実現する鍵となります。ローディング中の状態を明確に表示することで、ユーザーの混乱を防ぎ、アプリケーションへの信頼性を高めることができます。本記事では、Reactでデータフェッチング中のローディング状態を効率的に管理する方法について詳しく解説します。

目次

データフェッチングの基礎知識


データフェッチングとは、外部のAPIやサーバーから必要なデータを取得し、アプリケーションで使用するプロセスを指します。Reactでは、この非同期処理を管理するために、主にfetchやaxiosなどのライブラリが使用されます。

Reactにおけるデータフェッチングの基本フロー


Reactでデータフェッチングを行う際の基本的な流れは以下の通りです：

  1. 必要なデータを取得するためのAPIエンドポイントを決定する。
  2. データ取得リクエストを送信する非同期関数を作成する。
  3. データを受信したら、Reactの状態管理（useState）で保存し、コンポーネントに反映する。

データフェッチングで使用される主なツール

  • Fetch API: ネイティブなJavaScript APIで、HTTPリクエストを送信します。
  • Axios: PromiseベースのHTTPクライアントで、Fetch APIよりシンプルで柔軟な構文を提供します。
  • React QueryやSWR: データキャッシングや状態管理を簡略化するサードパーティライブラリ。

簡単なデータフェッチングの例

以下はfetchを使用したシンプルな例です：

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

function DataFetchingComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => setData(result))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

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

export default DataFetchingComponent;

このような基本的なデータフェッチングの仕組みを理解することが、効率的なローディング状態管理の土台となります。

ローディング状態の重要性

データフェッチング中のローディング状態を適切に管理することは、Reactアプリケーションのユーザーエクスペリエンス向上において極めて重要です。

ユーザー体験への影響


データ取得の遅延中に何も表示されない状態では、ユーザーがアプリケーションが動作しているのか疑問を持ち、不満を感じる可能性があります。一方で、適切にローディング状態を示すことで、ユーザーはシステムが正常に機能していると認識し、安心感を得られます。

パフォーマンスと認知のバランス


ローディング表示には以下のような役割があります：

  1. 応答性を示す：非同期処理が開始されたことを視覚的に通知します。
  2. 待機時間を軽減：Skeleton Loaderやプログレッシブローディングで、実際の待ち時間を短く感じさせる効果をもたらします。
  3. エラー状態への備え：ローディング状態を適切に扱うことで、エラー処理への移行もスムーズに行えます。

ローディング状態管理の課題

  • 多重リクエストの問題: データフェッチングが重複すると、ローディング状態の表示が混乱する可能性があります。
  • パフォーマンスへの影響: 複雑なローディングアニメーションは、UIのパフォーマンスを低下させることがあります。
  • エラーとローディングの競合: ローディング中にエラーが発生した場合の状態管理が不十分だと、UIが不自然に見える可能性があります。

適切なローディング状態管理は、これらの課題を解決し、Reactアプリケーションの質を大きく向上させる要因となります。

Reactでローディング状態を管理する基本的な方法

Reactでデータフェッチング中のローディング状態を管理するためには、Reactの状態管理フックであるuseStateやuseEffectを活用するのが基本です。このセクションでは、その実装方法を解説します。

ローディング状態を示すフラグの利用


ローディング状態を管理するために、isLoadingという状態を設定します。このフラグを利用して、ローディング中かどうかをUIに反映させます。

実装例


以下の例は、fetchを用いてデータを取得し、ローディング状態を管理するシンプルな方法を示しています：

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

function LoadingExample() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    setIsLoading(true); // ローディング開始
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => {
        setData(result);
        setIsLoading(false); // ローディング終了
      })
      .catch(error => {
        console.error('Error fetching data:', error);
        setIsLoading(false); // エラーでもローディング終了
      });
  }, []);

  return (
    <div>
      {isLoading ? (
        <p>Loading...</p>
      ) : data ? (
        <p>Data: {JSON.stringify(data)}</p>
      ) : (
        <p>No data available</p>
      )}
    </div>
  );
}

export default LoadingExample;

ポイント解説

  1. isLoadingの初期値: データ取得が開始される前はtrueに設定。
  2. 非同期処理の完了時に状態を更新: データ取得が完了した場合はisLoadingをfalseに。
  3. エラーハンドリング: エラーが発生してもisLoadingをfalseに設定してUIを更新。

ライフサイクルとローディング状態

  • マウント時のデータフェッチ: useEffectを利用することで、コンポーネントがレンダリングされた際に非同期処理を実行します。
  • アンマウント時のクリーンアップ: フェッチ処理が不要になった場合、不要な状態更新を防ぐためにクリーンアップを検討します。

シンプルな実装での注意点

  • 大規模なアプリケーションでは、状態管理が複雑になりやすいため、後述するカスタムフックやライブラリの使用を検討してください。
  • UIを改善するため、次のセクションで解説するローディング表示の工夫も取り入れると効果的です。

カスタムフックを使ったローディング管理の最適化

カスタムフックを利用すると、ローディング状態やデータフェッチのロジックを再利用可能な形で分離でき、コードの可読性と保守性が向上します。このセクションでは、カスタムフックを用いてローディング状態を効率的に管理する方法を解説します。

カスタムフックのメリット

  1. ロジックの再利用: 同じデータフェッチのパターンを複数のコンポーネントで共有可能。
  2. コードの簡潔化: コンポーネント内のロジックをシンプルに保てる。
  3. 状態の分離: データフェッチとローディング管理の状態を独立して管理可能。

カスタムフックの実装例

以下の例では、useFetchというカスタムフックを作成し、データフェッチとローディング状態を管理します：

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setIsLoading(true); // ローディング開始
    fetch(url)
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(result => {
        setData(result);
        setIsLoading(false); // ローディング終了
      })
      .catch(error => {
        setError(error.message);
        setIsLoading(false); // エラー発生時もローディング終了
      });
  }, [url]);

  return { data, isLoading, error };
}

export default useFetch;

カスタムフックの使用例

カスタムフックを使うことで、コンポーネント側のコードが非常に簡潔になります：

import React from 'react';
import useFetch from './useFetch';

function DataDisplay() {
  const { data, isLoading, error } = useFetch('https://api.example.com/data');

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error}</p>;
  }

  return (
    <div>
      <h2>Fetched Data:</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataDisplay;

解説

  1. 柔軟なエラー処理: カスタムフック内でエラーハンドリングを行うことで、全ての呼び出し元で統一的なエラーメッセージ表示が可能です。
  2. 依存関係の管理: URLを依存配列に含めることで、URLが変更されるたびにデータをリフェッチできます。

応用: クエリパラメータの管理


カスタムフックをさらに拡張して、動的なクエリパラメータの処理や、複数のAPIエンドポイントに対応する仕組みを導入することで、さらに柔軟性を高められます。

カスタムフックを活用することで、Reactアプリケーションにおけるローディング管理の効率性とコードの品質が飛躍的に向上します。

UIとローディング表示の工夫

データフェッチング中のローディング表示を工夫することで、ユーザー体験を大幅に向上させることができます。単なる「Loading…」表示だけでなく、視覚的に洗練されたUI要素を取り入れることで、アプリケーションに対するユーザーの信頼感を高めることが可能です。

Skeleton Loaderの導入


Skeleton Loaderは、実際のデータが表示される場所にプレースホルダーを表示する技術で、特に内容が多いリストやカード形式のUIに適しています。

Skeleton Loaderの実装例


以下は、Skeleton Loaderを実装する例です：

import React from 'react';
import './Skeleton.css'; // CSSでスケルトンスタイルを設定

function Skeleton() {
  return (
    <div className="skeleton">
      <div className="skeleton-title"></div>
      <div className="skeleton-line"></div>
      <div className="skeleton-line"></div>
    </div>
  );
}

export default Skeleton;
/* Skeleton.css */
.skeleton {
  background-color: #f0f0f0;
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 8px;
}
.skeleton-title {
  height: 20px;
  background-color: #ddd;
  margin-bottom: 1rem;
  width: 60%;
}
.skeleton-line {
  height: 15px;
  background-color: #ddd;
  margin-bottom: 0.5rem;
  width: 100%;
}

Skeleton Loaderの適用例


ローディング中にSkeletonを表示する：

import React from 'react';
import Skeleton from './Skeleton';

function DataDisplay({ isLoading, data }) {
  return (
    <div>
      {isLoading ? (
        <Skeleton />
      ) : (
        <div>
          <h2>Data Loaded:</h2>
          <p>{data}</p>
        </div>
      )}
    </div>
  );
}

スピナーアニメーションの利用


スピナーは、シンプルながらも視覚的にユーザーに処理中であることを示す方法です。

スピナーの実装例

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

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

export default Spinner;
/* Spinner.css */
.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

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

スピナーの適用例

import React from 'react';
import Spinner from './Spinner';

function DataFetchingComponent({ isLoading, data }) {
  return (
    <div>
      {isLoading ? (
        <Spinner />
      ) : (
        <div>
          <h2>Fetched Data</h2>
          <p>{data}</p>
        </div>
      )}
    </div>
  );
}

プログレッシブローディングの採用


データ量が多い場合、最初に取得した部分的なデータを順次表示することで、待ち時間を短く感じさせることができます。この手法は、特に画像ギャラリーや長いリストで効果的です。

プログレッシブローディングの例


部分的なデータ取得が完了したら、それを即時表示しつつ、残りのデータをフェッチする実装を行います。

まとめ


Skeleton Loaderやスピナー、プログレッシブローディングを組み合わせることで、単純な「待ち時間」を意味のある体験に変えることができます。UIの工夫により、Reactアプリケーションの完成度をさらに高めましょう。

エラーハンドリングとローディング管理の統合

データフェッチング中にエラーが発生する場合、適切なエラーハンドリングを行うことで、ローディング状態とエラー表示をスムーズに統合できます。これにより、ユーザーが状況を正確に把握しやすくなり、アプリケーションの信頼性が向上します。

エラーハンドリングの基本


非同期処理では、ネットワークの問題やAPIの不具合によってエラーが発生することがあります。これらのエラーを検出し、ユーザーにわかりやすく通知することが重要です。

ローディングとエラーの状態管理


isLoadingとerrorの両方を状態として管理することで、以下のような状態を正確に制御できます：

  1. ローディング中: データ取得中に「ローディング中」のUIを表示。
  2. エラー発生: エラーが発生した場合にエラーメッセージを表示。
  3. 正常完了: データ取得後に取得したデータを表示。

例: 状態を統合して管理する


以下は、isLoadingとerrorを統合的に扱う実装例です：

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

function FetchWithErrorHandling({ url }) {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setIsLoading(true);
    setError(null);

    fetch(url)
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(result => {
        setData(result);
        setIsLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setIsLoading(false);
      });
  }, [url]);

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error}</p>;
  }

  return (
    <div>
      <h2>Fetched Data</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default FetchWithErrorHandling;

ローディングとエラーのUI設計

  • ローディング状態: スピナーやSkeleton Loaderを表示して、データ取得中であることを明示します。
  • エラー状態:
  • エラーメッセージをわかりやすく表示する。
  • ユーザーがエラーから回復するための方法（再試行ボタンなど）を提供する。

エラー状態のUI例

function ErrorState({ onRetry }) {
  return (
    <div>
      <p>Something went wrong. Please try again.</p>
      <button onClick={onRetry}>Retry</button>
    </div>
  );
}
function FetchWithRetry({ url }) {
  const [retry, setRetry] = useState(0);

  return (
    <FetchWithErrorHandling
      url={url}
      key={retry}
      onRetry={() => setRetry(prev => prev + 1)}
    />
  );
}

エラーハンドリング統合のポイント

  1. ユーザーがエラーから回復できる方法を提供: 再試行機能を追加。
  2. エラー内容を適切に表示: エラー原因が分かる詳細なメッセージを提供（ただし、セキュリティ上の配慮は必要）。
  3. ローディングとエラーの競合を回避: 状態管理を慎重に行い、UIが不自然にならないようにする。

ベストプラクティス

  • 統一されたエラーハンドリング: カスタムフックやユーティリティ関数を用いることで、エラーハンドリングを統一する。
  • フォールバックUIの提供: 致命的なエラーの場合でもアプリケーションがクラッシュしないようにフォールバックUIを実装する。

適切なエラーハンドリングとローディング状態管理を統合することで、ユーザーにとってストレスのない快適なアプリケーションを構築できます。

サードパーティライブラリの活用

Reactでローディング状態を管理する際、サードパーティライブラリを利用することで、コードの簡潔さと効率性が向上します。特に、データフェッチングのプロセス全体を最適化するReact QueryやSWRは、開発者にとって有用なツールです。このセクションでは、これらのライブラリの特徴と基本的な使い方を解説します。

React Queryの活用


React Queryは、データフェッチングやキャッシング、状態管理を簡単に行えるライブラリです。ローディング状態やエラーハンドリングも組み込まれており、手動で管理する手間を削減します。

主な機能

  1. 自動キャッシング: フェッチ済みのデータをキャッシュし、同じリクエストを繰り返さない。
  2. ローディングとエラー管理: 状態を自動的に管理してくれる。
  3. 再フェッチの制御: データの更新タイミングを柔軟に設定可能。

React Queryの基本的な使い方

npm install @tanstack/react-query
import React from 'react';
import { useQuery } from '@tanstack/react-query';

function FetchWithReactQuery() {
  const { data, error, isLoading } = useQuery(['data'], () =>
    fetch('https://api.example.com/data').then(res => res.json())
  );

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      <h2>Fetched Data</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default FetchWithReactQuery;

ポイント解説

  • 状態管理がシンプルになり、isLoadingやerrorを自動的に管理。
  • クエリキー（例: ['data']）でデータキャッシュを制御可能。

SWRの活用


SWR（Stale-While-Revalidate）は、Next.jsの開発者が提供するデータフェッチング用ライブラリで、特にリアルタイム性が求められるアプリケーションで有効です。

主な機能

  1. データのリバリデーション: 古いデータを即座に表示しながら、新しいデータを非同期でフェッチ。
  2. 自動リトライ: ネットワークエラーが発生した場合に自動的に再試行。
  3. 軽量設計: 非常に軽量で簡単に導入可能。

SWRの基本的な使い方

npm install swr
import useSWR from 'swr';

function FetchWithSWR() {
  const fetcher = url => fetch(url).then(res => res.json());
  const { data, error } = useSWR('https://api.example.com/data', fetcher);

  if (!data) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      <h2>Fetched Data</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default FetchWithSWR;

ポイント解説

  • 非同期処理がシンプルに記述可能。
  • データをキャッシュしながら自動で最新状態を維持。

どちらを選ぶべきか？

  • React Query: 複雑なローディング状態管理や依存関係の多いプロジェクトに最適。
  • SWR: 軽量かつシンプルなフェッチ処理が必要なプロジェクトに向いている。

共通するメリット

  • 状態管理を自動化することで、ロジックが簡潔になる。
  • キャッシングやリバリデーション機能でパフォーマンスを向上。

サードパーティライブラリを活用することで、手動管理の煩雑さを排除し、Reactアプリケーションの開発効率と安定性を大幅に高めることができます。

実践例：データフェッチングの包括的な実装

これまで解説した技術を組み合わせた具体的な実践例を通して、データフェッチング中のローディング状態、エラーハンドリング、カスタムフック、サードパーティライブラリの統合的な実装方法を学びます。

APIからのデータ取得と表示


ここでは、カスタムフックを使用してデータフェッチングを行い、React Queryを活用して状態管理とキャッシングを効率化します。

ステップ1: カスタムフックでデータフェッチングを分離

import { useQuery } from '@tanstack/react-query';

export function useCustomFetch(apiUrl) {
  return useQuery(['fetchData', apiUrl], () =>
    fetch(apiUrl).then(res => {
      if (!res.ok) {
        throw new Error('Failed to fetch data');
      }
      return res.json();
    })
  );
}

ステップ2: 実際のコンポーネントでカスタムフックを使用

import React from 'react';
import { useCustomFetch } from './useCustomFetch';

function DataDisplay() {
  const { data, isLoading, error } = useCustomFetch('https://api.example.com/data');

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return (
      <div>
        <p>Error: {error.message}</p>
        <button onClick={() => window.location.reload()}>Retry</button>
      </div>
    );
  }

  return (
    <div>
      <h2>Fetched Data</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataDisplay;

応用: Skeleton Loaderとの組み合わせ

Skeleton Loaderを導入することで、データがまだロードされていない部分に視覚的なヒントを提供します。

function DataDisplayWithSkeleton() {
  const { data, isLoading, error } = useCustomFetch('https://api.example.com/data');

  if (isLoading) {
    return (
      <div>
        <p>Loading Data...</p>
        <Skeleton />
      </div>
    );
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      <h2>Fetched Data</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

エラーハンドリングと再試行


エラーハンドリングを強化するため、Retryボタンを追加して再試行を可能にします。React Queryでは自動リトライの設定も可能です。

function DataDisplayWithRetry() {
  const { data, isLoading, error, refetch } = useCustomFetch('https://api.example.com/data');

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return (
      <div>
        <p>Error: {error.message}</p>
        <button onClick={() => refetch()}>Retry</button>
      </div>
    );
  }

  return (
    <div>
      <h2>Fetched Data</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

統合的な実践のポイント

  1. 再利用性の高いカスタムフック: API URLを引数に取る汎用的なカスタムフックを使用。
  2. React Queryの利点を活用: 自動キャッシングとエラーハンドリングで効率化。
  3. ユーザー体験の向上: ローディング表示、Skeleton Loader、再試行ボタンなどを組み合わせてUXを改善。

実装結果の確認


このアプローチを使用することで、以下を達成できます：

  • ローディング中に視覚的なフィードバックを提供。
  • エラー発生時に適切なメッセージと再試行手段を提示。
  • APIデータの取得後にスムーズに内容を表示。

実践例を通して、Reactでのローディング状態管理の包括的な実装方法を理解し、アプリケーションの開発に活用してください。

まとめ

本記事では、Reactにおけるデータフェッチング中のローディング状態管理について、基礎から応用までを網羅的に解説しました。基本的なuseStateやuseEffectによるローディング管理から、カスタムフックやSkeleton Loader、React QueryやSWRといったサードパーティライブラリの活用まで、実践的な手法を紹介しました。

ローディング状態管理を適切に実装することで、ユーザーエクスペリエンスを向上させ、エラー発生時にも迅速な対応が可能となります。今回学んだ技術を活用し、効率的かつ信頼性の高いReactアプリケーションを構築していきましょう。

React
React データフェッチング ローディング状態

コメント

コメントする

目次