MENU
  1. ホーム
  2. React
  3. React Hooksを使った非同期データフェッチの完全ガイド：実例付き解説

React Hooksを使った非同期データフェッチの完全ガイド：実例付き解説

React

Reactは、シンプルかつ柔軟な設計で人気の高いJavaScriptライブラリですが、リアルタイム性や動的なデータの取得が求められるアプリケーションでは、非同期データのフェッチが避けて通れない課題となります。本記事では、React Hooksを活用して非同期データを効率的かつ直感的に管理する方法を学びます。具体例を交えながら、useEffectやカスタムフックの使い方、エラーハンドリングの実践的なアプローチを解説し、モダンなReact開発のスキルを向上させる内容を提供します。

目次
  1. React Hooksの基礎知識
    1. 主要なReact Hooks
    2. Hooksのルール
    3. Hooksの利点
  2. 非同期データフェッチの概要
    1. 非同期処理の基本
    2. Reactでの非同期処理の重要性
    3. React Hooksと非同期処理
  3. useEffectを使った基本的なデータフェッチ
    1. 基本的な構文
    2. 非同期データフェッチの実装例
    3. ポイント解説
    4. 注意点
  4. useStateとの連携
    1. 状態管理の基本
    2. 例: 状態管理と非同期データフェッチ
    3. 重要なポイント
    4. ベストプラクティス
  5. データフェッチ時のエラーハンドリング
    1. 非同期処理におけるエラーの種類
    2. エラーハンドリングの実装例
    3. 主要なポイント
    4. UIにおけるエラー表示の工夫
    5. ベストプラクティス
  6. カスタムフックの作成
    1. カスタムフックの基本
    2. データフェッチ用カスタムフックの例
    3. カスタムフックの使用例
    4. カスタムフックを使う利点
    5. 拡張例
  7. Suspenseと非同期処理
    1. React Suspenseとは
    2. 非同期処理への応用
    3. Suspenseのメリット
    4. 注意点と制限
    5. 未来の展望
  8. 実例：APIデータを表示するアプリ
    1. 目標
    2. コード例
    3. コードの解説
    4. 結果
    5. 拡張案
  9. よくある課題とその解決策
    1. 課題1: コンポーネントのアンマウント中の状態更新エラー
    2. 課題2: 複数回の無駄なデータフェッチ
    3. 課題3: エラーハンドリングの一貫性
    4. 課題4: レスポンスデータの処理
    5. 課題5: UIのユーザーフレンドリーな更新
    6. 課題6: データフェッチのパフォーマンス
    7. まとめ
  10. 演習問題
    1. 課題1: 基本的なデータフェッチの実装
    2. 課題2: カスタムフックの作成
    3. 課題3: フィルター機能を追加
    4. 課題4: ページネーションの実装
    5. 課題5: React SuspenseとReact Queryの利用
    6. 課題の達成方法
  11. まとめ

React Hooksの基礎知識

React Hooksは、React 16.8以降で導入された機能で、関数コンポーネントでも状態管理やライフサイクルの操作を可能にする仕組みです。それ以前は、クラスコンポーネントでしか利用できなかった機能を、シンプルな構文で使えるようになりました。

主要なReact Hooks

Reactでよく使われるHooksには以下があります：

  • useState: コンポーネント内で状態を管理するためのフック。
  • useEffect: 副作用の管理（データフェッチやDOM操作など）を行うフック。
  • useContext: グローバルな状態やテーマを管理する際に利用するフック。

Hooksのルール

Hooksを使用する際には、以下のルールを守る必要があります：

  1. トップレベルでのみ使用
    フックは関数の中や条件分岐の内部で呼び出してはいけません。常に関数コンポーネントの最上部で使用します。
  2. React関数コンポーネントまたはカスタムフック内でのみ使用
    フックは通常のJavaScript関数では使用できません。

Hooksの利点

  • 簡潔なコード: クラスコンポーネントに比べて、コードが簡潔になります。
  • 状態管理の効率化: 複数の状態を関数コンポーネントで簡単に管理できます。
  • 再利用可能なロジック: カスタムフックを使うことで、状態管理や副作用のロジックを再利用可能にします。

React Hooksは、モダンなReact開発において欠かせないツールであり、データフェッチのような非同期処理にも大きな威力を発揮します。次のセクションでは、非同期データフェッチの基本を解説します。

非同期データフェッチの概要

