HTTP クライアントの比較：axios vs got vs fetch 系

JavaScript で外部 API と通信する際、どの HTTP クライアントを選ぶかはプロジェクトの構成に大きく影響します。axios、got、node-fetch、isomorphic-fetch はそれぞれ異なる設計思想を持っており、適した場面が分かれています。ここでは、実務で直面する具体的な違いをコードを通じて比較します。

🌍 実行環境：ブラウザと Node.js

実行環境のサポート範囲は、ライブラリ選定の最初の基準になります。

axios はブラウザと Node.js の両方で動作します。

• 同一のコードベースでユニバーサルなアプリケーションを構築できます。
• 環境による書き分けが不要です。

// axios: 両環境で動作
import axios from 'axios';
const res = await axios.get('/api/data');

got は Node.js 専用です。

• ブラウザでは動作しないため、フロントエンドコードには含められません。
• バックエンドツールやサーバーサイドロジックに限定されます。

// got: Node.js 専用
// ブラウザではエラーになります
import got from 'got';
const res = await got.get('https://api.example.com/data');

node-fetch は Node.js 環境での fetch 実装です。

• ブラウザではネイティブの fetch を使うため、このライブラリ自体は不要です。
• Node.js 18 以前で fetch を使いたい場合に利用します。

// node-fetch: Node.js 用ポリフィル
import fetch from 'node-fetch';
const res = await fetch('https://api.example.com/data');

isomorphic-fetch はブラウザと Node.js を統一するポリフィルでした。

• 現在はメンテナンスが停止しており、非推奨です。
• 新規プロジェクトでは使用すべきではありません。

// isomorphic-fetch: 非推奨
// 現在は使用を避けるべきライブラリです
import 'isomorphic-fetch';
const res = await fetch('https://api.example.com/data');

📥 リクエスト送信：GET と POST

データ取得と送信の基本構文を比較します。

axios はメソッドチェーンまたはオブジェクト設定を使います。

• URL とオプションを分離して記述できます。
• デフォルトで JSON シリアライズを行います。

// axios: GET
await axios.get('/users', { params: { id: 1 } });

// axios: POST
await axios.post('/users', { name: 'Alice' });

got はメソッド名で操作します。

• クエリパラメータはオブジェクトで渡します。
• Node.js の URL モジュールとの相性が良いです。

// got: GET
await got.get('https://api.example.com/users', { searchParams: { id: 1 } });

// got: POST
await got.post('https://api.example.com/users', { json: { name: 'Alice' } });

node-fetch は標準 fetch API に従います。

• クエリパラメータは URL に直接埋め込むか、URL オブジェクトを使います。
• ボディのシリアライズは手動で行う必要があります。

// node-fetch: GET
await fetch('https://api.example.com/users?id=1');

// node-fetch: POST
await fetch('https://api.example.com/users', {
  method: 'POST',
  body: JSON.stringify({ name: 'Alice' }),
  headers: { 'Content-Type': 'application/json' }
});

isomorphic-fetch も標準 fetch API です。

• 構文は node-fetch と全く同じです。
• 内部で環境に適した fetch を呼び出します。

// isomorphic-fetch: GET
await fetch('https://api.example.com/users?id=1');

// isomorphic-fetch: POST
await fetch('https://api.example.com/users', {
  method: 'POST',
  body: JSON.stringify({ name: 'Alice' }),
  headers: { 'Content-Type': 'application/json' }
});

📤 レスポンス処理：JSON とエラー

レスポンスの扱いとエラー発生時の挙動は、デバッグのしやすさに直結します。

axios は自動的に JSON をパースします。

• res.data にパース済みのデータが入ります。
• 4xx、5xx エラーは例外としてスローされます。

// axios: レスポンス処理
try {
  const res = await axios.get('/api/data');
  console.log(res.data); // すでに JSON オブジェクト
} catch (error) {
  console.error(error.response.status); // エラー詳細
}

got も自動的に JSON をパースします。

• response.body にデータが入ります。
• エラー時は HTTPError が投げられます。

