jQueryはなぜ爆発的に普及したのかを技術的に解説

jQueryが爆発的に普及した本当の理由

jQueryが流行したのは「書きやすかったから」ではありません。
正確には、“jQueryを使わないとWebがまともに動かなかった時代があった”からです。

現在のJavaScriptは、ほぼ同じコードがChrome・Firefox・Safari・Edgeで動きます。しかし2000年代のWeb開発は違いました。
同じJavaScriptを書いても、ブラウザによって「動いたり動かなかったりする」のが普通だったのです。

つまりjQueryは便利なライブラリというより、当時の開発者にとっては互換性の壁を突破するためのインフラでした。

この事情を理解すると、なぜ世界中のサイトが一斉にjQueryを採用したのかが見えてきます。

2000年代のJavaScriptは「ブラウザごとに別言語」だった

DOM APIがブラウザごとに違った

当時の最大の問題はDOM操作です。
例えば「要素を取得する」という、いまでは当たり前の処理です。

現在ならこう書きます。

document.getElementById("menu");

しかし昔はこれすら統一されていませんでした。
特に問題だったのがInternet Explorerです。

document.all["menu"];

同じ「要素取得」なのにAPIが違います。
つまり開発者は次のようなコードを書く必要がありました。

if (document.getElementById) {
  var el = document.getElementById("menu");
} else if (document.all) {
  var el = document.all["menu"];
}

たった1つの要素取得のために分岐が必要でした。
これがイベント処理、スタイル操作、DOM追加、Ajax、すべてで発生します。

Web制作が難しかった理由はJavaScriptの文法ではなく、ブラウザごとの実装差です。

イベント処理も統一されていなかった

クリックイベントの登録ですら共通ではありませんでした。

element.addEventListener("click", handler, false); // Firefoxなど
element.attachEvent("onclick", handler); // IE

同じ「クリック」でも、メソッド名も引数も違います。
当然、removeの方法も違います。

つまり、JavaScriptを書いているのではなく
ブラウザ別のJavaScriptを書いていたのが当時の開発です。

jQueryがやったこと ― 抽象化

ここで登場したのがjQueryです。
jQueryは新しい機能を追加したわけではありません。

既存のブラウザ差を吸収しただけです。

例えば要素取得はこうなりました。

$("#menu");

この1行の裏側では、

• getElementById
• querySelector
• document.all
• 古いDOM
• XML DOM

などの差異をすべて吸収しています。

開発者はブラウザを意識する必要がなくなりました。
つまりjQueryは「便利」ではなく、初めて“まともにWeb開発ができる状態”を作ったのです。

AjaxがjQuery普及を決定づけた

jQueryの普及を決定づけたのはAjaxです。

現在のfetchは1行ですが、当時のAjaxは地獄でした。

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

さらに

• readyState管理
• status判定
• エラー処理
• エンコード

が必要です。

それがjQueryではこうなります。

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

この差は単なる簡略化ではありません。
Ajaxを「専門技術」から「日常技術」に変えたのがjQueryです。

なぜ一気に世界標準になったのか

理由は3つあります。

• 互換性問題を完全に隠蔽した
• Ajaxを実用化した
• DOM操作を短く書けた

特に重要なのは1つ目です。
当時のWeb開発の最大コストは「バグ修正」でした。
そしてその原因の大半がブラウザ差です。

jQuery導入はライブラリ追加ではなく
テストコスト削減ツールとして機能しました。

だから企業も個人も同時に採用しました。
技術の流行というより、必要性の爆発です。

向いていた開発と向いていなかった開発

jQueryは特に次の用途で強力でした。

• 動的UI
• フォーム操作
• Ajax通信
• イベント制御

逆に、ゲームや描画処理ではあまり意味がありません。
jQueryはDOM操作の抽象化ライブラリであり、描画エンジンではないためです。

注意点 ― jQueryが消えた理由

ここが誤解されやすい部分です。
jQueryが廃れたのは「時代遅れだから」ではありません。

ブラウザがjQuery化したからです。

現在は次が標準で使えます。

document.querySelector("#menu");
fetch("/api");
element.addEventListener("click", handler);

つまり、かつてjQueryが提供していた機能が
ブラウザ標準に取り込まれました。

ライブラリが不要になっただけで、jQueryの設計思想は現在のWeb APIの基礎になっています。

まとめ

jQueryは「書き方を簡単にしたライブラリ」ではありません。

• ブラウザ差を吸収した
• Ajaxを実用化した
• Webアプリという概念を成立させた

当時の開発者にとってjQueryは便利ツールではなく、Webを作るための前提条件でした。

そして現在、私たちが素のJavaScriptだけで開発できるのは
皮肉なことに、jQueryが広まり続けた結果とも言えます。