非同期データフェッチとは、アプリケーションが外部ソース（APIやデータベースなど）からデータを取得するプロセスを指します。この手法は、現代の多くのWebアプリケーションで必須となっています。

非同期処理の基本

JavaScriptでは、非同期処理を以下の方法で実現します：

  • Promises: .then()や.catch()を用いて非同期処理の結果を扱います。
  • async/await: Promiseの構文をより直感的に記述できる方法です。

例:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

Reactでの非同期処理の重要性

Reactアプリケーションでは、非同期処理を適切に扱うことで以下のような利点があります：

  • リアルタイム性: 外部データの取得と表示をスムーズに行える。
  • ユーザー体験の向上: ローディング状態の管理やエラー表示を行うことで、ユーザーにとって使いやすいアプリケーションを構築可能。

React Hooksと非同期処理

Reactでは、useEffectを用いて非同期処理を実行します。非同期データフェッチは、コンポーネントのライフサイクルと密接に関連しており、データ取得やクリーニング処理を適切に実装する必要があります。

次のセクションでは、useEffectを使った基本的なデータフェッチの方法を具体的に解説します。

useEffectを使った基本的なデータフェッチ

ReactのuseEffectフックは、副作用（side effects）を管理するために使用されます。データフェッチは典型的な副作用の一例であり、useEffectを使って簡単に実装できます。

基本的な構文

useEffectの基本的な構文は以下の通りです：

useEffect(() => {
  // 副作用の処理
  return () => {
    // クリーンアップ処理
  };
}, [依存配列]);
  • 副作用の処理: データフェッチなどを記述する部分。
  • 依存配列: この配列内の値が変化したときにuseEffectが再実行されます。空配列の場合、コンポーネントの初回レンダリング時にのみ実行されます。

非同期データフェッチの実装例

以下は、useEffectを用いてAPIからデータを取得する基本的な例です：

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

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []); // 空の依存配列：コンポーネント初回レンダリング時のみ実行

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

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

export default DataFetchingComponent;

ポイント解説

  1. 状態管理: useStateでdata（取得データ）、loading（ローディング状態）、error（エラー状態）を管理します。
  2. 非同期処理の管理: 非同期関数fetchDataをuseEffect内で呼び出します。
  3. 依存配列の設定: 空の依存配列を渡すことで、データフェッチを初回レンダリング時のみに限定します。

注意点

  • クリーンアップ処理: コンポーネントがアンマウントされる際に未解決の非同期処理が残らないように注意が必要です。
  • エラーハンドリング: ネットワークエラーやデータ取得の失敗を適切に管理します。

次のセクションでは、このデータフェッチをさらに強化するために、useStateとの連携方法を解説します。

useStateとの連携

非同期データフェッチでは、取得したデータやアプリケーションの状態を管理するために、useStateフックとの連携が欠かせません。このセクションでは、useStateを活用した状態管理の方法を詳しく解説します。

状態管理の基本

Reactでは、useStateを使用してコンポーネント内で状態を管理します。非同期データフェッチでは以下の状態を設定することが一般的です：

  1. データの状態: 取得したデータを保存する。
  2. ローディング状態: データフェッチ中かどうかを示す。
  3. エラー状態: フェッチ時のエラーを保存する。

例: 状態管理と非同期データフェッチ

以下のコードは、useStateを使った状態管理の具体例です：

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); // フェッチ開始時にローディング状態をtrueに設定
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        const jsonData = await response.json();
        setData(jsonData); // データを状態に保存
        setError(null); // エラーをリセット
      } catch (err) {
        setError(err.message); // エラー状態を更新
      } finally {
        setLoading(false); // フェッチ完了時にローディング状態をfalseに設定
      }
    };

    fetchData();
  }, []); // 初回レンダリング時のみ実行

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

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

export default DataFetcher;

重要なポイント

  1. ローディング状態の管理
    データフェッチの進行状況をユーザーに知らせることで、UXを向上させます。setLoading(true)とsetLoading(false)を適切に配置します。
  2. エラー状態の管理
    ネットワークエラーやAPIエラーが発生した際にユーザーに情報を提供します。
  3. データの更新
    setDataで取得したデータを即座に状態に保存し、コンポーネントを再レンダリングします。

ベストプラクティス

  • 初期状態の設定: 初期状態をnullやundefinedに設定し、コンポーネントが正しく初期化されるようにします。
  • 依存配列の設定: 適切な依存配列を指定して、不要な再レンダリングを防ぎます。

