Reactで汎用的なAPIデータフェッチコンポーネントを作成する方法

外部APIからデータを取得して表示することは、Reactを用いたアプリケーション開発においてよくある課題です。しかし、プロジェクトが複雑になるにつれて、API呼び出しのコードが重複したり、非効率的な実装が行われたりすることがあります。そこで、汎用的なデータフェッチコンポーネントを作成することにより、コードの再利用性を高め、エラー処理やローディングの状態管理を一元化することが可能です。本記事では、Reactで外部APIデータを効果的に取得・表示するための汎用コンポーネントの作成方法について、基本概念から実践的なコード例まで詳しく解説します。これにより、より効率的で保守性の高いReactアプリケーションを構築できるようになります。

Reactでのデータフェッチの基本概念

Reactアプリケーションでは、外部APIからデータを取得して表示するケースが頻繁にあります。このようなデータフェッチ処理を効率的に行うには、Reactのライフサイクルとステート管理についての基本的な理解が不可欠です。

Reactでのデータフェッチの一般的な流れ

データを取得して表示する一般的な流れは以下の通りです。

データフェッチのタイミング

データの取得は通常、コンポーネントがマウントされたタイミング（useEffectフックを使用）で行います。

データのステート管理

取得したデータはReactのuseStateフックを用いて状態として保持します。

非同期処理の活用

データフェッチには非同期関数（async/awaitまたは.then）を使用し、リクエストの完了を待機します。

データフェッチに使われるツール

Reactでデータを取得するには、標準のfetch APIやサードパーティのライブラリを活用します。

fetch API
ネイティブのJavaScript APIで、シンプルなHTTPリクエストを実行できます。

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

Axios
エラー処理やリクエスト設定が簡単になる人気のHTTPクライアントです。

重要な考慮点

ローディング状態の管理

データ取得中にユーザーが操作可能な状態にするため、ローディング中のUIを提供します。

エラーハンドリング

APIリクエストが失敗した場合に適切なメッセージや代替案を提示することで、ユーザー体験を向上させます。

パフォーマンスの最適化

不要な再レンダリングを避けるため、必要に応じてuseMemoやuseCallbackを使用します。

Reactでのデータフェッチは、アプリケーションの動的なデータ表示の基盤を成します。次項では、より効率的なデータフェッチを可能にするコンポーネント設計について詳しく解説します。

コンポーネント設計の重要性

Reactアプリケーションでは、効率的なデータフェッチのために適切なコンポーネント設計を行うことが重要です。汎用性の高いコンポーネントを設計することで、コードの再利用性が向上し、プロジェクト全体の保守性が高まります。

汎用コンポーネント設計のメリット

コードの再利用性

同じデータフェッチのロジックを複数のコンポーネントで使い回すことができます。

保守性の向上

ロジックが一元化されているため、API仕様の変更やエラーハンドリングの改善が容易になります。

シンプルなUIコンポーネント

データ取得に関する処理を切り離すことで、UIコンポーネントがシンプルで直感的な設計になります。

コンポーネント設計の基本的なアプローチ

分離と責務の明確化

データフェッチ用のコンポーネントと表示用のコンポーネントを分離します。
データフェッチ用コンポーネントはデータの取得とステート管理を担当します。
表示用コンポーネントは受け取ったデータをもとにUIを描画します。

プロップスの活用

汎用コンポーネントにAPIのURLや設定をプロップスとして渡し、柔軟性を確保します。

コンポジションの導入

子コンポーネントとして渡された要素をカスタムレンダリングすることで、表示内容を自由に制御します。

設計例: 汎用データフェッチコンポーネント

以下は、APIのURLを受け取り、データをフェッチして表示用コンポーネントに渡す汎用コンポーネントの例です。

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

const FetchComponent = ({ url, render }) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setLoading(false);
      });
  }, [url]);

  return render({ data, error, loading });
};

設計のポイント

汎用性の確保

APIのURLやエラーメッセージなどをプロップスとして受け取ることで、幅広いシナリオに対応可能です。

UIの分離

renderプロップを使用して、呼び出し元でUIのカスタマイズが可能です。

このような設計により、複雑なアプリケーションでもデータフェッチロジックを簡単に再利用できるようになります。次項では、データフェッチをさらに効率化するためのカスタムフックの活用について説明します。