// got: レスポンス処理
try {
  const res = await got.get('https://api.example.com/data');
  console.log(res.body); // すでに JSON オブジェクト
} catch (error) {
  console.error(error.response.statusCode); // エラー詳細
}

node-fetch は手動で JSON パースが必要です。

• res.json() を明示的に呼び出します。
• 4xx、5xx でもエラーにならず、ok フラグで判定します。

// node-fetch: レスポンス処理
const res = await fetch('https://api.example.com/data');
if (!res.ok) {
  throw new Error(`HTTP error! status: ${res.status}`);
}
const data = await res.json(); // 手動パース
console.log(data);

isomorphic-fetch も手動パースが必要です。

• 挙動は node-fetch と同一です。
• エラーハンドリングも自分で記述する必要があります。

// isomorphic-fetch: レスポンス処理
const res = await fetch('https://api.example.com/data');
if (!res.ok) {
  throw new Error(`HTTP error! status: ${res.status}`);
}
const data = await res.json(); // 手動パース
console.log(data);

🔧 高度な機能：インターセプターとキャンセル

リクエストの横断的な処理や中断機能の比較です。

axios はインターセプターを標準でサポートします。

• トークン付与やロギングを一箇所で管理できます。
• AbortController を使ったキャンセルも可能です。

// axios: インターセプター
axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer token';
  return config;
});

// axios: キャンセル
const controller = new AbortController();
axios.get('/api', { signal: controller.signal });
controller.abort();

got はフック機能を提供します。

• Node.js のイベントエミッターに近い感覚で使えます。
• ストリーム処理との親和性が高いです。

// got: フック
const response = await got('https://api.example.com', {
  hooks: {
    beforeRequest: [
      options => {
        options.headers.authorization = 'Bearer token';
      }
    ]
  }
});

node-fetch は標準機能のみです。

• インターセプター機能はありません。
• ラッパー関数を作って自作する必要があります。

// node-fetch: 自作ラッパー
async function fetchWithAuth(url) {
  return fetch(url, {
    headers: { Authorization: 'Bearer token' }
  });
}
// キャンセルは AbortController で可能
const controller = new AbortController();
fetch('/api', { signal: controller.signal });

isomorphic-fetch は機能追加がありません。

• 単なるポリフィルなので、追加機能は提供しません。
• 複雑な処理には向いていません。

// isomorphic-fetch: 機能なし
// 標準 fetch のまま使用するため、追加機能はありません
await fetch('/api');

🛠️ メンテナンスと将来性

ライブラリの維持状況は、長期的なプロジェクトにおいて重要です。

axios は活発にメンテナンスされています。

• セキュリティパッチや機能追加が定期的に行われます。
• コミュニティが大きく、情報が見つかりやすいです。

got も積極的に開発が続いています。

• Node.js の新機能に素早く対応しています。
• ドキュメントが充実しており、信頼性が高いです。

node-fetch は v3 で ESM 専用になりました。

• CommonJS プロジェクトでは v2 を使う必要があります。
• Node.js 18 以降ではネイティブ fetch があるため、役割は縮小しています。

isomorphic-fetch は非推奨です。

• 公式に非推奨のアナウンスがあります。
• セキュリティリスクがあるため、移行を検討すべきです。

📊 比較サマリー

💡 結論

axios は、ブラウザとサーバーをまたぐプロジェクトや、機能性を重視する場合の第一選択肢です。自動変換やインターセプターにより、開発効率が向上します。

got は、Node.js 限定のバックエンドタスクで真価を発揮します。ストリームや高度な制御が必要な場合に最適です。

node-fetch は、Node.js で fetch 構文を使いたい場合に有用ですが、Node.js 18 以降ではネイティブ機能で代用可能です。

isomorphic-fetch は、過去の資産を維持する場合を除き、新規採用は避けるべきです。

プロジェクトの要件と環境に合わせて、適切なツールを選ぶことが重要です — それが堅牢なアプリケーションへの近道です。