jQuery 4.0がついにリリース ─ 3.x系からの変更点と移行判断のポイント

こんにちは、株式会社ファストコーディングのフルスタックエンジニア、MrFireです。

先日、いつものように技術系のフィードを眺めていたら、ふとスマホでWeb系のニュースをチェックしていたら「jQuery 4.0.0 正式リリース」の文字が目に飛び込んできました。2016年のjQuery 3.0以来、約10年ぶりのメジャーバージョンアップです^[1][3]。

*正直なところ、「jQueryってまだ現役なの？」という声も聞こえてきそうですが、WordPress案件やレガシーシステムの保守では今でも欠かせない存在なんですよね。

今回は、jQuery 4.0で何が変わったのか、そして実際のプロジェクトで3.x系から移行すべきかどうかについて、フルスタックエンジニアの視点で整理してみます。

jQuery 4.0の主な変更点

jQuery 4.0は、モダンブラウザへの最適化と古いコードの削除が中心のアップデートです。新機能の追加よりも、レガシーコードの整理に重点が置かれています^[1]。

1. 削除された主なAPIと代替方法

jQuery 4.0では、ネイティブJavaScriptで代替可能なユーティリティメソッドが削除されました^[1][2]。既存コードへの影響が最も大きい変更点です。

削除されたAPI	代替方法（ネイティブJS）
jQuery.isArray()	Array.isArray()
jQuery.parseJSON()	JSON.parse()
jQuery.trim()	String.prototype.trim()
jQuery.type()	typeof / instanceof
jQuery.now()	Date.now()
jQuery.isNumeric()	typeof n === ‘number’ など
jQuery.isFunction()	typeof fn === ‘function’
jQuery.isWindow()	obj === window
jQuery.camelCase()	独自実装または不要
jQuery.nodeName()	elem.nodeName.toLowerCase()
jQuery.cssNumber	独自定義または不要
jQuery.cssProps	独自定義または不要
jQuery.fx.interval	requestAnimationFrameを使用

これらのAPIを使用しているコードは、移行前に修正が必要です。

2. jQueryプロトタイプからのメソッド削除

内部使用を想定していた以下のメソッドがjQueryプロトタイプから削除されました^[1][2]。

push
sort
splice

もしこれらを使っていた場合は、以下のように書き換える必要があります。

// Before (jQuery 3.x)
$elems.push(elem);

// After (jQuery 4.0)
[].push.call($elems, elem);

3. フォーカスイベントの順序変更

これは地味ですが、影響範囲が広い可能性のある変更です^[1][2]。

jQuery 3.x系では独自のイベント順序（focusout → blur → focusin → focus）を採用していましたが、4.0からはW3C仕様に準拠したブラウザネイティブの順序に従うようになりました。

// jQuery 3.x系のイベント発火順序（旧）
focusout → blur → focusin → focus

// jQuery 4.0からのイベント発火順序（新・W3C準拠）
blur → focusout → focus → focusin

フォーカス関連のイベントハンドリングを複雑に行っている場合は、動作確認が必要です。

4. AJAX/JSONPの挙動変更

セキュリティ上の理由から、dataType: "json"でコールバックを指定した場合に自動的にJSONPリクエストに変換される挙動が廃止されました^[2]。

現代のWeb開発ではCORSを使用するのが標準であり、この変更は妥当な判断です。意図せずJSONPが実行されるリスクがなくなりました。

5. 新機能：Trusted Types対応

jQuery 4.0で追加された新機能として、Trusted Typesへの対応があります^[1][2]。

Content Security Policy（CSP）のrequire-trusted-types-forディレクティブを使用している環境で、TrustedHTMLでラップされたHTMLをjQueryのDOM操作メソッドに渡せるようになりました。セキュリティ要件の厳しいプロジェクトでは重要な機能です。

6. ES Modulesへの移行

jQuery本体のソースコードがAMDモジュールからES Modulesに移行されました^[1][2]。パッケージングにはRollupが使用されており、<script type="module">での読み込みにも対応しています。

ただし、これはjQueryの内部構造の変更であり、通常の使用方法に大きな影響はありません。

7. Slimビルドのさらなる軽量化

Slimビルドから、DeferredsとCallbacksが削除されました。これにより、gzip後で約19.5KBまで縮小されています^[1][2]。

