MENU
  1. ホーム
  2. React
  3. ReactのuseSWRでデータフェッチングを簡単化する方法を徹底解説

ReactのuseSWRでデータフェッチングを簡単化する方法を徹底解説

React

データフェッチングは、Reactを使用したフロントエンド開発において、非常に重要な役割を果たします。しかし、通常のデータフェッチングでは、状態管理やエラーハンドリング、再レンダリングの最適化といった課題が発生し、コードが複雑化しがちです。こうした課題を解決するために登場したのが、React用のデータフェッチングライブラリ「useSWR」です。本記事では、useSWRを使ったシンプルかつ効率的なデータフェッチングの方法について、基本から応用までを徹底解説します。

目次

useSWRとは？


useSWRは、React用に設計された軽量かつ柔軟なデータフェッチングライブラリです。SWRとは「Stale-While-Revalidate」の略で、データのキャッシュを活用しつつ、バックグラウンドで最新データを取得する仕組みを指します。このアプローチにより、UIの応答性が向上し、効率的なデータ管理が可能になります。

useSWRの特徴

  • シンプルなAPI: フックベースの設計で簡単に利用可能です。
  • 自動キャッシング: 取得したデータを自動的にキャッシュし、必要に応じて再利用します。
  • リアルタイム更新: データの再検証（revalidation）により、最新の状態を保持します。
  • 優れたエラーハンドリング: エラー時の挙動も簡単に管理できます。

ReactでuseSWRを使う利点


useSWRを利用することで、以下のようなReact開発の課題を解消できます。

  • 冗長なデータフェッチングコードの削減
  • 状態管理とデータ取得の統合
  • パフォーマンスの最適化

このように、useSWRはReactアプリケーションでのデータ管理を効率化する強力なツールです。

useSWRのインストールとセットアップ

useSWRを使用するためには、まずプロジェクトにライブラリをインストールする必要があります。ここでは、インストールから基本的なセットアップまでの手順を解説します。

インストール手順


useSWRはnpmやyarnを使用して簡単にインストールできます。以下のコマンドを実行してください。

npm install swr

または

yarn add swr

基本的なセットアップ


useSWRはReactのフックとして機能するため、通常の関数コンポーネント内で使用します。以下は最小限のセットアップ例です。

import useSWR from 'swr';

// データフェッチャー関数
const fetcher = (url) => fetch(url).then((res) => res.json());

