axiosとfetch、どっちを選ぶ？現場エンジニアの徹底比較ガイド

「ReactやTypeScriptでAPI連携していると、fetchのコードがやたら長くなる…そんな経験はありませんか？」
私たちが日々向き合うAPI実装。エラーハンドリングで毎回悩んだり、「本当にこの書き方がベストなのか？」と迷うことも多いですよね。
特に4xx/5xxエラーやTypeScriptの型付けに“もやもや”しがち――。
コードレビューで「axios使えば簡潔だよ」と先輩に言われたものの、
「依存を増やすリスクを取ってまで導入する価値はある？」と判断に迷う方も多いはずです。

（TypeScriptの基礎や型付けについては『TypeScriptとは？JavaScriptとの違いを初心者向けにわかりやすく解説』をご参照ください）

用語解説：React
Facebookが開発したUI構築用JavaScriptライブラリ。コンポーネント単位でWebアプリを効率的に作れる。

用語解説：TypeScript
JavaScriptに型付け機能を加えた言語。型安全性が高く、大規模開発や保守に強い。

用語解説：API
アプリやサービス同士がデータや機能をやり取りするための「窓口」となる仕組み。

用語解説：エラーハンドリング
プログラム実行中のエラー発生時に、適切な処理や通知を行う仕組み。

用語解説：4xx/5xxエラー
HTTP通信で発生するエラー。4xxはクライアント側、5xxはサーバー側の問題を示す。

用語解説：依存ライブラリ
プロジェクトで利用する外部のプログラム群。導入数が増えると管理やバンドルサイズに影響。

まず結論：axios vs fetch 比較早見表

ポイント：axiosはfetchの煩雑さを開発者フレンドリーにラップ。特にエラーハンドリングと共通処理で大きな差が出ます。

用語解説：fetch
ブラウザ標準のHTTP通信API。追加インストール不要で軽量だが、エラー処理や拡張性はやや限定的。

用語解説：axios
JavaScript/TypeScript向けの人気HTTPクライアントライブラリ。直感的な構文と多機能が特長。

用語解説：インターセプター
リクエストやレスポンスの共通処理を自動で挿入できる仕組み。認証やエラーハンドリングの一元化に便利。

用語解説：バンドルサイズ
Webアプリに含まれる全ファイルの合計容量。大きいと初回表示が遅くなる。

1分診断：あなたのプロジェクトにaxiosは必要？

Q1. 外部ライブラリの依存は最小にしたい？

• YES → fetch推奨（標準APIで軽量。エラー処理の冗長さは許容する必要あり）
• NO → Q2へ

Q2. 4xx/5xx系エラーを共通でシンプルに処理したい？

• YES → axios強く推奨（HTTPエラーもcatchできるためバグ防止に有効）
• NO → Q3へ

Q3. 認証トークン付与など共通処理をまとめたい？

• YES → axios強く推奨（インターセプターで一括管理できる）
• NO → fetchでも可（GET中心や共通処理不要なら十分）

診断結果：エラー処理・共通処理で迷うならaxiosが有利。単純なリクエストだけならfetchでOK。

5つの実践コードで理解する：axiosとfetchの違い

1. 構文の簡潔さ ― 基本のGETリクエスト

fetchの場合

import { useState, useEffect } from 'react';
type User = { id: number; name: string; };

const UserProfileWithFetch = () => {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    fetch('https://api.example.com/user/1')
      .then(res => {
        if (!res.ok) throw new Error('Network response was not ok');
        return res.json();
      })
      .then(data => setUser(data))
      .catch(err => console.error('Fetch error:', err));
  }, []);
};

axiosの場合

import { useState, useEffect } from 'react';
import axios from 'axios';
type User = { id: number; name: string; };

const UserProfileWithAxios = () => {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    axios.get<User>('https://api.example.com/user/1')
      .then(res => setUser(res.data))
      .catch(err => console.error('Axios error:', err));
  }, []);
};

解説：fetchはエラーチェック＋JSON変換の2ステップ。axiosはワンステップ。