useStateとuseEffectを組み合わせることで、Reactコンポーネント内でシンプルかつ効率的にデータフェッチが可能になります。次のセクションでは、エラーハンドリングに焦点を当てて解説します。

データフェッチ時のエラーハンドリング

非同期データフェッチでは、エラーハンドリングが非常に重要です。適切にエラーを処理することで、ユーザーに明確な情報を提供し、アプリケーションの信頼性を向上させることができます。

非同期処理におけるエラーの種類

非同期データフェッチ中に発生する可能性のある主なエラーは以下の通りです：

  1. ネットワークエラー
    サーバーが応答しない、または接続が失敗する場合。
  2. HTTPエラー
    APIの応答が404（リソースが見つからない）や500（サーバーエラー）などのエラーステータスの場合。
  3. JSON解析エラー
    APIから受信したデータが正しい形式ではない場合。

エラーハンドリングの実装例

以下のコードは、try-catchを使用したエラーハンドリングの例です：

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

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

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      setError(null); // エラー状態をリセット
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (err) {
        setError(err.message); // エラーメッセージを設定
      } finally {
        setLoading(false); // ローディングを終了
      }
    };

    fetchData();
  }, []);

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

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

export default ErrorHandlingComponent;

主要なポイント

  1. try-catchでエラーをキャッチ
    非同期関数内でtry-catchを使用してエラーを捕捉し、適切に処理します。
  2. HTTPエラーの明示的な処理
    response.okでHTTPステータスを確認し、エラーが発生した場合にエラーをスローします。
  3. エラーメッセージの提供
    ユーザーに具体的なエラーメッセージを提供することで、問題解決に役立ちます。

UIにおけるエラー表示の工夫

エラーの種類に応じたUIの改善案：

  • ネットワークエラーの場合
    「インターネット接続を確認してください」といったメッセージを表示します。
  • HTTPエラーの場合
    「データが見つかりませんでした（404）」や「サーバーエラーが発生しました（500）」などの詳細なメッセージを表示します。

ベストプラクティス

  • エラーのロギング: コンソールにエラーを記録し、開発時やデバッグ時に役立てます。
  • リトライ機能: ユーザーが再試行できるようにボタンを追加します。
  • ユーザーフレンドリーなエラーメッセージ: 技術的なエラーではなく、ユーザーが理解しやすいメッセージを提供します。

次のセクションでは、さらに効率的なデータフェッチを可能にするカスタムフックの作成方法を解説します。

カスタムフックの作成

Reactでは、カスタムフックを作成することで、状態管理や非同期データフェッチのロジックをコンポーネントから分離し、再利用性を高めることができます。このセクションでは、データフェッチ用のカスタムフックを作成する方法を解説します。

カスタムフックの基本

カスタムフックは、通常の関数として定義しますが、Reactのフックを内部で使用します。名前は必ずuseで始める必要があります。

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

以下は、非同期データフェッチに特化したカスタムフックの実装例です：

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]); // URLが変更されたときに再実行

  return { data, loading, error };
}

export default useFetch;

カスタムフックの使用例

上記のカスタムフックを使って、複数のコンポーネントでデータフェッチを簡単に再利用できます：

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

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

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

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

export default DataDisplay;

カスタムフックを使う利点

  1. 再利用性
    同じデータフェッチのロジックを複数のコンポーネントで共有できます。
  2. コードの分離
    フェッチロジックをコンポーネントから分離することで、コンポーネントがシンプルで読みやすくなります。
  3. 保守性の向上
    カスタムフック内のロジックを変更すれば、それを利用する全てのコンポーネントに反映されます。

拡張例

カスタムフックをさらに強化することで、柔軟性を向上させることも可能です：

  • 動的リクエスト: URLだけでなく、HTTPメソッドやリクエストボディを引数として受け取る。
  • キャッシュの活用: 一度取得したデータを再利用してリクエストを削減する。

カスタムフックは、Reactプロジェクトでの非同期データフェッチを効率化し、コードの再利用性を大幅に高めます。次のセクションでは、React Suspenseを活用した非同期処理の最適化方法について解説します。

Suspenseと非同期処理

ReactのSuspenseは、非同期処理を簡潔に扱うための強力なツールです。特にデータフェッチやコード分割の最適化に役立ち、ユーザー体験を向上させる役割を果たします。このセクションでは、Suspenseの基本と非同期データフェッチへの応用について解説します。

React Suspenseとは

