第61回：jQuery 4.0正式版の影響と、レガシーサイトを現実的に前へ進める方法
「まだまだjQueryのサイトが現役」——これは事実です。CMSや長年運用されてきた業務Web、社内ツール、プラグイン資産。 そして何より、「機能は変わらないのに全面刷新の説明が難しい」という現場のリアルがあります。
そんな中、2026年1月に jQuery 4.0 が正式リリースされました。約10年ぶりのメジャーアップデートです。 破壊的変更はゼロではありませんが、公式の見解としては 「多くのプロジェクトは最小限の修正でアップグレード可能」とされています。 この記事では、いま動いているjQuery資産を「安全に延命」しつつ、次の選択肢へ進むための要点を、技術者向けに整理します。
この記事のゴール
- jQuery 4.0 の移行で困りやすいポイントを先に把握する
- 「全部書き換え」ではなく、段階的に前へ進める戦略を持つ
- セキュリティ（CSP/Trusted Types等）や旧ブラウザ（IE）整理など、運用面の判断材料を揃える
1. 後方互換性：破壊的変更は「限定的」だが、当たりどころはある
jQuery 4.0の非互換は、大半が長年 Deprecated（非推奨）だった機能の削除です。 「使っていなければ何も起きない」一方、古いコード・古いプラグインが混ざると一気に出ます。
1-1. 削除された Deprecated API（代表例）
jQuery.trim→String.prototype.trimjQuery.isArray→Array.isArrayjQuery.parseJSON→JSON.parsejQuery.now→Date.nowjQuery.isFunction→ （不要。型判定は設計を見直す）
1-2. jQueryオブジェクトからの内部用メソッド削除
以前は内部用だった push/sort/splice などが、jQueryオブジェクトから削除されました。
もし直接使っていた場合は、標準の配列メソッドを call 適用する形へ修正します。
[] .push.call($elems, elem)1-3. 挙動が変わる（＝テスト必須）ポイント
- フォーカス関連イベントの順序が、jQuery独自からW3C標準順序へ（blur→focusout→focus→focusin）
.toggleClass(true|false)の真偽値シグネチャ廃止：.addClass()/.removeClass()を明示.css("width", 100)のような数値指定での自動px付与が廃止："100px"のように単位を明示
ここは「動いているからOK」になりやすい場所です。特にフォームのフォーカス制御、UIコンポーネント（EasyUI等）、 入力補助、バリデーション、キーボード操作まわりは、移行後に実画面での再テストをおすすめします。
2. 移行の実務：いきなり4.0に上げない（段階的が安全）
- 基本は3.6系の最新へ上げてから
- 次に jQuery Migrate 4.0 を入れて警告を潰す
- 最後に jQuery 4.x へ切り替える
2-1. 公式ガイド＋Migrateの活用
jQueryチームは 4.0対応のアップグレードガイドと、jQuery Migrate 4.0プラグインを提供しています。 まずは Migrate を読み込み、コンソール警告を確認すると、廃止機能の使用箇所や必要な修正を具体的に把握できます。
2-2. プラグイン互換性（ここが一番現実）
jQuery本体よりも、実際に詰まりやすいのは古いプラグインです。
非推奨API（例：jQuery.trim 等）に依存していると、4.0で止まります。
- まず「使っているプラグイン一覧」を棚卸し
- 4.0対応版へ更新できるか確認
- 更新できない場合は「自前修正」か「代替プラグイン」検討
- 古いプラグインが多い場合は、段階移行（1/2 → 3 → 4）を推奨
3. セキュリティ強化：Trusted Types / CSP を“現場で使える”形に
jQuery 4.0はセキュリティファーストなアップデートです。特に注目は、Strict CSP環境で重要になる Trusted Types対応と、スクリプト評価まわりの挙動整理です。
3-1. Trusted Types対応
Trusted Typesは、DOM操作に渡す文字列を「信頼できる型」にラップして、不用意なスクリプト混入を防ぐ仕組みです。
4.0では、$(trustedHtmlObj) や $elem.html(trustedHtmlObj) のように TrustedHTML を渡しても
ポリシー違反になりにくい実装に調整されています。
3-2. $.ajax の “スクリプト自動実行” 廃止
- 以前は受信データがスクリプトとして評価されるケースがあった
- 4.0ではdataType: "script" を明示した場合のみ実行
- クロスドメインのスクリプトは、可能な限り
<script>タグ経由に統一
CSP違反や意図しない実行のリスクを減らす方向です。Strict CSPを導入しているプロダクトほど恩恵があります。
3-3. prototype汚染への対処
データストレージ周りの実装見直しにより、prototype汚染のような問題に対する対策も含まれるとされています。 jQuery 3.5でHTML prefilter処理を変更しXSS脆弱性へ対応した経緯があり、4.0でも同様に既知のリスクを塞ぐ方向です。
4. パフォーマンスとモダナイズ：軽量化だけでなく“開発フロー”が変わる
4-1. ファイルサイズと読み込み
- 旧式ブラウザ対応やDeprecated削除により、本体は gzip で約3KB削減（約10%弱）
- スリム版は4.0で Deferred/Callbacks も除外され、約19.5KB（gzip）
4-2. ES Modules（ESM）対応とビルドの刷新
- ソースは AMD（RequireJS）→ ES Modules へ移行
- ビルドは RequireJS → Rollup
- npm配布も ESM で import しやすくなり、Webpack/Vite等との相性が改善
<script type="module">でも読み込み可能
4-3. 「標準APIを使う」方向へ
trim/parseJSON等の削除は、標準APIが十分に使える時代になったことの表れです。 Deferredについても「対応ブラウザならネイティブPromiseを使うべき」という方針が明確になりました。
4-4. その他の改善（Ajax/セレクタ/イベント）
$.ajaxがバイナリ/FormDataをより直接的に扱いやすく- JSON要求時の古い挙動（JSONP自動変換など）の整理
- セレクタはネイティブ
querySelectorAllで処理できる範囲に寄せ、古いサポートを整理 focusin/focusoutのShim除去、jQuery.event.special周りの簡素化など
5. 旧ブラウザ：IE10以前は終了。次はIE11も終了予定
jQuery 4.0はIE10以前を公式にサポート終了しました。対応ブラウザは「IEは11のみ」＋モダンブラウザ（現行と一つ前まで）です。
- IE10以前・古いEdgeHTML・古いiOS Safari等はサポート外
- IE8/9はES5未対応のため、4.0コード自体が構文エラーになる可能性
- IEが必要なら jQuery 3.6系の最新で止めるのが無難
- jQuery 5.0でIE11も終了予定（段階的終了方針）
6. 「jQueryは時代遅れ？」の答え：残る理由と、進め方の現実
6-1. 普及率は依然として高い（ただし新規採用は減少）
Web全体では、依然としてjQueryは高い利用率を維持しています。一方で「動いているサイトに残っている」ことと 「新規案件で選ばれている」ことは別で、後者は減少傾向です。
- 過去の資産（レガシーコード/CMS組み込み）の結果として残っている
- 開発者アンケートでは、使用割合が年々低下している
6-2. Vanilla JSで代替できる領域が増えた
- DOM取得：
document.querySelector(All) - クラス操作：
element.classList.add/remove/toggle - イベント：
addEventListener - 通信：
fetch()（Promiseベース） - アニメーション：CSS3 / Web Animations API
6-3. React/Vue等との違い（根本）
jQueryは「DOMを直接操作するライブラリ」。React/Vue等は「状態管理とコンポーネント化を含むアプリ開発プラットフォーム」です。 UIが複雑になるほど、jQueryだけでの継続はスパゲッティ化しやすくなります。
ただし、React/VueはDOMを内部で管理するため、アプリ内で不用意にjQueryでDOMを書き換えると不整合を招きます。 併用する場合は「管轄を分ける」「ライフサイクルの外に追い出す」等の工夫が必要です。
6-4. それでもjQueryが有用なケース
- 既存システムの保守・拡張：全部書き換えのコストが現実的でない
- 小規模な機能追加：静的ページに少しだけ動きを足すなら導入が軽い
- プロトタイピング：ビルド工程なしで素早く動くものを作れる
- 教育：DOM操作を学ぶ入口としてとっつきやすい
7. じゃあ、現場ではどう動く？（おすすめの意思決定フロー）
- 対象ブラウザを確定（IEが要るか、要らないか）
- IEが要る → jQuery 3.6最新＋必要最小の保守
- IEが要らない → 3.6最新 → Migrate → 4.x の段階移行
- プラグイン棚卸し（古いプラグインが最大リスク）
- 挙動が変わる領域（フォーカス/フォーム/UI）を重点テスト
- 中長期で新規機能はVanilla JS/TypeScript/React等へ寄せ、jQuery依存を徐々に減らす
まとめ：全面刷新が無理でも、前に進める
jQuery 4.0は「レガシーの終わり」ではなく、むしろ現代のブラウザ・セキュリティ要件に合わせて、既存資産を延命できる更新です。 そして現場では、刷新の理想論よりも「止めずに前に進める」設計が重要になります。
- IE要件が残るなら 3.6系で堅実に
- IE不要なら 4.xへ。Migrateとテストで安全に
- 新規機能はモダン技術へ寄せ、段階的に依存を下げる
参考（一次情報）
- jQuery公式ブログ（4.0リリース告知）
- jQuery Core 4.0 Upgrade Guide