（APIの基礎や現場での使い方については『APIとは？SES現場で役立つ基礎〜Postman活用まで完全ガイド』をご参照ください）

2. エラーハンドリング ― “res.ok”不要！統一catchの安心感

• fetchは「ネットワークエラーのみ」catch対象。404/500等のHTTPエラーは明示的なチェック必須。
• axiosは4xx/5xxもcatchで拾えるため、バグの温床が減ります。

3. TypeScriptとの連携 ― 型安全もaxiosが一歩上

fetch：

fetch(...).then(res => res.json()).then(data => setUser(data as User));

axios：

axios.get<User>('...').then(res => setUser(res.data));

解説：axiosはジェネリクス型で型安全＆省コード。

用語解説：ジェネリクス
型をパラメータ化し、柔軟かつ型安全に関数やクラスを扱えるTypeScriptの機能。

4. タイムアウト・中断処理 ― シンプルなaxios、やや複雑なfetch

• fetch：AbortControllerで中断管理。毎回インスタンス生成＆クリーンアップ要。
• axios：timeout指定だけでOK（中断もサポート）。

// axiosでのタイムアウト例
axios.get('...', { timeout: 5000 })
  .catch(err => {
    if (axios.isCancel(err)) {
      console.log('Request canceled', err.message);
    } else if (err.code === 'ECONNABORTED') {
      console.log('Request timed out');
    }
  });

用語解説：AbortController
fetchリクエストを途中で中断（キャンセル）できるブラウザ標準の仕組み。

5. 共通処理の抽象化 ― “インターセプター”の強み

• fetch：独自ラッパー関数が必要で拡張・保守が煩雑化しやすい。
• axios：インターセプターでリクエスト・レスポンスに共通処理を一括挿入。

// リクエストインターセプター例
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});
// レスポンスインターセプター例
axios.interceptors.response.use(
  res => res,
  err => {
    if (err.response && err.response.status === 401) {
      window.location.href = '/login';
    }
    return Promise.reject(err);
  }
);

SWR・React Query時代でもaxiosの価値はある？

「SWRやReact Queryが主流で、もうaxiosは古い？」
結論はNO。
SWR/React Queryは「UI状態同期とキャッシュ」が役割、axios/fetchは「HTTPリクエスト送信」の役割です。
実際、SWR/React Queryのfetcherとしてaxiosが多用されています。

用語解説：SWR
Next.js開発元が提供するReact用データ取得ライブラリ。キャッシュや自動再取得が特徴。

用語解説：React Query
Reactアプリのサーバー状態管理・データ取得を効率化するライブラリ。

用語解説：fetcher
SWRやReact Queryでデータ取得時に使う「実際のリクエスト処理」を担う関数。

import useSWR from 'swr';
import axios from 'axios';

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

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

役割の違いを理解して使い分けましょう。

まとめ：明日から“保守性UP”のAPI連携を

• fetch：軽量＆追加依存ゼロ。単純なGETや小規模PJに最適。
• axios：直感的なエラーハンドリング、型安全、共通処理の一元化が強み。中〜大規模PJ・チーム開発で生産性UP。

「fetchでのエラー処理が面倒…」「型付けで悩む…」
――そんな課題があれば、ぜひaxios導入を検討してみてください。

ぜひコードをコピペして、まずは動かしてみてください。

FAQ｜よくある疑問に回答

• Q1. パフォーマンス差はある？
  → 体感できるほどの差はありません。axiosのオーバーヘッドはごく僅かです。
• Q2. fetch→axios移行の注意点は？
  → レスポンス取得がres.json()→res.dataに変わる。エラーハンドリングもcatchに統一されるため、コード修正が必要。
• Q3. axiosのインストールは？
  ・npm: npm install axios
  ・yarn: yarn add axios
  import axios from ‘axios’;で利用開始。

（Promiseや非同期処理の基礎については『TypeScript Promise型定義完全解説｜any撲滅と使い分け』をご参照ください）