Suspenseは、Reactがコンポーネントのレンダリングを一時停止し、指定されたバックアップUI（例: ローディングスピナー）を表示できる仕組みです。

基本的な構文:

<Suspense fallback={<LoadingComponent />}>
  <LazyLoadedComponent />
</Suspense>
  • fallback: データやコードが読み込まれるまでの間に表示されるコンポーネント。

非同期処理への応用

Suspenseを使ったデータフェッチには、React.lazyやReact Server ComponentsのようなReactネイティブの仕組みと組み合わせる方法があります。

React.lazyによるコード分割

React.lazyを使用すると、コンポーネントを遅延ロードし、必要になったときに初めて読み込みます。

例:

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<p>Loading component...</p>}>
      <LazyComponent />
    </Suspense>
  );
}

export default App;

データフェッチのシミュレーション

Suspenseで非同期データフェッチを利用するには、React Suspense向けのデータライブラリ（例: react-queryやrelay）を活用するのが一般的です。

例: React Queryを使ったデータフェッチ

import React, { Suspense } from 'react';
import { useQuery } from 'react-query';

function fetchData() {
  return fetch('https://api.example.com/data').then((res) => res.json());
}

function DataComponent() {
  const { data } = useQuery('dataKey', fetchData);
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

function App() {
  return (
    <Suspense fallback={<p>Loading data...</p>}>
      <DataComponent />
    </Suspense>
  );
}

export default App;

Suspenseのメリット

  1. ローディングの管理
    非同期処理の進行中に代替UIを提供できるため、ユーザー体験が向上します。
  2. コード分割の効率化
    必要なコードのみを遅延ロードすることで、初期レンダリングの速度を最適化します。
  3. シンプルなロジック
    非同期処理のロジックが統一され、明確になります。

注意点と制限

  • 現時点でSuspenseは、非同期データフェッチでは完全にサポートされておらず、データライブラリと併用する必要があります。
  • 初期レンダリングでのロード時間を考慮した設計が必要です。

未来の展望

Reactの将来的な更新（Concurrent RenderingやServer Components）により、Suspenseが非同期処理の標準的な手法としてさらに進化することが期待されています。

次のセクションでは、非同期データフェッチを利用した具体的なアプリケーションの実装例を紹介します。

実例：APIデータを表示するアプリ

ここでは、これまでの内容を基に、非同期データフェッチを利用して外部APIから取得したデータを表示するシンプルなアプリケーションを実装します。この例では、useState、useEffect、そしてエラーハンドリングを組み合わせて実装します。

目標

  • 外部APIからデータを取得する。
  • ローディング中に適切なメッセージを表示する。
  • エラー発生時にユーザーに通知する。
  • フェッチしたデータをリストとして表示する。

コード例

以下のコードでは、JSONPlaceholder APIを使って仮のユーザーデータを取得します：

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

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const data = await response.json();
        setUsers(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();
  }, []);

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

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            <strong>{user.name}</strong> - {user.email}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

コードの解説

  1. 状態管理
  • users: APIから取得したユーザー情報を保存。
  • loading: データ取得中のローディング状態を管理。
  • error: エラー発生時にメッセージを保存。
  1. データフェッチの実装
    useEffect内で非同期関数fetchUsersを定義し、APIからデータを取得。
  2. ローディング中の表示
    loadingがtrueの間、Loading users...と表示。
  3. エラーの処理
    エラーが発生した場合、Error: エラーメッセージを表示。
  4. リストの描画
    APIから取得したユーザー情報をリストとして表示。各リストアイテムにはユーザーのnameとemailを表示。

結果

このアプリを実行すると、以下のような動作が確認できます：

  • 初回レンダリング時に「Loading users…」が表示されます。
  • データ取得成功時にユーザーリストが表示されます。
  • エラー発生時にエラーメッセージが表示されます。

拡張案

  • 検索機能の追加: フェッチしたデータに対して検索機能を追加する。
  • ページネーション: APIのデータ量が多い場合に、ページ分割を行う。
  • UIの改善: ローディング中にスピナーやアニメーションを表示。

この実例を参考に、Reactで非同期データフェッチを利用したアプリを自由に拡張してください。次のセクションでは、非同期データフェッチ時によくある課題とその解決策について解説します。

よくある課題とその解決策

非同期データフェッチをReactアプリで実装する際には、いくつかの課題に直面することがあります。このセクションでは、よくある課題とその解決策を具体的に解説します。

課題1: コンポーネントのアンマウント中の状態更新エラー

