ReactでAPIリクエストを効率化！データキャッシュとReact Queryの活用法

Reactアプリケーションを開発する際、APIリクエストの効率化は非常に重要な課題です。特に、同じデータを何度も取得する場面や、リクエストが多発する場合、アプリのパフォーマンスやユーザー体験に影響を及ぼす可能性があります。このような問題を解決するために、データキャッシュという技術が注目されています。本記事では、Reactアプリケーションにデータキャッシュを導入する方法を学び、React Queryを活用してAPIリクエストを最適化する手法を解説します。効率的なデータ管理を実現し、アプリの性能を大幅に向上させる方法を一緒に探っていきましょう。

APIリクエストの課題

APIリクエストは、Reactアプリケーションのデータ取得において中心的な役割を果たしますが、効率化を妨げるいくつかの課題があります。これらの課題を理解することで、適切な解決策を導入する重要性が見えてきます。

1. 重複したリクエストの発生

同じデータを複数のコンポーネントが必要とする場合、同一のAPIエンドポイントに何度もリクエストを送信することがあります。この重複は、ネットワーク負荷の増加や遅延の原因になります。

2. ネットワーク遅延によるパフォーマンス低下

APIリクエストの応答時間が遅い場合、ユーザーがデータを待たされることになります。特に低速なネットワーク環境では、この影響が顕著になります。

3. サーバーへの負担

高頻度のリクエストは、サーバーに大きな負荷をかける可能性があります。これにより、サーバーのレスポンスが遅くなる、またはダウンするリスクが生じます。

4. 状態管理の複雑化

APIから取得したデータを状態として管理する際、データのリフレッシュや同期、キャッシュの管理が複雑化し、バグが発生する可能性が高まります。

5. 不要なデータの再取得

一度取得したデータを再利用せず、再取得してしまうことは、パフォーマンス上の無駄につながります。

これらの課題に対応するため、データキャッシュの活用や効率的なリクエスト管理が必要です。次の章では、この解決策の一つであるデータキャッシュの基本概念について解説します。

データキャッシュの基本概念

データキャッシュは、アプリケーションの効率を高めるために用いられる重要な技術です。データを一時的に保存して再利用することで、無駄なAPIリクエストを削減し、アプリのパフォーマンス向上を実現します。

1. データキャッシュの仕組み

データキャッシュは、一度取得したデータをローカルメモリやブラウザのストレージ（例: メモリ、ローカルストレージ）に保存します。その後、同じデータを必要とする場合、キャッシュに保存されたデータを直接利用することで、APIへの追加リクエストを回避します。

2. データキャッシュのメリット

2.1. レスポンスの高速化

キャッシュからデータを取得することで、ネットワークを経由する必要がなくなり、データ表示の高速化が可能です。

2.2. ネットワーク負荷の軽減

リクエスト数を減らすことで、サーバーやネットワークにかかる負担が軽減されます。

2.3. オフラインサポート

キャッシュが利用できれば、ネットワーク接続が切れた場合でもデータを表示できるため、オフラインでの使用を可能にします。

3. データキャッシュが重要な理由

Reactアプリでは、複数のコンポーネントが同じデータを必要とすることがよくあります。このような場合、キャッシュを利用することでデータの一貫性を保ちながら効率的に管理できます。また、リクエスト頻度を削減することで、APIの利用制限（Rate Limit）を超えるリスクを減らすことができます。

次の章では、Reactアプリケーションでデータキャッシュを効率的に実現するツールであるReact Queryについて詳しく解説します。

React Queryの概要と利点

React Queryは、Reactアプリケーションにおけるデータフェッチングとキャッシュ管理を効率化するための強力なライブラリです。このツールを使うことで、APIリクエストを簡単かつ効果的に管理でき、パフォーマンスやユーザー体験を向上させることが可能になります。

1. React Queryとは

React Queryは、データの取得、キャッシュ、同期、更新を自動的に管理するライブラリです。特に以下のような状況で役立ちます：

• 頻繁なAPIリクエストの管理
• データのキャッシュと再利用
• リアルタイムデータの同期
• 状態管理の簡略化

2. React Queryの主な利点

2.1. 自動キャッシュ管理