AjaxやアニメーションをjQueryで使わないプロジェクトでは、Slimビルドの採用を検討する価値があります。

8. ブラウザサポートの変更

サポートブラウザの見直しも行われています^[1][2]。

サポート終了となったブラウザ：

IE11より前のバージョン（IE11は引き続きサポート、ただし5.0で削除予定）
Edge Legacy（Chromium版以前のEdge）
iOS：最新3バージョンより古いもの
Firefox：最新2バージョンより古いもの（ESR除く）
Android Browser

IE11より前のバージョンのサポートコードが削除されたことで、ファイルサイズが約3KB（gzip後）削減されました^[1]。ただし、現在IEを考慮する必要があるプロジェクトはほとんどないため、この変更が移行判断に影響することは稀でしょう。

結局、jQuery 4.0に移行すべきか？

ここからは、実務的な判断基準についてお話しします。

移行を検討すべきケース

Trusted Typesを使用したセキュリティ強化が必要
ファイルサイズの削減が重要（約3KB減）
将来的なjQuery 5.0への移行に備えたい
新規プロジェクトで最新版を採用したい

移行を急がなくてよいケース

現在のjQuery 3.x系で問題なく動作している
削除されたAPIを多用している（修正コストが高い）
安定性を最優先するプロジェクト

弊社での判断基準

株式会社ファストコーディングでは、以下の基準でjQueryのバージョン選定を行っています。

「新機能が明確に必要でなければ、まだ4.0への移行は急がない」

理由は以下の通りです。

jQuery 3.x系は2016年のリリースから約10年の実績があり、いわゆる「枯れた技術」として安定している^[3]
公式からの明確なサポートポリシー発表はないものの、3.7.1も2023年にリリースされており、今後も重大な脆弱性があれば対応されると考えられる^[4]
4.0への移行には既存コードの検証・修正コストが発生する
Trusted Types対応など、4.0固有の機能を必要とする案件は現時点では少ない
破壊的変更が含まれるため、十分なテスト期間が必要

新規プロジェクトで特にレガシーブラウザ対応が不要な場合は4.0を採用し、既存プロジェクトでは3.x系を維持しながら、必要に応じて段階的に移行するというアプローチを取っています。

移行時の注意点

もし移行を決めた場合は、jQuery Migrateプラグインの活用をおすすめします^[5]。

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-4.0.2.min.js"></script>

Migrateプラグインは、非推奨APIの使用箇所をコンソールに警告として出力してくれます。これにより、修正が必要な箇所を効率的に特定できます。

バージョン別の移行パス：

jQuery 1.9以降を使用している場合：Migrate 3.6.0プラグインを使用して直接4.0へアップグレード可能
jQuery 1.8以前を使用している場合：まずMigrate 1.xプラグインを使って1.x/2.x系にアップグレードしてから、4.0への移行を検討

まとめ

jQuery 4.0は、約10年ぶりのメジャーアップデートとして、モダンブラウザへの最適化とレガシーコードの整理が行われたバージョンです^[1]。

今回の変更点を整理すると、以下のポイントが重要です。

ネイティブJSで代替可能なユーティリティメソッドの削除^[1][2]
フォーカスイベント順序のブラウザネイティブ準拠^[1][2]
Trusted Types対応という新機能の追加^[1][2]
IE11より前のバージョンのサポート廃止により、約3KBのサイズ削減^[1]

移行の判断としては、現在3.x系で安定稼働しているプロジェクトは無理に移行する必要はありません。3.x系は約10年の実績があり、枯れた技術として十分に安定しています^[3]。公式からの明確なサポートポリシー発表はありませんが、過度に心配する必要はないでしょう^[4]。

一方で、新規プロジェクトや、セキュリティ要件でTrusted Types対応が必要な場合は、4.0の採用を検討してもよいでしょう。

株式会社ファストコーディングでは、jQueryを含むフロントエンド技術のバージョン選定や移行サポートも行っています。「既存サイトのjQueryを最新化したいが、影響範囲がわからない」「新規プロジェクトでどのバージョンを採用すべきか判断に迷う」といったお悩みがあれば、お問い合わせフォームからお気軽にご相談ください。