jQuery 4.0が出た:1.x時代から止まってた人向けのキャッチアップ
jQuery 4.0が2026年1月17日にリリースされた。jQueryが誕生してから20周年の節目でのメジャーアップデートになる。
1.x→2.xの移行で苦労した記憶があって、それ以来jQueryをあまり使わなくなった。3.xがあったのは知ってたけど、具体的に何が変わったのかは追ってなかった。今回4.0が出たので、3.xと4.0で何が変わったのかをまとめておく。
jQueryのバージョン史
| バージョン | 時期 | 特徴 |
|---|---|---|
| 1.x | 2006-2012 | IE6-8対応、全盛期 |
| 2.x | 2013-2016 | IE8以下サポート廃止 |
| 3.x | 2016-2023 | Promise対応、後方互換重視 |
| 4.x | 2026- | モダン化優先へ転換 |
1.xから2.xへの移行はIE8以下のサポート廃止が大きかった。当時はまだIE8を切れない環境も多くて、1.x系と2.x系を並行してメンテナンスする必要があった。
3.xで何が変わったのか
3.xを飛ばしてしまった人向けに、主要な変更点をまとめる。
Deferred/PromiseがPromises/A+互換に
jQuery 3.0でDeferredオブジェクトがPromises/A+とES2015 Promise互換になった。.then() の挙動が大きく変わっている。
// jQuery 2.x: エラーが上位へ伝播して中止
// jQuery 3.x: エラーがreject値になり、チェーン継続
deferred.then(function() {
throw new Error("error");
}).then(null, function(err) {
console.log("Caught:", err); // 3.xではここが実行される
});
また .catch() メソッドが追加された。
イベントエイリアスの削除
.load(), .unload(), .error() が削除された。.on() を使う形に統一。
// 2.x以前
$("img").load(function() { ... });
// 3.x以降
$("img").on("load", function() { ... });
requestAnimationFrame採用
アニメーションにrequestAnimationFrameが使われるようになった。スムーズなアニメーションとバッテリー節約が期待できる。
Slimビルドの登場
AJAX、Effects、非推奨コードを除外したSlimビルドが追加された。フルビルドが約30KB(gzip)に対して、Slimビルドは約24KB。
XSS脆弱性対応(3.5.0)
3.5.0でhtmlPrefilterが変更され、XSS脆弱性が修正された。ユーザー入力を直接HTMLに挿入する場合はDOMPurifyなどでサニタイズすることが推奨されている。
4.0の主な変更点
4.0では「後方互換性重視」から「モダン化優先」へ方針が転換された。
ブラウザサポートの削減
- IE 10以下: サポート廃止
- IE 11: まだサポートされるが、jQuery 5.0で廃止予定
- Edge Legacy(非Chromium版): サポート廃止
- Android Browser: サポート廃止
IE 11が必要な環境では、まだ4.0を使える。ただし5.0で切られる予定なので、長期的にはIE 11対応が必要ならjQuery以外の選択肢を検討する必要がある。
削除されたAPI
ネイティブJavaScriptに同等の機能があるユーティリティ関数が削除された。
| 削除されたAPI | 代替 |
|---|---|
$.trim() | String.prototype.trim() |
$.isArray() | Array.isArray() |
$.parseJSON() | JSON.parse() |
$.now() | Date.now() |
$.isNumeric() | ネイティブで判定 |
$.isFunction() | typeof fn === 'function' |
// 4.0以前
const trimmed = $.trim(" hello ");
if ($.isArray(data)) { ... }
// 4.0以降
const trimmed = " hello ".trim();
if (Array.isArray(data)) { ... }
また、jQueryオブジェクトのArrayメソッド(push, sort, splice)も削除された。
Trusted Types対応
Content Security Policyの require-trusted-types-for ディレクティブに対応した。セキュリティが厳しい環境でもjQueryを使いやすくなった。
ES Modules対応
ソースコードがAMDからES Modulesに移行した。Vite、Webpack 5、Rollupなど最新のバンドラーとの相性が良くなっている。
Focus/Blurイベント順序の変更
フォーカスイベントの発火順序がW3C標準に準拠するよう変更された。
// 3.x以前: focusout → blur → focusin → focus
// 4.0以降: blur → focusout → focus → focusin(W3C準拠)
フォーカスイベントの順序に依存したコードがある場合は修正が必要。
移行どうする?
jQuery Migrateプラグインを使うと、削除されたAPIを一時的に復元しながら段階的に移行できる。
<script src="https://code.jquery.com/jquery-4.0.0.js"></script>
<script src="https://code.jquery.com/jquery-migrate-4.0.1.js"></script>
開発版のMigrateプラグインを使うと、コンソールに警告が表示される。警告を一つずつ潰していって、すべて消えたらMigrateプラグインを外す流れになる。
1.x系から移行する場合は、まず3.x + Migrate 3.xに上げてから4.0に移行するのが推奨されている。
正直なところ、2026年の新規プロジェクトでjQueryを選ぶことはほぼない。React、Vue、SvelteなどのフレームワークやバニラJSで十分なケースが多い。
ただ、既存のjQueryプロジェクトを保守している場合や、WordPressのようにjQueryが組み込まれている環境では、4.0へのアップデートを検討する価値はある。IE 10以下を切れるなら、パフォーマンス改善とセキュリティ強化の恩恵を受けられる。