React Queryは、取得したデータを自動的にキャッシュし、必要に応じて再利用します。これにより、同じデータを再取得する無駄を省き、アプリのパフォーマンスを向上させます。

2.2. データの同期と更新が容易

サーバーデータが変更された場合、React Queryは自動的にキャッシュを更新します。これにより、最新のデータが常にアプリに反映されます。

2.3. 効率的なエラーハンドリング

React Queryは、APIリクエストのエラーを簡単に処理できる仕組みを提供します。たとえば、リトライやエラーメッセージの表示を簡単に実装できます。

2.4. 状態管理の簡略化

React Queryはデータフェッチングに特化しており、Reduxなどの状態管理ライブラリと比べてセットアップや管理がシンプルです。

3. React Queryのユースケース

• ページネーションのあるデータの取得
• リアルタイムでのデータ更新（例: チャットアプリ、通知システム）
• データのプリフェッチ（事前取得）

React Queryを導入することで、Reactアプリケーションにおけるデータ取得と管理が大幅に効率化されます。次の章では、React Queryをプロジェクトにセットアップする具体的な手順を解説します。

React Queryのセットアップ

React Queryをプロジェクトに導入することで、データフェッチングやキャッシュ管理を簡単に実現できます。この章では、セットアップ手順を具体的に解説します。

1. React Queryのインストール

React Queryをプロジェクトに追加するには、以下のコマンドを実行します。

npm install @tanstack/react-query

また、React Query Devtoolsを使用すると、キャッシュや状態をデバッグするのが容易になります。開発環境に以下のコマンドで追加します。

npm install @tanstack/react-query-devtools

2. QueryClientの作成とプロバイダーの設定

React Queryを利用するには、QueryClientを作成し、アプリケーション全体にQueryClientProviderを設定します。

import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* アプリのコンポーネント */}
      <MainComponent />
    </QueryClientProvider>
  );
}

export default App;

3. Devtoolsの統合（オプション）

React Query Devtoolsを利用して、キャッシュやリクエストの状態を視覚的に確認できます。

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

<QueryClientProvider client={queryClient}>
  <MainComponent />
  <ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>;

4. React Queryの基本的な利用準備

セットアップが完了したら、次のステップでデータフェッチングを実装できます。React QueryのuseQueryフックを使用して、APIリクエストを簡単に管理できます。

セットアップが完了したReact Queryは、シンプルなコードで高度なデータ管理を実現できます。次の章では、具体的なデータフェッチングの実装例を紹介します。

データフェッチングの実装例

React Queryを使えば、データフェッチングが簡単に実装できます。この章では、基本的なデータ取得からキャッシュ管理までを含む実例を紹介します。

1. 基本的なデータ取得

以下は、React QueryのuseQueryフックを使った基本的なデータフェッチングの例です。

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

const fetchUsers = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

function UserList() {
  const { data, error, isLoading } = useQuery(['users'], fetchUsers);

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

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

ポイント解説

• useQuery: データを取得し、キャッシュや状態を管理します。
• 第一引数: クエリのキー（キャッシュの識別子）
• 第二引数: データフェッチ関数
• isLoading: データ取得中の状態を管理。
• error: エラーハンドリング用。
• data: 取得したデータ。

2. フェッチ結果の自動再取得

データが古くなったときに自動的に再取得する設定が可能です。

const { data } = useQuery(['users'], fetchUsers, {
  staleTime: 30000, // 30秒間はキャッシュを有効にする
  refetchOnWindowFocus: true, // ウィンドウにフォーカスが戻ったときに再取得
});

3. データのプリフェッチ

事前にデータを取得しておくことで、ユーザーの操作に対するレスポンスを向上させます。

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

function prefetchData() {
  const queryClient = useQueryClient();
  queryClient.prefetchQuery(['users'], fetchUsers);
}

4. ミューテーション（データの更新）

データの作成、更新、削除にはuseMutationを使用します。

import { useMutation, useQueryClient } from '@tanstack/react-query';

const addUser = async (newUser) => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(newUser),
  });
  if (!response.ok) {
    throw new Error('Failed to add user');
  }
  return response.json();
};