問題: データフェッチが完了する前にコンポーネントがアンマウントされると、状態更新時に警告が発生することがあります（例: “Can’t perform a React state update on an unmounted component”）。

解決策:
データフェッチ中にコンポーネントがアンマウントされたかどうかを確認するフラグを利用します。

useEffect(() => {
  let isMounted = true;

  const fetchData = async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      if (isMounted) {
        const data = await response.json();
        setData(data);
      }
    } catch (error) {
      if (isMounted) setError(error.message);
    }
  };

  fetchData();

  return () => {
    isMounted = false; // アンマウント時にフラグを変更
  };
}, []);

課題2: 複数回の無駄なデータフェッチ

問題: useEffectの依存配列が不適切な場合、同じデータフェッチが複数回実行される可能性があります。

解決策:
依存配列を正しく設定し、無駄なリレンダリングやフェッチを防ぎます。

useEffect(() => {
  fetchData();
}, [dependency]); // 依存配列に必要な値だけを含める

課題3: エラーハンドリングの一貫性

問題: フェッチ時のエラー処理が分散してしまい、コードが複雑化します。

解決策:
エラーハンドリングのロジックをカスタムフックやユーティリティ関数に統合します。

function useFetchWithErrorHandler(url) {
  const { data, error } = useFetch(url);
  if (error) console.error(`Error fetching ${url}:`, error);
  return { data, error };
}

課題4: レスポンスデータの処理

問題: APIのレスポンス形式が不確実な場合、想定外のエラーが発生することがあります。

解決策:
データの型チェックやバリデーションを実装します。ライブラリ（例: PropTypes、Zod）を利用すると便利です。

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  data: PropTypes.shape({
    id: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
  }),
};

課題5: UIのユーザーフレンドリーな更新

問題: フェッチ中のローディングやエラー表示がユーザーにとって不十分な場合があります。

解決策:
ローディングスピナーやエラーメッセージの表示を改善し、ユーザーが状況を把握しやすくします。

if (loading) return <Spinner />;
if (error) return <ErrorMessage message={error} />;

課題6: データフェッチのパフォーマンス

問題: 同じデータを何度も取得してしまい、パフォーマンスが低下します。

解決策:
データのキャッシュやメモ化を利用します。例えば、react-queryを使用してキャッシュを有効にすることで、不要なリクエストを削減できます。

import { useQuery } from 'react-query';