カスタムフックの活用例

Reactでデータフェッチを効率的に行うためには、カスタムフックを使用してロジックを再利用可能な形に抽出する方法が効果的です。カスタムフックを使うことで、コンポーネントの肥大化を防ぎ、コードの可読性を向上させることができます。

カスタムフックの基本概念

Reactのカスタムフックは、useStateやuseEffectといった既存のフックを組み合わせて、特定のロジックをカプセル化するための関数です。カスタムフックを使用することで、複数のコンポーネントで共通の機能を簡単に共有できます。

データフェッチ用カスタムフックの例

以下は、汎用的なデータフェッチ処理をカプセル化したカスタムフックの例です。

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        return response.json();
      })
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
};

export default useFetch;

カスタムフックの使用例

作成したuseFetchフックを使用してデータを取得し、表示するコンポーネントの例を示します。

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

const DataDisplay = ({ apiUrl }) => {
  const { data, loading, error } = useFetch(apiUrl);

  if (loading) {
    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 DataDisplay;

カスタムフックを使うメリット

コードの再利用性向上

データフェッチのロジックを一箇所にまとめることで、どのコンポーネントでも同じ処理を簡単に利用できます。

テスト容易性

カスタムフックをテストすることで、データフェッチのロジックを独立して検証可能です。

分離された責務

コンポーネントはUI描画に専念し、データ取得はフックに任せることで責務が明確になります。

発展的な利用例

動的なパラメータ対応
クエリパラメータや認証情報を簡単に管理できます。
ポーリング機能
一定間隔でデータを再取得する機能をカスタムフックに追加可能です。

カスタムフックはReactアプリケーションの中核的な部分で使用され、保守性と効率性を向上させます。次項では、データフェッチ時のエラーハンドリングの重要性とそのベストプラクティスについて解説します。

エラーハンドリングのベストプラクティス

外部APIからのデータフェッチでは、予期しないエラーが発生する可能性が常に存在します。これらのエラーを適切に処理することで、ユーザー体験を向上させ、アプリケーションの信頼性を高めることができます。

エラーハンドリングの重要性

ユーザー体験の向上

エラー発生時に適切なフィードバックを提供することで、ユーザーが問題を認識し、次のアクションを取れるようになります。

デバッグの容易さ

エラーメッセージをロギングすることで、問題の特定と修正が簡単になります。

セキュリティの確保

エラー内容を制限して公開することで、外部からの攻撃リスクを減らします。

一般的なエラーケースと対策

ネットワークエラー

インターネット接続がない、またはAPIサーバーがダウンしている場合。
対策: ユーザーに接続エラーを通知し、リトライボタンを表示する。

HTTPエラー

ステータスコードが404（リソースが見つからない）や500（サーバーエラー）を返す場合。
対策: エラーコードに応じて異なるメッセージを表示する。

API仕様の変更

フェッチしたデータの構造が変更された場合。
対策: フェッチ時に予期しないデータ形式を検出し、適切に対応する。

実装例: エラーハンドリング付きのデータフェッチ

以下は、エラーを適切に処理し、ユーザーにフィードバックを提供するコンポーネントの例です。

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

const FetchWithErrorHandling = ({ url }) => {
  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(url);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

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

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

export default FetchWithErrorHandling;

エラーハンドリングのベストプラクティス

詳細なエラーメッセージ

ユーザー向けと開発者向けのエラーメッセージを分けます。

リトライ機能

APIリクエストが失敗した場合に、再試行する機能を提供します。

フェールセーフ設計

エラー時にアプリケーション全体がクラッシュしないように、デフォルトデータや代替UIを使用します。

ロギングとモニタリング

エラーをサーバーに記録して、発生頻度や原因を追跡できるようにします。

エラーハンドリングは、Reactアプリケーションの信頼性を高める重要な要素です。次項では、データ取得中のユーザー体験を向上させるローディング状態の管理について説明します。

ローディングステータスの管理方法

データフェッチ中のローディング状態を適切に管理することは、ユーザー体験の向上に欠かせません。ユーザーに現在の状況を明確に伝え、適切なフィードバックを提供することで、アプリケーションが応答性の高いものに感じられます。

ローディングステータス管理の基本

ローディング状態の定義

データフェッチが開始されたらローディング状態をtrueに設定し、完了後にfalseにします。

ステート管理

ReactのuseStateフックを使用してローディング状態を管理します。

UIの切り替え

ローディング中とデータ取得後のUIを切り替えるロジックを実装します。

実装例: ローディングステータスを管理するコンポーネント

以下は、ローディング状態を管理し、ユーザーに視覚的なフィードバックを提供する例です。

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

const FetchWithLoading = ({ url }) => {
  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(url);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

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

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

export default FetchWithLoading;

ローディングUIの工夫

視覚的なローディング表示

単純なテキスト表示ではなく、スピナーやアニメーションを使用すると、ユーザーの注意を引きつけることができます。

   import React from 'react';

   const Spinner = () => (
     <div className="spinner">
       <div className="double-bounce1"></div>
       <div className="double-bounce2"></div>
     </div>
   );

   export default Spinner;

プログレスバー

フェッチに要する時間が予想される場合は、進捗を示すプログレスバーを表示するのも効果的です。

骨組みローディング（Skeleton Loading）

完全なローディング状態ではなく、データ表示の骨格を描画しておくことで、読み込み中の不自然さを軽減します。

ローディング状態管理のベストプラクティス

短いローディング時間の最適化

データフェッチが非常に短時間の場合、ローディングUIがちらつく問題を避けるために、一定時間後に表示する設定を導入します。

ローディングキャンセルの実装

コンポーネントがアンマウントされる前に、フェッチを中断するロジックを追加します。

モバイルデバイス向けの最適化

スピナーやアニメーションがデバイスの性能に影響を与えないように軽量な実装を心がけます。

ローディング状態の管理は、ユーザーにとってのアプリケーションの操作感を大きく左右します。次項では、実際に汎用的に使えるデータフェッチコンポーネントのコード例について解説します。

実際のコード例：汎用フェッチコンポーネント

汎用的に使えるデータフェッチコンポーネントを実装することで、APIデータの取得処理を一箇所にまとめ、複数の画面や用途で再利用できるようになります。この節では、簡潔で拡張性の高いフェッチコンポーネントのコード例を紹介します。

汎用データフェッチコンポーネントのコード例

以下は、APIエンドポイントのURLと、データ表示に関するカスタムUIをプロップスで受け取る汎用的なコンポーネントの例です。

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

const FetchComponent = ({ url, renderLoading, renderError, renderData }) => {
  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(url);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  if (loading) return renderLoading();
  if (error) return renderError(error);

  return renderData(data);
};

export default FetchComponent;

使用例：APIデータの取得と表示

汎用的なフェッチコンポーネントを使い、特定の用途に応じたデータ表示コンポーネントを作成します。

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

const App = () => {
  const apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  return (
    <FetchComponent
      url={apiUrl}
      renderLoading={() => <p>Loading data...</p>}
      renderError={(error) => <p>Error occurred: {error.message}</p>}
      renderData={(data) => (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ul>
      )}
    />
  );
};

export default App;

コードの仕組み

汎用性の確保

APIのURLやローディング、エラー、データ表示のUIをプロップスでカスタマイズ可能。

単純化されたロジック

useStateとuseEffectを使用して、データフェッチロジックを簡潔に管理。

柔軟なレンダリング

renderLoading、renderError、renderDataのプロップスに関数を渡すことで、用途ごとに表示内容をカスタマイズ可能。

このアプローチの利点

再利用性

一つのコンポーネントを複数のAPIエンドポイントや異なるUIで使い回すことができます。

コードの分離

フェッチロジックとUIロジックを分けることで、コンポーネントが読みやすく保守しやすくなります。

エラーやローディング状態の一元管理

フェッチに関する例外処理やローディング管理を統一的に実装可能です。

このような汎用フェッチコンポーネントを利用することで、Reactアプリケーションの開発効率を大幅に向上させることができます。次項では、外部APIの種類に応じたカスタマイズ方法について解説します。

外部APIの種類に応じたカスタマイズ方法

外部APIの仕様はさまざまで、異なるデータ形式や認証方式、クエリパラメータなどに対応する必要があります。汎用フェッチコンポーネントを活用しつつ、APIの種類に応じたカスタマイズ方法を実装することで、柔軟なアプリケーション開発が可能になります。

APIの種類と特徴

REST API

一般的なエンドポイントでGET、POSTなどのHTTPメソッドを使用します。
例: https://api.example.com/data

GraphQL API

単一エンドポイントでクエリ言語を使用し、柔軟なデータ取得が可能です。
例: https://api.example.com/graphql

認証が必要なAPI

APIキー、OAuthトークンなどの認証情報をリクエストに含める必要があります。
例: Authorization: Bearer <token>

カスタマイズのポイント

リクエストの設定

HTTPメソッドやヘッダーを動的に設定できるようにします。

リクエストパラメータの柔軟性

クエリパラメータやボディデータをプロップスとして渡し、汎用性を確保します。

レスポンス形式への対応

JSON以外の形式（XMLやプレーンテキスト）に対応するロジックを追加します。

カスタマイズ例: HTTPヘッダーの追加

以下は、認証トークンを含むリクエストを送る汎用フェッチコンポーネントの例です。

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

const CustomFetchComponent = ({ url, headers = {}, method = 'GET', body = null, render }) => {
  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(url, {
          method,
          headers,
          body: body ? JSON.stringify(body) : null,
        });
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url, headers, method, body]);

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

  return render(data);
};

export default CustomFetchComponent;

使用例: 認証付きAPIリクエスト

以下は、認証トークンを利用してデータを取得する例です。

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

const AuthenticatedDataDisplay = () => {
  const apiUrl = 'https://api.example.com/protected-data';
  const authToken = 'your-auth-token-here';

  return (
    <CustomFetchComponent
      url={apiUrl}
      headers={{
        Authorization: `Bearer ${authToken}`,
        'Content-Type': 'application/json',
      }}
      render={(data) => (
        <div>
          <h2>Protected Data:</h2>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      )}
    />
  );
};

export default AuthenticatedDataDisplay;

GraphQL API対応のカスタマイズ例

GraphQL APIでは、リクエストボディにクエリを含める必要があります。

const GraphQLFetchComponent = ({ endpoint, query, variables = {}, render }) => (
  <CustomFetchComponent
    url={endpoint}
    method="POST"
    headers={{
      'Content-Type': 'application/json',
    }}
    body={{
      query,
      variables,
    }}
    render={render}
  />
);

ポイントまとめ

ヘッダーやメソッドのカスタマイズでさまざまなAPIに対応可能。
GraphQLや認証対応のリクエストロジックを共通化できる設計。
汎用コンポーネントを拡張することで、プロジェクト全体での再利用性が向上。

次項では、複数のAPIからデータを統合する応用例について解説します。

応用例：複数APIからのデータ取得

複数の外部APIからデータを取得し、それらを統合して表示することは、Reactアプリケーションにおいてよく求められるタスクです。これを効率的に行うことで、柔軟でダイナミックなデータ表示が可能になります。

複数APIからのデータ取得のシナリオ

統合されたデータ表示

例えば、ユーザー情報とその関連する投稿を別々のAPIから取得し、単一の画面に表示します。

依存関係のあるリクエスト

最初のAPIの結果をもとに、次のAPIリクエストを実行します。

非同期データの並列取得

APIリクエストを同時に実行して効率化します。

実装例: 並列リクエスト

以下は、Promise.allを使用して複数のAPIからデータを同時に取得する例です。

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

const MultiFetchComponent = ({ urls, render }) => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const responses = await Promise.all(
          urls.map((url) => fetch(url).then((res) => {
            if (!res.ok) {
              throw new Error(`Failed to fetch: ${url}`);
            }
            return res.json();
          }))
        );
        setData(responses);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [urls]);

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

  return render(data);
};

