jQueryがSPA時代に衰退した技術的理由

jQueryは時代遅れになったのではなく「役割を終えた」

jQueryが使われなくなった理由は、「新しいフレームワークが流行ったから」ではありません。
ReactやVueが人気になった結果としてjQueryが消えた、という説明は順序が逆です。

本当は、Webアプリケーションの構造そのものが変わり、jQueryが前提としていた開発モデルが成立しなくなったのです。

jQueryはページ単位のWebのためのライブラリでした。
一方、SPA（Single Page Application）はアプリケーション単位のWebです。この差が決定的でした。

jQueryの前提 ― 「DOMは完成している」

jQueryの基本思想は非常にシンプルです。

1. HTMLが存在する
2. 必要な要素を選択する
3. 振る舞いを追加する

例えば次のコードです。

$("#button").on("click", function(){
  $("#panel").show();
});

これは「すでにbuttonとpanelがHTMLに存在している」前提です。
つまりjQueryは、DOMが固定されているページに後から機能を追加する設計でした。

当時のWebサイトはすべてこの形です。ページ遷移ごとにHTMLが再読み込みされ、JavaScriptはその都度初期化されます。

SPAの前提 ― 「DOMは変化する」

SPAはここが違います。
ページ遷移を行わず、画面を書き換え続けます。

• 商品一覧 → 商品詳細
• 一覧 → 編集 → 保存 → 一覧

これらが1つのHTMLの中で起きます。
つまりDOMは固定ではなく、常に生成と破棄を繰り返す状態になります。

この瞬間、jQueryの前提が崩れます。

例えば次のコードです。

$(".item").on("click", function(){ ... });

これは初期表示時に存在する.itemにしかイベントが付きません。
Ajaxで後から追加された要素には反応しません。

これを回避するにはイベント委譲を使います。

$(document).on("click", ".item", function(){ ... });

確かに動きますが、コードは急速に複雑化します。
jQueryは「静的DOM操作」に最適化されており、「動的UI管理」には向いていませんでした。

状態管理の問題

SPAでもっと大きな問題が「状態」です。

例を考えます。

• ログイン状態
• カートの中身
• フィルタ条件
• 入力途中のフォーム

jQueryには状態管理の概念がありません。
すべてDOMに依存します。

つまり、

「画面の見た目 ＝ アプリの状態」

になります。
この設計は、小さなサイトでは問題ありません。しかしアプリケーションになると破綻します。

例えば、非表示にした要素に古いデータが残り、再表示時に不整合が起きる。
あるいはAjax更新でDOMを差し替えた結果、イベントが消える。
こうした不具合が頻発しました。

なぜReact/Vueが解決できたのか

ReactやVueは、DOMを直接操作しません。
代わりに「状態」を中心に設計されています。

• 状態が変わる
• 画面が再計算される

この順番です。

一方jQueryは逆です。

• DOMを変更する
• 見た目が変わる

つまり、jQueryはUI操作ライブラリ、SPAフレームワークはUI生成システムです。
解決している問題が異なります。

再描画コストの問題

jQueryでは、画面更新のたびに個別操作を行います。

$("#name").text(user.name);
$("#age").text(user.age);
$("#city").text(user.city);

データ項目が増えるほどコードが増えます。
さらに、更新漏れがバグになります。

SPAフレームワークでは、状態を1回変更するだけです。

この違いは、アプリケーション規模が大きくなるほど顕著になります。
jQueryのコードは線形に増え、保守が難しくなりました。

パフォーマンスではなく「設計」の問題

よく「jQueryは遅いから廃れた」と言われますが、本質ではありません。
実際には、パフォーマンスよりも設計のスケーラビリティの問題でした。

数ページのサイトではjQueryが最速です。
しかし画面が数十種類になるアプリでは、管理不能になります。

• イベント管理が散らばる
• DOM依存が増える
• バグの再現が困難になる

これは速度ではなく構造の問題です。

最後に

jQueryはSPAに負けたのではありません。
ページ中心のWebを極限まで効率化したライブラリでした。

そしてWebが「ドキュメント」から「アプリケーション」に変わったとき、必要な抽象化のレベルが上がりました。
jQueryは古くなったのではなく、解決する対象の時代が変わったと言う方が近いでしょう。