function DataComponent() {
  const { data, error, isLoading } = useQuery('dataKey', fetchData);
  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

まとめ

非同期データフェッチ時に直面する課題は多岐にわたりますが、これらの解決策を適用することで、より効率的で信頼性の高いアプリケーションを構築できます。次のセクションでは、実践的な演習問題を通じて、これらのスキルをさらに深めていきます。

演習問題

これまでの内容を活用して、実際に手を動かしながら非同期データフェッチの理解を深めるための演習問題を紹介します。

課題1: 基本的なデータフェッチの実装

以下の要件を満たすコンポーネントを作成してください：

  • JSONPlaceholder APIの/postsエンドポイントからデータを取得する。
  • 各投稿のtitleをリスト表示する。
  • データ取得中は「Loading…」を表示する。
  • エラーが発生した場合は、エラーメッセージを表示する。

ヒント:
useStateとuseEffectを使用して実装してください。

期待される出力

Loading...（ローディング中）
または
エラー: メッセージ（エラー発生時）
または
- Post Title 1
- Post Title 2
...

課題2: カスタムフックの作成

課題1をカスタムフック化してください。以下の要件を満たすuseFetchPostsフックを作成します：

  • APIエンドポイントを引数として受け取る。
  • データ、ローディング状態、エラーを返す。

フックの使用例:

const { data: posts, loading, error } = useFetchPosts('https://jsonplaceholder.typicode.com/posts');

課題3: フィルター機能を追加

課題1または課題2のコードを拡張して、以下の要件を追加してください：

  • ユーザーが投稿を検索できる入力フィールドを作成する。
  • 入力したキーワードに基づいて、表示される投稿をフィルタリングする。

ヒント:

  • 入力内容をuseStateで管理します。
  • Array.prototype.filterを活用して表示内容を更新します。

期待される動作:

  1. 入力フィールドにキーワードを入力すると、投稿のタイトルがリアルタイムで絞り込まれる。
  2. 入力が空の場合はすべての投稿が表示される。

課題4: ページネーションの実装

課題2のカスタムフックを拡張して、ページネーション機能を追加してください。以下の要件を満たすようにします：

  • 1ページあたり5件の投稿を表示する。
  • 「次へ」「前へ」ボタンでページを移動できる。
  • 現在のページ番号を表示する。

ヒント:

  • 現在のページをuseStateで管理します。
  • フェッチしたデータをページごとに分割します。

期待される動作:

[前へ] 1/5 [次へ]
- Post Title 1
- Post Title 2
...

課題5: React SuspenseとReact Queryの利用

課題2のカスタムフックを、react-queryを使った実装に置き換えてください。以下の要件を満たします：

  • react-queryのuseQueryを利用する。
  • Suspenseを活用してローディング状態を管理する。
  • フォールバックUIをカスタマイズする。

ヒント:

  • Suspenseのfallbackプロパティにローディングスピナーやプレースホルダーを渡します。

課題の達成方法

  1. 各課題を小さなステップに分解し、順番に実装してください。
  2. 必要に応じてデバッグやロギングを行い、動作を確認します。
  3. コードの再利用性や可読性を意識して、改善可能な部分があれば修正します。

これらの演習問題を解くことで、非同期データフェッチに関するスキルが実践的に身につきます。次のセクションでは、これまでの内容を簡単にまとめます。

まとめ

本記事では、Reactで非同期データフェッチを効率的に実装する方法について解説しました。useEffectとuseStateを使った基本的なデータフェッチから、エラーハンドリング、カスタムフックの作成、さらにSuspenseを活用した最適化まで、多角的に学ぶことができました。

非同期データフェッチのポイントは以下の通りです：

  • 基本的なフックの利用: useEffectとuseStateで非同期処理をシンプルに管理する。
  • 再利用可能なロジック: カスタムフックでフェッチ処理を分離して保守性を向上させる。
  • エラーハンドリングの徹底: ユーザーにわかりやすいエラー表示を提供する。
  • パフォーマンス最適化: Suspenseやデータキャッシュを活用し、無駄なリクエストを削減する。

Reactアプリケーションにおける非同期処理は、リアルタイム性や動的なUIの実現に欠かせない要素です。ここで学んだ知識を基に、実際のプロジェクトで応用し、自身のスキルをさらに高めてください。

React
React Hooks 非同期データフェッチ

コメント

コメントする

目次
  1. React Hooksの基礎知識
    1. 主要なReact Hooks
    2. Hooksのルール
    3. Hooksの利点
  2. 非同期データフェッチの概要
    1. 非同期処理の基本
    2. Reactでの非同期処理の重要性
    3. React Hooksと非同期処理
  3. useEffectを使った基本的なデータフェッチ
    1. 基本的な構文
    2. 非同期データフェッチの実装例
    3. ポイント解説
    4. 注意点
  4. useStateとの連携
    1. 状態管理の基本
    2. 例: 状態管理と非同期データフェッチ
    3. 重要なポイント
    4. ベストプラクティス
  5. データフェッチ時のエラーハンドリング
    1. 非同期処理におけるエラーの種類
    2. エラーハンドリングの実装例
    3. 主要なポイント
    4. UIにおけるエラー表示の工夫
    5. ベストプラクティス
  6. カスタムフックの作成
    1. カスタムフックの基本
    2. データフェッチ用カスタムフックの例
    3. カスタムフックの使用例
    4. カスタムフックを使う利点
    5. 拡張例
  7. Suspenseと非同期処理
    1. React Suspenseとは
    2. 非同期処理への応用
    3. Suspenseのメリット
    4. 注意点と制限
    5. 未来の展望
  8. 実例：APIデータを表示するアプリ
    1. 目標
    2. コード例
    3. コードの解説
    4. 結果
    5. 拡張案
  9. よくある課題とその解決策
    1. 課題1: コンポーネントのアンマウント中の状態更新エラー
    2. 課題2: 複数回の無駄なデータフェッチ
    3. 課題3: エラーハンドリングの一貫性
    4. 課題4: レスポンスデータの処理
    5. 課題5: UIのユーザーフレンドリーな更新
    6. 課題6: データフェッチのパフォーマンス
    7. まとめ
  10. 演習問題
    1. 課題1: 基本的なデータフェッチの実装
    2. 課題2: カスタムフックの作成
    3. 課題3: フィルター機能を追加
    4. 課題4: ページネーションの実装
    5. 課題5: React SuspenseとReact Queryの利用
    6. 課題の達成方法
  11. まとめ