function App() {
  const { data, error } = useSWR('/api/data', fetcher);

  if (error) return <div>エラーが発生しました</div>;
  if (!data) return <div>読み込み中...</div>;

  return (
    <div>
      <h1>データ一覧</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

コード解説

  1. fetcher関数
  • APIからデータを取得するための関数を定義します。
  1. useSWRフック
  • 第一引数にAPIのURL、第二引数にfetcher関数を渡します。useSWRがデータの取得とキャッシュ管理を行います。
  1. 状態管理
  • dataは取得したデータ、errorはエラー情報を格納します。これにより、コンポーネント内での状態管理が簡潔になります。

useSWRをプロジェクトに組み込むことで、Reactアプリケーションのデータフェッチングが驚くほど効率的になります。

シンプルなデータフェッチングの実装例

useSWRを使うと、データフェッチングが驚くほど簡単に実装できます。ここでは、基本的な例を示し、useSWRの使い方を具体的に解説します。

シンプルなデータフェッチング例


以下は、useSWRを利用した最小限のデータフェッチングコードです。

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

function UserList() {
  const { data, error } = useSWR('/api/users', fetcher);

  if (error) return <div>エラーが発生しました。</div>;
  if (!data) return <div>読み込み中...</div>;

  return (
    <div>
      <h1>ユーザー一覧</h1>
      <ul>
        {data.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

コード解説

  1. fetcher関数
  • fetch APIを使用して、指定したURLからJSONデータを取得します。
  1. useSWRの呼び出し
  • 第一引数にリソースのURL（例: /api/users）、第二引数にフェッチャー関数を指定します。
  • useSWRは、取得したデータをキャッシュし、エラーやデータの状態を管理します。
  1. 状態チェック
  • errorが存在する場合はエラーメッセージを表示します。
  • dataがまだ取得されていない場合は、ローディングメッセージを表示します。
  1. データ表示
  • 取得済みデータ（data）をリストとして描画します。

この例の利点

  • 簡潔なコード: 状態管理とデータフェッチングが統合されており、従来のuseEffectを使った方法よりも簡単です。
  • リアクティブなデータ更新: useSWRはバックグラウンドで自動的にデータを再検証し、常に最新の状態を保持します。

この基本例を理解することで、useSWRのシンプルさと効率性を実感できるはずです。次に進むことで、キャッシュやエラー処理、さらなるカスタマイズについて学べます。

SWRのキャッシュ機能とその利点

useSWRの強力な特徴の一つにキャッシュ機能があります。データフェッチングの結果をキャッシュすることで、不要なリクエストを減らし、アプリケーションのパフォーマンスを向上させます。このセクションでは、SWRのキャッシュ機能の仕組みとその利点について解説します。

SWRのキャッシュ機能の仕組み


useSWRは、フェッチしたデータをキー（通常はリソースのURL）に基づいてキャッシュに保存します。このキャッシュは以下の特徴を持っています。

  1. キーの一貫性
  • 同じURLに対するリクエストはキャッシュを参照するため、不要なネットワーク通信を回避します。
  1. キャッシュの再利用
  • コンポーネントが再レンダリングされても、キャッシュされたデータが即座に表示され、ユーザーエクスペリエンスが向上します。
  1. 再検証
  • キャッシュされたデータが表示される間に、バックグラウンドで新しいデータが取得され、キャッシュが自動的に更新されます（Stale-While-Revalidate）。

キャッシュ機能のコード例


以下は、キャッシュがどのように動作するかを示す例です。

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

function Profile() {
  const { data, error } = useSWR('/api/profile', fetcher);

  if (error) return <div>エラーが発生しました。</div>;
  if (!data) return <div>読み込み中...</div>;

  return (
    <div>
      <h1>プロフィール情報</h1>
      <p>名前: {data.name}</p>
      <p>メール: {data.email}</p>
    </div>
  );
}

function Settings() {
  const { data } = useSWR('/api/profile', fetcher);

  if (!data) return <div>読み込み中...</div>;

  return (
    <div>
      <h1>設定</h1>
      <p>現在の名前: {data.name}</p>
    </div>
  );
}

コード解説

  • 共通キャッシュの活用: ProfileとSettingsコンポーネントの両方が同じURL（/api/profile）を参照していますが、キャッシュが共有されるため、リクエストは1回だけ行われます。
  • 即時表示: キャッシュされたデータがすぐに表示されるため、ユーザーが遅延を感じることはありません。

キャッシュ機能の利点

  • パフォーマンス向上: 不要なリクエストを削減し、ネットワーク負荷を軽減します。
  • ユーザー体験の向上: キャッシュされたデータを即座に表示することで、スムーズな操作感を実現します。
  • コードの簡素化: 独自のキャッシュロジックを実装する必要がなく、効率的にデータ管理を行えます。

useSWRのキャッシュ機能を活用することで、リアクティブなデータ管理が非常に簡単になります。特に、複数のコンポーネント間で同じデータを共有する場合に効果を発揮します。

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

useSWRを利用する際、エラーハンドリングはアプリケーションの堅牢性を保つために欠かせない要素です。このセクションでは、useSWRを用いたエラー処理の方法と、実践的なベストプラクティスを解説します。

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


useSWRはエラーが発生した場合、その情報をerrorオブジェクトに格納します。このerrorを活用して、UIにエラーメッセージを表示するシンプルな例を示します。

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => {
  if (!res.ok) {
    throw new Error('データの取得に失敗しました');
  }
  return res.json();
});

function App() {
  const { data, error } = useSWR('/api/data', fetcher);

  if (error) return <div>エラー: {error.message}</div>;
  if (!data) return <div>読み込み中...</div>;

  return (
    <div>
      <h1>データ一覧</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

コード解説

  • カスタムエラーメッセージ: fetcher内でレスポンスステータスをチェックし、適切なエラーメッセージをスローします。
  • エラー表示: errorオブジェクトの内容をUIに直接反映します。

高度なエラーハンドリング


エラーの種類や状態に応じて、より柔軟に処理することも可能です。

function App() {
  const { data, error } = useSWR('/api/data', fetcher);

  if (error) {
    if (error.message === 'Network Error') {
      return <div>ネットワークエラーが発生しました。再試行してください。</div>;
    }
    return <div>エラー: {error.message}</div>;
  }

  if (!data) return <div>読み込み中...</div>;

  return (
    <div>
      <h1>データ一覧</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

この例でのポイント

  • エラーの種類に応じたメッセージ: ネットワークエラーやサーバーエラーなど、エラーの性質に応じたメッセージを表示します。
  • ユーザーの再試行を促す: ユーザーが問題解決の手段を取れるようにサポートします。

再試行の設定


useSWRには、エラー発生時に自動的に再試行する機能があります。この再試行の挙動は、オプションでカスタマイズできます。

const { data, error } = useSWR('/api/data', fetcher, {
  onErrorRetry: (error, key, config, revalidate, { retryCount }) => {
    // ネットワークエラー以外は再試行しない
    if (error.message !== 'Network Error') return;
    // 再試行回数が3回を超えたら停止
    if (retryCount >= 3) return;
    // 再試行
    setTimeout(() => revalidate({ retryCount }), 5000);
  },
});

ポイント

  • onErrorRetryコールバック: 再試行の条件や回数を制御できます。
  • カスタムロジック: 特定のエラーに対してのみ再試行するなど、柔軟な設定が可能です。

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

  1. ユーザーへの明確なフィードバック
  • エラーメッセージを表示し、状況を伝える。
  1. 再試行の実装
  • ユーザー操作や自動での再試行をサポートする。
  1. ロギングと監視
  • エラーをログに記録し、問題を早期に発見・解決する。

useSWRのエラーハンドリング機能を活用することで、ユーザーにとって使いやすい、信頼性の高いアプリケーションを構築できます。

再検証機能とデータの更新

useSWRの再検証機能（revalidation）は、リアルタイムでデータを更新し、最新状態を保つための重要な機能です。このセクションでは、再検証の仕組みと効果的な使い方について解説します。

再検証機能の仕組み


useSWRは以下の条件でデータの再検証を自動的に行います。

  1. コンポーネントのマウント時
  • コンポーネントが初めて表示される際にデータを取得します。
  1. フォーカス時
  • ユーザーがタブやウィンドウを再度アクティブにしたときにデータを更新します。
  1. インターバル時
  • 一定間隔でバックグラウンドでデータを再取得します（ポーリング）。

基本的な再検証の実装例


以下は、再検証の動作を示す簡単な例です。

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

function App() {
  const { data, error } = useSWR('/api/data', fetcher, {
    refreshInterval: 5000, // 5秒ごとに再検証
  });

  if (error) return <div>エラーが発生しました。</div>;
  if (!data) return <div>読み込み中...</div>;

  return (
    <div>
      <h1>リアルタイムデータ</h1>
      <p>最新データ: {data.value}</p>
    </div>
  );
}

export default App;

コード解説

  • refreshIntervalオプション
  • 5秒ごとにバックグラウンドでデータを取得し、UIを更新します。
  • リアルタイムデータの表示
  • 最新データが自動的に表示されます。

再検証の手動トリガー


useSWRでは手動で再検証を行うことも可能です。以下は、ボタン操作でデータを更新する例です。

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

function App() {
  const { data, error, mutate } = useSWR('/api/data', fetcher);

  if (error) return <div>エラーが発生しました。</div>;
  if (!data) return <div>読み込み中...</div>;

  return (
    <div>
      <h1>データ更新</h1>
      <p>現在の値: {data.value}</p>
      <button onClick={() => mutate()}>更新する</button>
    </div>
  );
}

export default App;

コード解説

  • mutate関数
  • 再検証を手動でトリガーします。
  • 即時更新
  • 必要に応じてユーザー操作でデータを最新状態にできます。

再検証機能の利点

  1. 常に最新データを表示
  • アプリケーションの状態がリアルタイムで更新されるため、ユーザー体験が向上します。
  1. データの整合性を維持
  • 定期的な再検証により、古いデータによる問題を防ぎます。
  1. 柔軟なトリガー
  • 自動再検証と手動再検証を使い分けられるため、ユースケースに応じた実装が可能です。

useSWRの再検証機能を活用することで、動的なデータを効率よく管理し、アプリケーションの信頼性を向上させることができます。

useSWRを活用した複雑なAPI連携

useSWRは、複数のAPIを連携させた複雑なデータ取得シナリオにも適しています。このセクションでは、API間の依存関係を考慮したデータフェッチングや、同時並行で複数のAPIを呼び出す方法を解説します。

API間の依存関係を考慮したデータフェッチング


あるAPIのレスポンスを次のAPIリクエストに使用するケースを例に取ります。

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

function App() {
  const { data: user, error: userError } = useSWR('/api/user', fetcher);

  const { data: posts, error: postsError } = useSWR(
    user ? `/api/posts?userId=${user.id}` : null,
    fetcher
  );

  if (userError || postsError) return <div>エラーが発生しました。</div>;
  if (!user || !posts) return <div>読み込み中...</div>;

  return (
    <div>
      <h1>{user.name}さんの投稿</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

コード解説

  • 依存関係を明示
  • userデータが取得されるまで、postsのフェッチは実行されません（nullを返すことで制御）。
  • 効率的なデータ取得
  • 必要なデータのみをフェッチすることで、無駄なリクエストを削減します。

複数APIの並列フェッチ


複数のAPIから独立したデータを同時に取得する場合、useSWRの機能を活用して並列処理を実現できます。

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

function App() {
  const { data: user, error: userError } = useSWR('/api/user', fetcher);
  const { data: notifications, error: notificationsError } = useSWR(
    '/api/notifications',
    fetcher
  );

  if (userError || notificationsError) return <div>エラーが発生しました。</div>;
  if (!user || !notifications) return <div>読み込み中...</div>;

  return (
    <div>
      <h1>{user.name}さんのダッシュボード</h1>
      <p>通知数: {notifications.length}</p>
    </div>
  );
}

export default App;

コード解説

  • 独立したAPI呼び出し
  • 複数のuseSWRフックを使用して、非依存データを並行して取得します。
  • 非同期処理の最適化
  • データ取得時間を短縮し、効率的なパフォーマンスを実現します。

カスタムフックを利用した再利用性の向上


API連携のロジックをカスタムフックとして抽象化することで、コードの再利用性が向上します。

function useUser() {
  return useSWR('/api/user', fetcher);
}

function usePosts(userId) {
  return useSWR(userId ? `/api/posts?userId=${userId}` : null, fetcher);
}

function App() {
  const { data: user } = useUser();
  const { data: posts } = usePosts(user?.id);

  if (!user || !posts) return <div>読み込み中...</div>;

  return (
    <div>
      <h1>{user.name}さんの投稿</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

コード解説

  • カスタムフック
  • useUserとusePostsを作成し、データ取得ロジックを分離。
  • シンプルなコンポーネント
  • アプリケーションのロジックが簡潔になり、保守性が向上。

複雑なAPI連携での注意点

  1. 依存関係を適切に管理する
  • 次のAPI呼び出しが前のレスポンスに依存する場合、フェッチタイミングを制御する。
  1. パフォーマンスを意識する
  • 並列フェッチで無駄なリクエストを減らし、レスポンス時間を最小化する。
  1. エラーハンドリングを統一する
  • カスタムフック内でエラー処理を共通化することで、コードの簡潔さを保つ。

useSWRを活用することで、複雑なAPI連携も効率的かつ簡潔に実現できます。これにより、大規模アプリケーションでもスケーラブルなデータフェッチングが可能になります。

useSWRを活用した実践例

ここでは、実際のアプリケーションでuseSWRを活用し、リアルタイムデータの表示やAPI連携を効率化する方法を実践的な例で紹介します。この例を通じて、useSWRの実用性と柔軟性を深く理解できるでしょう。

チャットアプリでのリアルタイムメッセージ更新


useSWRを使用して、新しいメッセージが投稿されるたびにデータを更新するリアルタイムチャットアプリの例です。

import useSWR from 'swr';
import { useState } from 'react';

const fetcher = (url) => fetch(url).then((res) => res.json());

function Chat() {
  const { data: messages, error, mutate } = useSWR('/api/messages', fetcher, {
    refreshInterval: 3000, // 3秒ごとにデータを更新
  });
  const [newMessage, setNewMessage] = useState('');

  const sendMessage = async () => {
    await fetch('/api/messages', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ text: newMessage }),
    });
    setNewMessage('');
    mutate(); // データを即時更新
  };

  if (error) return <div>エラーが発生しました。</div>;
  if (!messages) return <div>読み込み中...</div>;

  return (
    <div>
      <h1>チャットアプリ</h1>
      <div>
        {messages.map((msg) => (
          <div key={msg.id}>{msg.text}</div>
        ))}
      </div>
      <input
        type="text"
        value={newMessage}
        onChange={(e) => setNewMessage(e.target.value)}
      />
      <button onClick={sendMessage}>送信</button>
    </div>
  );
}

export default Chat;

コード解説

  • リアルタイム更新
  • refreshIntervalオプションを使用して3秒ごとに新しいデータを取得します。
  • 即時データ更新
  • mutate関数を呼び出して、新しいメッセージが投稿された直後にデータを更新します。

ダッシュボードでの複数APIの統合


次に、複数のAPIからデータを取得し、ダッシュボードに統合表示する例を示します。

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

function Dashboard() {
  const { data: userStats } = useSWR('/api/user-stats', fetcher);
  const { data: salesStats } = useSWR('/api/sales-stats', fetcher);
  const { data: notifications } = useSWR('/api/notifications', fetcher);

  if (!userStats || !salesStats || !notifications) return <div>読み込み中...</div>;

  return (
    <div>
      <h1>ダッシュボード</h1>
      <div>
        <h2>ユーザー統計</h2>
        <p>アクティブユーザー: {userStats.activeUsers}</p>
      </div>
      <div>
        <h2>売上統計</h2>
        <p>総売上: {salesStats.totalSales}</p>
      </div>
      <div>
        <h2>通知</h2>
        {notifications.map((note) => (
          <div key={note.id}>{note.message}</div>
        ))}
      </div>
    </div>
  );
}

export default Dashboard;

コード解説

  • 複数のデータソースを統合
  • useSWRを複数回使用して、異なるAPIからデータを取得します。
  • 効率的な状態管理
  • 各APIのフェッチ状態を個別に管理し、ローディング表示を簡潔に実現します。

useSWRの実践例での利点

  1. シンプルなコード構造
  • useSWRを活用することで、状態管理やデータ取得ロジックが簡潔になります。
  1. リアルタイムデータ更新
  • refreshIntervalやmutateを使用して、リアルタイム性が求められるアプリケーションに対応可能です。
  1. スケーラビリティ
  • 複数のデータソースを統合しつつ、パフォーマンスを最適化できます。

これらの例を参考に、useSWRをプロジェクトに活用することで、リアルタイム性が高く、ユーザビリティに優れたアプリケーションを構築できます。

まとめ

本記事では、Reactのデータフェッチングを簡素化するuseSWRの基本から応用までを解説しました。useSWRを利用することで、以下の利点が得られます：

  • シンプルなデータフェッチング：フェッチャー関数とURLを指定するだけで、高度なデータ管理が可能。
  • キャッシュと再検証：リアルタイム更新やパフォーマンス向上が自動的に実現されます。
  • 柔軟性と拡張性：複雑なAPI連携やリアルタイムアプリケーションの構築も容易。

useSWRは、効率的なデータ取得と状態管理を実現するための強力なツールです。この記事で紹介した実践例やベストプラクティスを参考に、自身のReactプロジェクトに組み込んでみてください。効率的で信頼性の高いアプリケーション開発が可能になります。

React
React データフェッチング useSWR

コメント

コメントする

目次