function AddUserForm() {
  const queryClient = useQueryClient();
  const mutation = useMutation(addUser, {
    onSuccess: () => {
      queryClient.invalidateQueries(['users']); // キャッシュをリフレッシュ
    },
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    const newUser = { name: 'New User' };
    mutation.mutate(newUser);
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Add User</button>
    </form>
  );
}

5. 結果

これらの例を組み合わせることで、効率的なデータフェッチングと更新をReactアプリケーションに簡単に統合できます。

次の章では、React Queryで設定できるキャッシュポリシーについて詳しく解説します。

キャッシュポリシーと設定

React Queryは強力なキャッシュ管理機能を備えており、データの保存や再取得に関する柔軟なポリシーを設定できます。この章では、React Queryで利用可能なキャッシュポリシーとその設定方法について解説します。

1. キャッシュポリシーの基本

キャッシュポリシーは、データをキャッシュに保持する期間や再取得のタイミングを制御します。適切なポリシーを設定することで、パフォーマンスを最大化できます。

1.1. `staleTime`

• キャッシュデータが「古い」と見なされるまでの時間を設定します。
• デフォルトは0で、取得直後から古いデータと見なされます。

例:

const { data } = useQuery(['users'], fetchUsers, {
  staleTime: 60000, // 60秒間データを新しい状態として維持
});

1.2. `cacheTime`

• キャッシュされたデータをメモリに保持する時間を指定します。
• デフォルトは5分間。設定した時間が経過するとキャッシュが破棄されます。

例:

const { data } = useQuery(['users'], fetchUsers, {
  cacheTime: 300000, // 5分間キャッシュを保持
});

2. 再取得のタイミング

2.1. `refetchOnWindowFocus`

• ウィンドウにフォーカスが戻ったときにデータを再取得するかを設定します。
• デフォルトはtrue。

例:

const { data } = useQuery(['users'], fetchUsers, {
  refetchOnWindowFocus: false, // フォーカス時に再取得しない
});

2.2. `refetchInterval`

• 一定間隔でデータを自動再取得するための設定です。リアルタイムデータの同期が必要な場合に便利です。

例:

const { data } = useQuery(['users'], fetchUsers, {
  refetchInterval: 10000, // 10秒ごとに再取得
});

3. 高度なキャッシュ設定

3.1. プリフェッチの有効活用

事前にデータをキャッシュに保存することで、ユーザー体験を向上させます。

queryClient.prefetchQuery(['users'], fetchUsers, {
  staleTime: 30000, // プリフェッチ後、30秒間新しい状態とする
});

3.2. キャッシュの手動管理

データの手動更新やリフレッシュが必要な場合、invalidateQueriesやsetQueryDataを利用します。

例:
キャッシュを無効化して再取得

queryClient.invalidateQueries(['users']);

キャッシュデータを手動更新

queryClient.setQueryData(['users'], (oldData) => [...oldData, newUser]);

4. ベストプラクティス

• 頻繁に更新されるデータには短いstaleTimeを設定。
• 長期間変わらないデータには長めのcacheTimeを設定。
• リアルタイムデータにはrefetchIntervalを活用。
• 不要な再取得を避けるために、ウィンドウフォーカスの設定を調整。

これらのキャッシュポリシーを適切に設定することで、効率的でスムーズなReactアプリケーションを実現できます。次の章では、APIエラーを効率的に処理する方法について解説します。

エラーハンドリングの工夫

APIリクエストを扱う際、エラーが発生することは避けられません。React Queryはエラーの処理を簡素化するための機能を提供しており、これを活用することで、ユーザーにストレスの少ないエクスペリエンスを提供できます。この章では、React Queryを用いたエラーハンドリングの工夫を紹介します。

1. 基本的なエラーハンドリング

React QueryのuseQueryフックは、エラーが発生した際の状態を自動的に管理します。errorプロパティを利用してエラー情報を取得し、適切なメッセージを表示できます。

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

const fetchUsers = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  if (!response.ok) {
    throw new Error('Failed to fetch users');
  }
  return response.json();
};

function UserList() {
  const { data, error, isLoading } = useQuery(['users'], fetchUsers);

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

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

2. リトライ機能

React Queryは、リクエストが失敗した場合に自動でリトライする機能を備えています。これにより、一時的なネットワークの問題を吸収することができます。

const { data, error, isLoading } = useQuery(['users'], fetchUsers, {
  retry: 3, // 最大3回リトライ
  retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30000), // リトライ間隔
});