export default MultiFetchComponent;

使用例: 統合データの表示

複数のAPIから取得したデータを統合して表示する例です。

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

const Dashboard = () => {
  const apiUrls = [
    'https://jsonplaceholder.typicode.com/users',
    'https://jsonplaceholder.typicode.com/posts',
  ];

  return (
    <MultiFetchComponent
      urls={apiUrls}
      render={(data) => {
        const [users, posts] = data;
        return (
          <div>
            <h2>Users and their Posts</h2>
            <ul>
              {users.map((user) => (
                <li key={user.id}>
                  <strong>{user.name}</strong>
                  <ul>
                    {posts
                      .filter((post) => post.userId === user.id)
                      .map((post) => (
                        <li key={post.id}>{post.title}</li>
                      ))}
                  </ul>
                </li>
              ))}
            </ul>
          </div>
        );
      }}
    />
  );
};

export default Dashboard;

依存関係のあるリクエストの例

最初のAPIリクエストの結果を使用して、次のAPIリクエストを実行する例を示します。

const DependentFetchComponent = ({ baseUrl, userId, render }) => {
  const [userData, setUserData] = useState(null);
  const [postsData, setPostsData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const userResponse = await fetch(`${baseUrl}/users/${userId}`);
        if (!userResponse.ok) throw new Error('Failed to fetch user data');
        const user = await userResponse.json();

        const postsResponse = await fetch(`${baseUrl}/posts?userId=${userId}`);
        if (!postsResponse.ok) throw new Error('Failed to fetch posts');
        const posts = await postsResponse.json();

        setUserData(user);
        setPostsData(posts);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [baseUrl, userId]);

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

  return render({ user: userData, posts: postsData });
};

