【JavaScript】axios vs fetch 徹底比較！API通信するならどっちを選ぶ？

Posted at 2025-09-05

【JavaScript】axios vs fetch 徹底比較！API通信するならどっちを選ぶ？

はじめに

JavaScriptでAPI通信（サーバーからデータを取得したり、サーバーにデータを送信したり）を行う際、fetchとaxiosは最も人気のある選択肢です。どちらも非同期処理を簡単にするPromiseベースの技術ですが、その使い勝手や機能には大きな違いがあります。

この記事では、それぞれの特徴を比較し、「どちらの技術を、どのような場面で選ぶべきか」を分かりやすく解説します。

axios と fetch の違いが一目でわかる比較表

まずは、主な違いを一覧で見てみましょう。

特徴	`fetch`	`axios`
提供形態	ブラウザの標準機能 (API)	サードパーティ製ライブラリ
インストール	不要	必要 (`npm install axios`)
JSONデータ取得	`response.json()` で手動変換が必要	`response.data` に自動で格納
エラー処理	ネットワークエラー以外は検知しない<br>(`response.ok`での判定が必要)	4xx, 5xx系エラーも`catch`で捕捉可能
主な機能	基本的な通信機能	インターセプタ、タイムアウト設定など多機能
ブラウザサポート	モダンブラウザのみ (IE非対応)	IEを含む主要ブラウザに対応

それでは、各項目を詳しく見ていきましょう。

1. 提供形態：標準装備 vs 追加ライブラリ

fetch: ブラウザに標準で組み込まれているWeb APIです。そのため、ライブラリをインストールする必要がなく、すぐに使い始められます。
axios: サードパーティ製のライブラリです。利用するには、npmやyarnでプロジェクトにインストールする必要があります。

# axiosを利用する場合のインストールコマンド
npm install axios

2. データの扱いやすさ：一手間 vs そのまま

APIから返されるデータはJSON形式が一般的ですが、その扱いやすさに違いがあります。

fetch の場合

fetchはレスポンスを受け取った後、.json()メソッドを呼び出して手動でJSON形式に変換する必要があります。そのため、処理が2段階になります。

fetch("/api/user")
  .then(response => response.json()) // ① JSONに変換
  .then(data => {
    console.log(data); // ② やっとデータが使える
  });

axios の場合

axiosは、レスポンスを自動でJSONに変換し、response.dataの中に格納してくれます。より直感的で、コードも短くなります。

axios.get("/api/user")
  .then(response => {
    console.log(response.data); // 最初からデータが使える
  });

3. エラーハンドリング：ひと工夫必要 vs 直感的

ここが最も重要な違いの一つです。

fetch の場合

fetchは、ネットワーク層のエラー（オフラインなど）が起きた場合にのみPromiseをreject（catchブロックに処理を移す）します。
404 (Not Found) や 500 (Internal Server Error) といったサーバーからのエラーステータスコードは、正常なレスポンスとして扱ってしまうため、catchブロックでは捕捉できません。
そのため、エラーを検知するにはresponse.okプロパティ（ステータスコードが200番台ならtrue）を使って、手動で判定処理を入れる必要があります。

fetch("/api/user/999") // 存在しないユーザー
  .then(response => {
    // この判定がないと、404エラーでもthenブロックが実行されてしまう
    if (!response.ok) {
      throw new Error(`HTTPエラー: ${response.status}`);
    }
    return response.json();
  })
  .catch(error => {
    console.error(error); // "HTTPエラー: 404"
  });

axios の場合

axiosは、ステータスコードが200番台以外の場合、自動でPromiseをrejectしてくれます。多くの開発者が期待する通りの挙動であり、エラーハンドリングが非常にシンプルです。

axios.get("/api/user/999") // 存在しないユーザー
  .then(response => {
    // この部分は実行されない
  })
  .catch(error => {
    // axiosが自動でエラーを検知し、catchブロックに処理が移る
    console.error(error); // 404エラーの詳細な情報が出力される
  });

4. 高度な機能：シンプル vs 多機能

基本的なデータ取得以外にも、axiosには便利な機能が多く搭載されています。

インターセプター (Interceptors)
リクエストを送信する前や、レスポンスを受け取った後に共通処理を挟み込む機能です。例えば、「すべてのリクエストヘッダーに認証トークンを自動で付与する」といった処理を簡単に実装できます。
```
// リクエストインターセプターの例
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});
```
リクエストのキャンセルとタイムアウト
axiosでは、タイムアウト時間を設定したり、必要に応じてAPIリクエストを途中でキャンセルしたりする機能が簡単に利用できます。

fetchでこれらの機能を実現するには、自前で複雑なロジックを組む必要があります。

結論：結局、どちらを使えばいいの？

どちらの技術を選ぶべきか、ユースケースごとにまとめます。

`fetch` を選ぶと良いケース ✅

依存ライブラリを増やしたくない場合
簡単なデータ取得など、ごく基本的な用途で十分な場合
IE（Internet Explorer）のような古いブラウザをサポートする必要がない場合

`axios` を選ぶと良いケース ✅

直感的で効率的な開発をしたい場合（JSON自動変換、優れたエラーハンドリング）
認証トークンの付与など、APIリクエストに共通処理を入れたい場合（インターセプター）
タイムアウト設定やリクエストキャンセルなど、高度な制御が必要な場合
IEを含む、幅広いブラウザをサポートする必要がある場合

個人的な意見としては、多くの実務プロジェクトでは**axios**を選ぶメリットが大きいと感じます。エラーハンドリングの分かりやすさやインターセプター機能は、アプリケーションが複雑になるほど開発効率と品質を大きく向上させてくれます。

それぞれのメリット・デメリットを理解し、プロジェクトの要件に合った最適なツールを選択しましょう。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【JavaScript】axios vs fetch 徹底比較！API通信するならどっちを選ぶ？