みなさん、jQuery使っていますか？
「え、今さらjQuery？」と思った方も多いかもしれません。React や Vue が主流の今、jQueryという名前を聞くと少しノスタルジックな気持ちになる方もいるのではないでしょうか。
しかし、2026年1月17日にjQuery 4.0.0が正式リリースされました。
約10年ぶりのメジャーバージョンアップです。
W3Techsの調査によると、2025年6月時点でjQueryは全Webサイトの約73.5%で使用されており、JavaScriptライブラリの中で90.4%のマーケットシェアを誇っています。Reactが約5.6%、Vue.jsはさらにその下であることを考えると、Webの世界において依然として圧倒的な存在感を持っていることがわかります。ただし、この数字は既存の膨大なWeb資産を含むものであり、新規プロジェクトでの採用率とは異なる点には注意が必要です。
そこで今回は、jQuery 4.0の主な変更点を紹介しつつ、React・Vueと比較して「今あえてjQueryを選ぶメリット」と「選ばない方がいい場面」を整理してみたいと思います。
jQuery 4.0の主な変更点
まずは、jQuery 4.0で何が変わったのかを確認していきましょう。
🗑️ IE10以前のサポート廃止
jQuery 4.0ではIE10以前のサポートが完全に廃止されました。IE11のサポートはまだ残っていますが、jQuery 5.0で廃止される予定です。
加えてEdge Legacy（Chromiumベース以前）、古いiOSバージョン、古いFirefox、Android Browserのサポートも廃止されています。
レガシーブラウザ対応のコードが削除されたことで、gzip圧縮後で3KB以上の削減が実現されています。
詳しくは以下の公式ブログ記事を参照してください。
📦 ES Modulesへの移行
jQueryのソースコードがAMD（RequireJS）からES Modulesに移行されました。ビルドツールもRollupに変更されており、モダンなビルドワークフローとの親和性が大幅に向上しています。
<!-- script type="module" での読み込みが可能に -->
<script type="module">
import $ from './jquery.module.js';
$('h1').text('Hello jQuery 4!');
</script>
🔒 Trusted Types / CSPへの対応
jQuery 4.0ではTrusted Typesのサポートが追加されました。TrustedHTMLでラップされたHTMLをjQueryのDOM操作メソッドに渡しても、Content Security Policy（CSP）に違反しないようになっています。
非同期スクリプトリクエストも<script>タグベースに切り替わり、インラインスクリプトによるCSPエラーを回避できるようになりました。
🧹 非推奨APIの削除
長らく非推奨だった以下の関数が削除されました。
| 削除されたAPI | 代替手段 |
|---|---|
jQuery.isArray |
Array.isArray() |
jQuery.parseJSON |
JSON.parse() |
jQuery.trim |
String.prototype.trim() |
jQuery.now |
Date.now() |
jQuery.type |
typeof / instanceof
|
jQuery.isFunction |
typeof fn === 'function' |
jQuery.isNumeric |
Number.isFinite() |
いずれもネイティブJavaScriptに同等の機能が存在するため、移行自体はシンプルです。
🔄 フォーカスイベントの順序変更
W3Cの仕様に準拠する形で、フォーカス関連イベントの発火順序が変更されました。
そもそもフォーカスイベントとは、ユーザーが入力フォームなどの要素をクリックしたり、Tabキーで移動したりする際に発生するイベントのことです。例えば「名前」の入力欄から「メールアドレス」の入力欄に移動すると、以下のようなイベントが連続で発火します。
「名前」のフォーカスが外れる → 「メールアドレス」にフォーカスが当たる
この時に発火するイベントの順番が、jQuery 3.xと4.0で変わりました。
jQuery 3.x以前の順序：
focusout → blur → focusin → focus
jQuery 4.0（W3C仕様準拠）：
blur → focusout → focus → focusin
具体的な例として、2つの入力欄間でフォーカスが移動する場合を見てみましょう。
<input id="name" type="text" placeholder="名前" />
<input id="email" type="text" placeholder="メールアドレス" />
// 各イベントの発火順序を確認する例
$('#name, #email').on('blur focusout focus focusin', function(e) {
console.log(`[${this.id}] ${e.type}`);
});
「名前」にフォーカスがある状態で「メールアドレス」をクリックすると、コンソールには以下の順序でログが出力されます。
// jQuery 3.x以前
[name] focusout ← 名前からフォーカスが外れた（バブリングあり）
[name] blur ← 名前からフォーカスが外れた（バブリングなし）
[email] focusin ← メールアドレスにフォーカスが当たった（バブリングあり）
[email] focus ← メールアドレスにフォーカスが当たった（バブリングなし）
// jQuery 4.0
[name] blur ← 名前からフォーカスが外れた（バブリングなし）
[name] focusout ← 名前からフォーカスが外れた（バブリングあり）
[email] focus ← メールアドレスにフォーカスが当たった（バブリングなし）
[email] focusin ← メールアドレスにフォーカスが当たった（バブリングあり）
⚡ slimビルドの改善
Ajax、Effects（アニメーション）、Deferred、Callbacksモジュールを除いたslimビルドが改善され、通常版より約8KB（gzip）軽量になっています。ネイティブPromiseやCSS Transitionで代替できる場面が増えた今、slimビルドの活用は十分に実用的です。
React・Vueとの比較
ここからが本題です。jQuery 4.0を、React・Vueと様々な観点で比較してみましょう。
📐 アーキテクチャの違い
jQueryとReact・Vueでは、そもそも設計思想が根本的に異なります。
jQueryはDOM操作ライブラリです。既存のHTMLに対してイベント追加やスタイル変更、要素の追加・削除を行う「手続き的」なアプローチを取ります。
一方、ReactとVueはコンポーネントベースのUIフレームワークです。状態（state）を管理し、状態の変更に応じてUIを「宣言的」に再描画します。
// jQuery：手続き的にDOMを操作する
$('#count').text(0);
$('#increment').on('click', function() {
const current = parseInt($('#count').text());
$('#count').text(current + 1);
});
// React：状態を宣言的に管理する
const [count, setCount] = useState(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
<!-- Vue：テンプレートとリアクティブデータの結合 -->
<template>
<p>{{ count }}</p>
<button @click="count++">+1</button>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>
カウンターのような単純な例でも、jQueryは「DOM要素を直接取得して書き換える」のに対し、React・Vueは「状態が変わればUIが自動的に追従する」という違いが見て取れます。
🟢 jQuery 4.0の良いところ
1. 圧倒的な導入の手軽さ
jQueryの最大の強みは、CDNからscriptタグ一行で利用開始できることです。
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
Node.jsやnpm、Webpack、Viteといったビルドツールの知識は一切不要です。HTMLファイルに一行追加するだけで使い始められるこの手軽さは、React・Vueにはない大きなアドバンテージです。
2. 既存サイトへの部分適用のしやすさ
ReactやVueは基本的にアプリケーション全体をフレームワークで管理する前提で設計されています。既存のサーバーサイドレンダリング（WordPress、Rails、Laravel等）で構築されたサイトに部分的に動的機能を追加したい場合、jQueryはいまだに最も手軽な選択肢です。
3. 学習コストの低さ
jQueryは$関数とメソッドチェーンという直感的なAPIを持っており、JavaScriptの基礎知識があればすぐに使い始めることができます。React のHooksやJSX、Vueのリアクティブシステムといった独自の概念を学ぶ必要がありません。
4. 圧倒的なWebサイトシェアと資産
先述の通り、世界中のWebサイトの約73%がjQueryを使用しています。これは既存の膨大なプラグイン、ドキュメント、Stack Overflowの回答、そして運用実績があることを意味します。
5. jQuery 4.0でのモダン化
ESモジュール対応やTrusted Typesサポートにより、jQuery 4.0はモダンなWeb開発のセキュリティ・ビルド要件にも対応できるようになりました。「古いライブラリ」というイメージに対して、実際にはしっかりとした進化を遂げています。
🔴 jQuery 4.0の良くないところ（React・Vueと比較して）
1. 状態管理の仕組みがない
jQueryには状態管理の概念がありません。アプリケーションの状態はDOMそのものに依存することになり、規模が大きくなるとDOMの状態とビジネスロジックが密結合して、メンテナンスが非常に困難になります。
React・Vueでは状態とUIが分離されており、「状態が変わればUIは勝手に追従する」という宣言的なモデルにより、複雑なUIでも見通しの良いコードが書けます。
2. コンポーネント指向ではない
React・VueではUIを再利用可能なコンポーネントとして分割・管理できます。jQueryにはコンポーネントの概念がないため、コードの再利用やチーム開発でのコード分割が難しくなります。
3. 仮想DOMがない
ReactやVueが採用している仮想DOM（またはリアクティブシステム）は、必要最小限のDOM更新のみを行うため、大量の要素を効率的に更新できます。jQueryは直接DOMを操作するため、大規模なリスト表示やリアルタイム更新が頻繁に発生するアプリケーションではパフォーマンスの問題が生じやすくなります。
4. SSR / SSGに対応していない
SEOが重要なWebサイトやパフォーマンスを最大化したい場面では、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）が求められます。ReactにはNext.js、VueにはNuxtという強力なメタフレームワークがありますが、jQueryにはこうした仕組みがありません。
5. TypeScriptとの親和性
ReactやVueはTypeScriptとの相性が非常に良く、型安全なコンポーネント開発が可能です。jQueryにも @types/jquery は存在しますが、DOM操作が中心のjQueryではTypeScriptの恩恵を最大限に受けることが難しいです。
6. テスト環境の充実度
ReactにはReact Testing LibraryやJest、VueにはVitestやVue Test Utilsといったテスト用のエコシステムが充実しています。jQueryのテストは基本的にDOM操作のテストとなり、コンポーネント単位でのユニットテストといったモダンなテスト手法は適用しづらいです。
どのケースでjQueryを選ぶべきか
ここまでの比較を踏まえて、jQuery 4.0が適しているケースを整理してみます。
✅ jQueryが向いているケース
-
既存のjQueryプロジェクトの保守・改善
- jQuery 3.xからのアップグレードは比較的容易で、jQuery Migrateプラグインも提供されています
-
サーバーサイドレンダリング（SSR）を行っているWebサイトへの動的機能追加
- WordPress、Rails、Laravel等のサイトに部分的にインタラクションを追加する場合
-
プロトタイプや小規模サイトの素早い構築
- ビルド環境なしでサクッと動くものを作りたい場合
-
ビルドツールを使わない環境
- CDN読み込みだけで完結させたい場合
❌ jQueryが向いていないケース
-
SPA（Single Page Application）の開発
- ルーティング、状態管理、コンポーネント設計が必要な場面ではReact・Vueが圧倒的に適している
-
大規模なチーム開発
- コンポーネント分割やTypeScriptによる型安全性が求められる場面
-
リアルタイムに大量のデータを表示・更新するアプリケーション
- 仮想DOMやリアクティブシステムの恩恵が大きい場面
-
SEO重視のWebアプリケーション
- SSR/SSGが必要な場面ではNext.jsやNuxtが有利
jQuery 4.0へのアップグレード方法
既存のjQueryプロジェクトをお持ちの方向けに、アップグレードの手順を簡単に紹介しておきます。
- 開発環境でjQueryを4.0にアップデート
- jQuery Migrate 3.6.0プラグイン（非圧縮版）をページに追加
- ブラウザのコンソールで表示される警告を確認し、一つずつ修正
- jQuery Migrateを外しても正しく動作するか確認
- 本番環境にデプロイ
jQuery 1.9以降のバージョンであれば、jQuery 4.0へ直接アップグレードが可能です。
まとめ
jQuery 4.0は、約10年ぶりのメジャーアップデートとして、ES Modules対応やTrusted Typesサポートなど、モダンなWeb開発に合わせたアップデートがしっかりと行われています。
とはいえ、React・Vueのようなコンポーネントベースのフレームワークとはそもそも解決しようとしている課題が異なります。jQueryは「既存のHTMLに対して手軽にインタラクションを追加するライブラリ」であり、React・Vueは「UIアプリケーション全体を構造的に構築するフレームワーク」です。
新規でSPAやWebアプリケーションを構築するのであれば、React・Vueを選ぶのが現在のスタンダードです。一方で、既存サイトの保守やちょっとした機能追加、ビルド環境を使わない場面では、jQuery 4.0は依然として実用的な選択肢です。
大切なのは「jQueryかReactか」という二項対立ではなく、プロジェクトの要件に応じて適切な技術を選択することだと思います。
jQuery 4.0のリリースをきっかけに、改めて自分のプロジェクトに最適な技術選定を考えてみるのも良いのではないでしょうか。
最後までお読みいただき、ありがとうございました！！
Discussion