ポイントまとめ

Promise.allで並列リクエストを効率的に処理。
リクエスト依存関係を管理するロジックで柔軟性を確保。
データ統合ロジックをUIに反映させ、複雑なデータ構造も簡単に表示可能。

次項では、これまで解説した内容をまとめ、汎用的なデータフェッチコンポーネントのメリットを振り返ります。

まとめ

本記事では、Reactで汎用的なデータフェッチコンポーネントを作成する方法について、基本概念から実践的なコード例、さらには複数APIの統合とカスタマイズ方法まで幅広く解説しました。

汎用データフェッチコンポーネントを導入することで、以下のようなメリットを得られます。

コードの再利用性向上

フェッチロジックを一箇所に集約することで、複数のコンポーネントで簡単に利用可能。

保守性の向上

API仕様の変更や新たなリクエストロジックの追加が容易になります。

効率的なデータ管理

複数APIのデータ統合や依存関係のあるリクエストにも対応できる設計が可能。

適切なフェッチコンポーネントを作成することで、アプリケーションの開発効率が向上し、スケーラブルで拡張性のあるReactアプリケーションを構築できます。今回紹介した例をベースに、プロジェクトの要件に応じたさらなるカスタマイズを検討してみてください。

Reactで汎用的なAPIデータフェッチコンポーネントを作成する方法