3. グローバルエラーハンドリング

複数のクエリで共通するエラー処理が必要な場合、グローバルでのエラーハンドリングを設定できます。

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      onError: (error) => {
        console.error('Error fetching data:', error.message);
      },
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MainComponent />
    </QueryClientProvider>
  );
}

4. エラーを通知する

エラーをユーザーに通知するには、トースト通知ライブラリ（例: react-toastify）を組み合わせるのが効果的です。

import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

toast.configure();

const { data, error, isLoading } = useQuery(['users'], fetchUsers, {
  onError: (error) => {
    toast.error(`Error: ${error.message}`);
  },
});

5. エラーバウンダリの活用

Reactのエラーバウンダリを活用して、予期しないエラーが発生した場合でもアプリケーションがクラッシュしないようにすることも重要です。

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

export default function App() {
  return (
    <ErrorBoundary>
      <MainComponent />
    </ErrorBoundary>
  );
}

6. ベストプラクティス

• エラーの種類に応じたメッセージをユーザーに提供する。
• 再試行オプションをユーザーに提供する。
• トラブルシューティング情報を用意しておく。

React Queryのエラーハンドリング機能を活用することで、エラー発生時もスムーズなユーザー体験を維持できます。次の章では、React Queryを活用したページネーションや無限スクロールの実装例を紹介します。

応用例: ページネーションと無限スクロール

React Queryを活用することで、ページネーションや無限スクロールといった高度なデータ取得機能を簡単に実現できます。この章では、それぞれの実装方法について具体例を示します。

1. ページネーションの実装

ページごとにデータを取得し、ユーザーに少量ずつデータを表示する方法です。

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

const fetchPaginatedData = async (page) => {
  const response = await fetch(`https://api.example.com/items?page=${page}`);
  if (!response.ok) {
    throw new Error('Failed to fetch data');
  }
  return response.json();
};

function PaginatedList() {
  const [page, setPage] = useState(1);

  const { data, isLoading, isError, isPreviousData } = useQuery(
    ['items', page],
    () => fetchPaginatedData(page),
    {
      keepPreviousData: true, // 前のデータを保持しつつ新しいデータをロード
    }
  );

  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>Error loading data</p>;

  return (
    <div>
      <ul>
        {data.items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <button onClick={() => setPage((old) => Math.max(old - 1, 1))} disabled={page === 1}>
        Previous
      </button>
      <button onClick={() => setPage((old) => old + 1)} disabled={isPreviousData || !data.hasMore}>
        Next
      </button>
    </div>
  );
}

export default PaginatedList;

ポイント解説

• keepPreviousData: ページ変更時に前のデータを保持してスムーズに表示を更新。
• isPreviousData: 新しいデータがロードされるまで現在のデータを使用。

2. 無限スクロールの実装

無限スクロールは、ユーザーがスクロールするたびに次のデータを読み込む仕組みです。

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

const fetchInfiniteData = async ({ pageParam = 1 }) => {
  const response = await fetch(`https://api.example.com/items?page=${pageParam}`);
  if (!response.ok) {
    throw new Error('Failed to fetch data');
  }
  return response.json();
};

function InfiniteScrollList() {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = useInfiniteQuery(['items'], fetchInfiniteData, {
    getNextPageParam: (lastPage) => lastPage.nextPage ?? false, // 次のページがあれば返す
  });

  return (
    <div>
      {data?.pages.map((page, index) => (
        <ul key={index}>
          {page.items.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ))}
      <button
        onClick={() => fetchNextPage()}
        disabled={!hasNextPage || isFetchingNextPage}
      >
        {isFetchingNextPage ? 'Loading more...' : hasNextPage ? 'Load More' : 'No More Data'}
      </button>
    </div>
  );
}

export default InfiniteScrollList;

ポイント解説

• useInfiniteQuery: 複数のページを連続してフェッチするための専用フック。
• getNextPageParam: 次のページ番号を指定する関数。
• hasNextPage: 次のページがある場合にtrue。

3. ページネーションと無限スクロールの選択基準

• ページネーション: 明確な区切りが必要な場合（例: サーチ結果）。
• 無限スクロール: ユーザーがシームレスにデータを閲覧する必要がある場合（例: SNSフィード）。

4. ベストプラクティス

• データの取得を効率化するため、keepPreviousDataやuseInfiniteQueryを活用。
• 適切なローディングUIを実装し、ユーザー体験を向上。
• サーバー負荷を考慮してリクエスト数を最適化。

これらの方法を活用して、ユーザー体験を向上させるページネーションや無限スクロールを実現できます。次の章では、React Queryと他のツールとの比較について解説します。

他のツールとの比較と選択ポイント

React Queryはデータフェッチングやキャッシュ管理において強力な機能を提供しますが、同様の目的で使用される他のツールも存在します。この章では、React Queryを他のツールと比較し、プロジェクトに最適な選択をするためのポイントを解説します。

1. React Queryと他のツールの比較

1.1. Redux Toolkit Query

Redux Toolkit Queryは、Reduxを使用しているプロジェクトに自然に統合できるデータ取得ツールです。

特徴:

• Reduxのエコシステム内で動作。
• 状態管理とデータ取得を統合可能。
• キャッシュ管理は手動で設定が必要。

比較:
Reduxをすでに導入している場合、Redux Toolkit Queryが適しています。独立したデータ取得ライブラリを使いたい場合はReact Queryが便利です。

1.2. SWR (Stale-While-Revalidate)

SWRはNext.jsを開発したVercelが提供するデータフェッチライブラリです。

特徴:

• 軽量でシンプル。
• キャッシュ管理に特化。
• サーバーサイドレンダリング（SSR）に強い。

比較:
SWRは軽量でSSRに特化していますが、React Queryはより高度なキャッシュポリシーやミューテーション機能を提供します。

1.3. Apollo Client

GraphQL APIのデータフェッチとキャッシュ管理を提供するライブラリです。

特徴:

• GraphQLに特化。
• 詳細なキャッシュ管理が可能。
• REST APIには非対応。

比較:
Apollo ClientはGraphQL APIに最適化されています。一方、React QueryはREST APIや他のデータソースにも柔軟に対応します。

2. 選択ポイント

以下の基準を参考に、プロジェクトに最適なツールを選択しましょう。

2.1. プロジェクトで使用しているAPI

• REST APIを使用している場合: React QueryやSWR。
• GraphQL APIを使用している場合: Apollo Client。

2.2. 状態管理との統合

• Reduxを使用している場合: Redux Toolkit Query。
• 状態管理と分離したい場合: React QueryやSWR。

2.3. 学習コスト

• 学習コストを抑えたい場合: SWR（軽量でシンプル）。
• 高機能を必要とする場合: React Query（柔軟なキャッシュ管理やミューテーション機能）。

2.4. 特殊な要件

• サーバーサイドレンダリング（SSR）を多用する場合: SWRまたはReact Query（Next.jsとの組み合わせが効果的）。
• 複雑なキャッシュ要件がある場合: React Query。

3. React Queryが選ばれる理由

React Queryは、REST APIやGraphQLなどあらゆるデータソースに対応できる柔軟性と、自動キャッシュ管理、再取得機能、エラーハンドリングなどの豊富な機能を備えています。そのため、幅広いプロジェクトにおいて有力な選択肢となります。

次の章では、記事全体の内容を簡潔に振り返ります。

まとめ

本記事では、ReactアプリケーションにおけるAPIリクエストの効率化を実現するデータキャッシュの導入方法について解説しました。React Queryを活用することで、APIリクエストの最適化やデータ管理の簡略化が可能になります。

具体的には、React Queryのセットアップ方法、データフェッチングの実装例、キャッシュポリシーの設定、エラーハンドリングの工夫、ページネーションや無限スクロールといった応用例を紹介しました。また、他のツールとの比較を通じて、React Queryが幅広いプロジェクトに適した選択肢である理由も解説しました。

効率的なデータ管理は、ユーザー体験の向上とアプリケーションのパフォーマンス向上に直結します。React Queryを活用し、開発プロセスをさらにスムーズに進めていきましょう。