Reactでのデータ取得：fetch・axios・useSWRの使い分け

私は最近、ReactでAPIとやり取りする学習を進めています。その過程で最初にぶつかる疑問が、「fetch・axios・useSWR、どれを使えばいいの？」という問いではないでしょうか。

フロントエンド開発ではデータ取得が基本なので、この選択は意外と頻繁に直面します。今回は、私が考えた使い分けと、それぞれのメリット・デメリットをまとめてみます。

1. fetch：標準APIの手軽さ

まずは fetch です。ブラウザに標準搭載されているAPIなので、ライブラリを追加せずに使えるのが最大の利点です。

fetch(‘/api/data’)

  .then(res => res.json())

  .then(data => console.log(data))

コード自体はシンプルですが、いくつか注意点があります。

・レスポンスは Response オブジェクトで返ってくるので、res.json() を自分で呼ぶ必要がある

・エラーハンドリングも少し自分で書く必要がある

・追加機能（タイムアウト、リトライ、インターセプターなど）は自分で組むか別ライブラリが必要

学習や簡単なプロトタイプなら手軽に使えますが、業務レベルで大量のAPI通信を扱う場合にはやや面倒な印象です。

2. axios：業務での鉄板

次に axios です。フロントエンド業務で最も使われるHTTPクライアントライブラリです。

import axios from ‘axios’;

async function fetchData() {

  try {

    const res = await axios.get(‘/api/data’);

    console.log(res.data);

  } catch (err) {

    console.error(err);

  }

}

fetchData();

特徴は以下の通りです。

・デフォルトでレスポンスを JSON に変換してくれる

・エラーハンドリングがわかりやすい

・タイムアウト、リトライ、インターセプターなど、業務で必要な機能が豊富

・Node.js でも使える

fetchと比べると、シンプルに書ける・拡張性が高いという点で圧倒的に便利です。

そのため、多くの現場では「業務でAPI通信するなら axios がほぼ標準」と言ってもいいのかなと思います。

3. useSWR：React用の便利フック

最後に useSWR です。React専用のデータ取得フックで、キャッシュ・自動再検証・リフェッチなどが組み込みで便利に使えます。

import useSWR from ‘swr’;

import axios from ‘axios’;

const fetcher = url => axios.get(url).then(res => res.data);

function MyComponent() {

  const { data, error, isLoading } = useSWR(‘/api/data’, fetcher);

  if (isLoading) return <p>Loading…</p>;

  if (error) return <p>Error!</p>;

  return <div>{JSON.stringify(data)}</div>;

}

特徴：

・キャッシュしてくれる

・自動で再取得（revalidation）してくれる

・React Hooks の形で自然に書ける

ただし、必ずしもキャッシュや自動再取得が嬉しい場面ばかりではないのが注意点です。

単純なリクエストや、最新データを必ず取得したい場合には、むしろ余計な挙動になってしまうこともあります。

4. まとめ：結局どう使い分ける？

私の学習や現場での経験を踏まえると、次のように整理できます。

ツール	特徴	向いている場面
fetch	標準API。ライブラリ不要。レスポンスを自分で処理する必要あり。	学習・プロトタイプ・簡単なデータ取得。
axios	デフォルトでJSON化。エラー処理もわかりやすい。拡張性が高い。	業務開発・本格的なAPI通信。
useSWR	React専用。キャッシュ・自動リフェッチ付き。	Reactコンポーネントでの効率的なデータ取得。キャッシュが有用な場合。

結論としては、手軽さなら fetch、業務なら axios、Reactなら候補に useSWR も考えてみても良いかな、という感じでしょうか。ただしキャッシュが不要な場合は結局 axios が一番使いやすいという印象です。

5. 個人的な学び

今回整理してみて感じたことは、同じ「データ取得」でも用途や規模で最適な選択肢が変わるということです。

・簡単な学習用やプロトタイプでは fetch の手軽さが活きる

・本番や業務レベルでは axios の安定感・便利さが圧倒的

・React に最適化されたフックは便利だけど、万能ではない

こうした特徴を理解して使い分けることで、学習効率や開発効率を向上させることができると感じています。