Reactでのデータフェッチの基本概念

Reactでのデータフェッチの一般的な流れ

データフェッチに使われるツール

重要な考慮点

コンポーネント設計の重要性

汎用コンポーネント設計のメリット

コンポーネント設計の基本的なアプローチ

設計例: 汎用データフェッチコンポーネント

設計のポイント

カスタムフックの活用例

カスタムフックの基本概念

データフェッチ用カスタムフックの例

カスタムフックの使用例

カスタムフックを使うメリット

発展的な利用例

エラーハンドリングのベストプラクティス

エラーハンドリングの重要性

一般的なエラーケースと対策

実装例: エラーハンドリング付きのデータフェッチ

エラーハンドリングのベストプラクティス

ローディングステータスの管理方法

ローディングステータス管理の基本

実装例: ローディングステータスを管理するコンポーネント

ローディングUIの工夫

ローディング状態管理のベストプラクティス

実際のコード例：汎用フェッチコンポーネント

汎用データフェッチコンポーネントのコード例

使用例：APIデータの取得と表示

コードの仕組み

このアプローチの利点

外部APIの種類に応じたカスタマイズ方法

APIの種類と特徴

カスタマイズのポイント

カスタマイズ例: HTTPヘッダーの追加

使用例: 認証付きAPIリクエスト

GraphQL API対応のカスタマイズ例

ポイントまとめ

応用例：複数APIからのデータ取得

複数APIからのデータ取得のシナリオ

実装例: 並列リクエスト

使用例: 統合データの表示

依存関係のあるリクエストの例

ポイントまとめ

まとめ

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル