jQueryの.ajax()とfetch()の違いとは？

非同期通信の実装方法として長年使われてきた jQuery .ajax() と、現代の標準APIである fetch()。

どちらを使うべきかは、プロジェクトの環境や目的によって異なります。

この記事では、両者の「違い・書き方・メリット／デメリット・実務での選び方」をわかりやすく整理し、最適な判断ができるようにまとめています。

.ajax() と fetch() の基本的な違い【最初に理解すべき位置づけ】

まずは両者がどのような背景・思想で作られたAPIなのかを整理し、全体像を掴むことから始めます。

1. jQuery .ajax()とは【XHRベースで互換性に強い】

jQuery が提供する高機能な Ajax ラッパーで、XMLHttpRequest を扱いやすくした APIです。

主な特徴

• ブラウザ差異を吸収してくれる
• オプションが豊富で柔軟
• 古いIEを含むレガシー環境でも動作
• jQuery依存があるため軽量ではない

2. JavaScript fetch()とは【Promiseベースのモダン標準】

ES6以降に登場した、ネイティブのHTTP通信APIで、Promise / async-await を前提とした記述ができます。

主な特徴

• 依存なしで軽量・高速
• 可読性が高くバグが減る
• 標準APIのため将来性が高い
• IEでは動作しない（大きな注意点）

比較表（要点のみ）

GETリクエストによる書き方比較【基本を押さえる】

ここでは、.ajax()とfetch()の「最も基本的な使い方」を比較し、記述スタイルの違いを直感的に理解します。

1. .ajax() の基本構文

$.ajax({
  url: '/api/data',
  method: 'GET',
  success: function(res) {
    console.log(res);
  },
  error: function(xhr) {
    console.error(xhr);
  }
});

特徴まとめ

• 設定がオプション化されて分かりやすい
• ただしコールバックが増えると可読性が悪化

2. fetch() の基本構文（Promise）

fetch('/api/data')
  .then(res => {
    if (!res.ok) throw new Error('Network error');
    return res.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));

async/await版（実務ではこちらが主流）

async function getData() {
  try {
    const res = await fetch('/api/data');
    if (!res.ok) throw new Error('Network error');
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

メリット・デメリット比較【選択基準が明確になる】

.ajax() と fetch() の長所・短所を簡潔にまとめ、どちらを使うべきか判断しやすいよう整理します。

1. .ajax() のメリット・デメリット

◎メリット

• IEを含む幅広いブラウザで動作
• オプションが豊富（タイムアウトなど）
• jQuery使用中の環境で統一性が高い

✕デメリット

• jQuery読み込みが必須で重い
• コールバック地獄になりやすい
• モダン開発と相性が悪い

2. fetch() のメリット・デメリット

◎メリット

• 依存なしで軽量
• async/await により極めて読みやすい
• 標準APIのため将来性が高い

✕デメリット

• IE非対応
• デフォルトでタイムアウトなし
• 進捗イベントを扱いにくい

実務で迷わない選択基準【最短で判断できる】

プロジェクトの状況に応じて、どちらを採用すべきかを簡単に判断できるように整理します。

POST送信の実用例【現場で最も使うコード】

非同期通信では、サーバーへデータを送信する「POSTリクエスト」が最も利用頻度の高い処理の1つです。ここでは、実務でよく使われる JSONデータの送信方法 を、fetch() と .ajax() の両方で比較しながら確認します。

1. fetch の例（推奨：async/await）

async function submitData() {
  try {
    const res = await fetch('/api/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: 'Taro', age: 30 })
    });
    if (!res.ok) throw new Error('送信エラー');
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

2. .ajax() の例

$.ajax({
  url: '/api/submit',
  method: 'POST',
  contentType: 'application/json',
  data: JSON.stringify({ name: 'Taro', age: 30 }),
  success: function(res) {
    console.log(res);
  },
  error: function(xhr) {
    console.error(xhr);
  }
});

まとめ：どちらを使うべきか？【最終結論】

この記事の内容を踏まえ、状況ごとに最適な選択は以下のとおりです。

結論：プロジェクトの状況に応じた使い分けが最適

• 新規開発 → fetch が最適解（軽量・可読性・標準化）
• 既存の jQuery 環境 → 無理に移行しなくて良い
• IE対応が必要 → .ajax() 一択

今後の技術選定の指針

• Web標準である fetch は今後さらに普及する
• 長期的には fetchベースの開発が保守性・互換性で有利
• 移行する場合は段階的に行うことが現実的