なぜ昔はfetchではなくjQuery.ajaxだったのか

昔のWebではfetchは「存在していなかった」だけではありません

「昔はjQuery.ajaxを使っていたけど、今はfetchを使う」という説明はよく見かけます。
しかしこれは少し誤解を生みます。

理由は単純に
fetchがなかったから
ではありません。

正確には、

• fetchが存在しなかった
• 代替手段もなかった
• ブラウザの非同期処理が未成熟だった

この3つが同時に起きていました。

その穴を埋めていたのがjQuery.ajaxです。
つまりjQuery.ajaxは便利ライブラリではなく、当時のWebにおける「必須インフラ」に近い存在でした。

fetch以前のブラウザは非同期処理を持っていなかった

現在のJavaScriptはPromiseやasync/awaitが使えます。
ところが昔のJavaScriptにはPromiseがありませんでした。

非同期処理の書き方はイベントだけです。

xhr.onreadystatechange = function(){
  if(xhr.readyState === 4){
    if(xhr.status === 200){
      // 成功処理
    }
  }
};

これには問題があります。

• 成功と失敗が分かりづらい
• ネストが深くなる
• 複数通信の管理が困難
• エラー伝播ができない

つまり、通信処理は書けても「アプリケーション」が書けませんでした。

jQuery.ajaxはここに手を入れ、success / error / complete という分岐構造を提供しました。

$.ajax({
  url: "/api",
  success: function(){},
  error: function(){}
});

これだけで非同期の流れが理解できるようになりました。
当時としては非常に大きな改善です。

ブラウザの違いが致命的だった

現在の開発者が想像しにくい最大の理由がここです。

昔のブラウザは「同じJavaScriptが動かない」のが普通でした。

具体的にはXMLHttpRequestの生成方法すら違いました。

var xhr;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
} else {
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

これはInternet Explorer対応コードです。
さらに問題はこれだけではありません。

• POST送信で文字化け
• キャッシュ挙動の差
• ヘッダ設定の制限
• 同期通信の挙動差
• ステータスコードの違い

つまり「通信コードを書くたびにバグる」状況でした。

jQuery.ajaxはブラウザごとに内部実装を分岐し、
開発者には単一APIだけを見せました。

これが普及した最大の理由です。

JSONがまだ標準ではなかった

現在はAPIといえばJSONが前提です。
しかし昔はそうではありませんでした。

• XMLレスポンス
• HTML断片
• テキスト
• JavaScriptコード

すべて混在していました。

XMLHttpRequestはデータを文字列で返します。
つまり開発者が自分で判断しなければなりません。

jQuery.ajaxはここも吸収しました。

dataType	動作
json	自動でJSON.parse
html	DOM挿入用処理
script	実行
xml	XMLDocumentとして解析

この自動判別が「とりあえず通信できる」体験を作りました。
fetchにはこの自動変換はありません。
常に明示的に書く必要があります。

fetch("/user.json")
  .then(res => res.json())
  .then(data => console.log(data));

現在はこれが普通ですが、当時はこの構造自体が存在しませんでした。

エラーハンドリングの差

XMLHttpRequestの難しさの一つは、通信失敗とHTTPエラーの区別です。

例えば404は通信成功です。
サーバ応答があるためです。

初心者が最もハマるポイントでした。

jQuery.ajaxはこの判断を内部で行い、errorコールバックに統一しました。

つまり

• ネットワーク断
• 500エラー
• 404

を同じ書き方で処理できます。

これは地味ですが、実務では非常に大きな価値でした。

なぜfetchが普及したのか

fetchが普及した理由は「jQueryが不要になった」からです。

その背景にはブラウザの進化があります。

変化したポイント**

• Promiseが標準化された
• CORSが標準化された
• JSONが前提になった
• ブラウザ差異が減少した
• ES6以降の構文が使えるようになった

つまり、かつてjQueryが補っていた部分をブラウザ自身が持つようになりました。

fetchは新しい技術というより、
jQuery.ajaxの役割をブラウザが内蔵した形です。

注意点：fetchはjQuery.ajaxの完全上位互換ではない

fetchは便利ですが、初心者が戸惑うポイントがあります。

fetchはHTTPエラーで例外を投げません。

fetch("/notfound")
  .then(res => console.log(res.ok)); // false

404でもthenに入ります。
これはXMLHttpRequestと同じ仕様です。

jQuery.ajaxのerrorコールバックの挙動に慣れていると、ここで混乱します。
実務でもバグの原因になりやすい部分です。

まとめ

昔jQuery.ajaxが使われていた理由は、単なる流行ではありません。

当時のWebは

• 非同期が扱いにくい
• 通信が不安定
• ブラウザが統一されていない

という状態でした。

jQuery.ajaxはこれをまとめて解決し、「Webアプリケーションを書くこと」を現実的にしました。

現在はfetchが使われますが、それはjQueryが不要になったからではなく、
jQueryが解決した問題がブラウザ標準になったからです。

技術が消えたのではなく、役割が吸収された。
これが、jQuery.ajaxからfetchへ移行した本当の理由です。