イントロダクション

近年のプロジェクトにおいて、データフェッチングに使用する技術を選定する過程で、Axios、SWR、およびTanStack Queryに自然と目が向きました。これらのライブラリは、それぞれで独自の特徴を持ち、プロジェクトの要件に基づいて選択する必要があります。

この記事では、各技術の概要、特性、利点、課題を包括的に比較し、実際のプロジェクトに対する適用性を検討していきます

技術の概要

Axios

Axiosは、シンプルながら強力なHTTPクライアントライブラリです。
以下の機能が特徴です：
PromiseベースのAPI: 非同期処理を簡潔に記述できる。
リクエストとレスポンスのインターセプト: 送信や受信データをカスタマイズできる。
JSONレスポンスを自動パースしますが、JSON以外のデータ形式に関しては手動での処理が必要です。
XSRF保護: セキュリティ機能を備えたクライアントサイドのサポート。
これにより、シンプルなリクエストの設定やHTTPヘッダーの管理が容易になります。
参考：https://axios-http.com/ja/docs/intro

SWR

SWRは、Reactアプリケーション向けのデータフェッチングライブラリで、「Stale-While-Revalidate」を基にしたアプローチを採用しています。
主な特徴は次の通りです：
自動的なキャッシュ管理: データの再取得を支援し、リクエストの重複を排除します。
リアルタイム体験: ユーザーへの即時の反応を可能にし、データが古くなると自動で再取得を行います。
SWR自体は基本的にはクライアントサイドで使用されますが、SSRやSSGのサポートはフレームワーク側の機能であり、SWR自体にもSSRを実現するためのAPIが提供されています。
TypeScriptおよびReact Nativeに対応: 型安全な開発環境を提供します。
参考：https://swr.vercel.app/ja

TanStack Query

TanStack Queryは、データフェッチングとキャッシングを統合したライブラリです。
以下が主な機能です：
強力なキャッシング機能: 同じクエリに対してキャッシュを利用することで、リクエストのオーバーヘッドを削減します。データの再取得のタイミングや条件を柔軟に設定できるキャッシュ戦略を提供します。これにより、不要なリクエストを避けることが可能です。
豊富なエラーハンドリング: 状態を追跡し、エラー検知を容易にします。
状態管理: 多様な状態を管理するためのフックを提供し、リファクタリングやランタイムの変化への柔軟性も含まれます。
参考：https://tanstack.com/query/latest/docs/framework/react/overview

比較ポイント

以下のポイントに基づき、Axios、SWR、TanStack Queryを比較します：

パフォーマンス

Axios: 単純なHTTPリクエストにおいては良好なパフォーマンスを発揮します。通常、キャッシングは行われないため、同じリクエストを繰り返す際にはリクエストのサイズや応答速度が影響を与えることがあります。

ただし、Axios自体にはキャッシング機能はないため、axios-cache-adapterなどの外部ライブラリを使用してキャッシングを実現する必要があります。
SWRとTanStack Query: SWRはstaleTimeという単一のパラメータでキャッシュの寿命を管理し、リクエスト数を減少させます。TanStack Queryは、staleTimeとcacheTimeの2つのパラメータを使い分け、より細かな制御が可能です。これらのライブラリはリアルタイムデータを扱う際に便利で、古くなったデータを検知して再取得を行う機能を提供していますが、具体的な実装には追加の設定が必要です。

使いやすさ

Axios: 非常にシンプルに使え、HTTPリクエストの実装が簡単で、直感的です。
SWR: 特定のAPIを呼び出して結果を取得するのは簡単ですが、リアルタイム性を求める場合は追加設定が必要です。
TanStack Query: 多機能であるため、初学者には学習コストが高く感じられるかもしれませんが、一度その機能を理解すれば、複雑なデータ管理が容易になります。

学習コスト

Axios: 簡単なHTTPリクエストの知識さえあれば使用可能ですので、最も学習コストは低いです。
SWR: フックの返り値は比較的シンプルですが、いくつかのオプションの理解が必要です。あまり意識せずに使うことはできますが、その機能を最大限に活かすためには一部の知識が必要です。
TanStack Query: その多機能性から、初見での利用は難しいかもしれませんが、一度習得すれば、複雑な状態管理が楽になります。

互換性

Axiosは併用可能で、Axiosを使ってリクエストを行うSWRやTanStack Queryの実装が可能です。これにより、HTTPリクエスト管理を柔軟に選択できます。

導入事例

Axios
ユースケース: お手軽にHTTPリクエストを行いたいとき。特に小規模なプロジェクトやバックグラウンドリクエスト、APIとのシンプルな通信が必要な場合に適しています。

useEffect(() => {
    const fetchData = async () => {
        try {
            const response = await axios.get("<http://localhost:3100/item/1>");
            setData(response.data);
        } catch (error) {
            console.error(error);
            setError(true);
        } finally {
            setLoading(false);
        }
    };
    fetchData();
}, [page]);

SWR
ユースケース: リアルタイム性が必要なアプリケーション（チャットアプリなど）や、データの取得と表示の効率的再利用が求められるシーンに適しています。例えば、ユーザーのアクションに応じて変更されるデータを即時に表示する必要がある場合、SWRが最適です。

const { data, error } = useSWR(
  "<http://localhost:3100/item/1>",
  (url) => fetch(url).then((res) => res.json())
);

TanStack Query
ユースケース: 複雑なデータ構造を持つアプリケーションや、リダクションやミューテーションを必要とする場合に強力です。たとえば、データのCRUD操作を行いながら、状態を一元管理し、UIの整合性を保つ際にはTanStack Queryが効果を発揮します。

const { data, error, isLoading } = useQuery({
  queryKey: ["item"],
  queryFn: async () => {
    const response = await fetch("<http://localhost:3100/item/1>");
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    return response.json();
  },
});

まとめ

それぞれのライブラリの特徴は以下の通りです：
Axios: シンプルで、HTTPリクエストを容易に行える。デフォルトではキャッシング機能を持たず、リフェッチ機能も実装されていないが、別途ライブラリや工夫を使うことでキャッシングを実現可能である。
SWR: 高速で軽量なデータ取得機能を持ち、リアルタイム応答が求められるユーザーインターフェースに最適で、キャッシング機能も内蔵しているため、効率的なデータの再利用が可能です。
TanStack Query: 設定は初期学習コストがやや高いが、利用することで得られる機能の豊富さやエラーハンドリングの強力さが、長期的には開発効率を向上させることに繋がる。
最終的には、プロジェクトの要件に応じてこれらのライブラリを適切に選定し、開発効率とユーザー体験の最大化を図ることが重要です。

お悩みご相談ください

参考リンク

• Axios Documentation
• SWR Documentation
• TanStack Query Documentation