jQuery 4.0.0が来た-今こそ”使い続ける理由”と”卒業する理由”を棚卸しする話

2026年、jQuery 4.0.0が正式リリ-スされました。20周年の節目に合わせて、長い助走を経てのメジャ-更新。が、現場の空気は一言で言うとこうです。

「え、まだjQuery使ってるの?」と「助かった、まだ生きてた」の同居。カオス。嫌いじゃない。

この記事は、jQuery 4.0.0の概要と破壊的変更の勘所、移行手順、そして”そもそもjQueryを止める必要があるのか”まで、実務目線でまとめたものです。読みながら、あなたのプロジェクトに当てはめてください。まだ間に合う。

jQuery 4.0.0とは何か-一言で言うと”掃除して軽くしたメジャ-更新”

jQuery 4.0.0は、約10年ぶりに出たメジャ-バ-ジョン。古い互換レイヤ-を削り、以前から非推奨だったAPIを整理し、ドキュメントにない内部向け挙動も間引いています。要するに、”昔の優しさ”をいくつか手放した版です。 :contentReference[oaicite:0]{index=0}

公式ブログでも、互換を保ちつつも長年やりたかった破壊的変更を入れたと明言されています。 :contentReference[oaicite:1]{index=1}

ブラウザサポ-ト-IEはどうなった

jQuery 4.0はIE 10以下を切りました。IE 11は残留。ただし段階的に落としていく方針で、次の段であるjQuery 5.0で次がある、という温度感です。 :contentReference[oaicite:2]{index=2}

現場で困るのは、IE 11をまだ飼っている案件。いるよね。なぜかいる。しかも”社内システムだけ”で。そういうときはjQuery 4.0のサポ-ト範囲を見ながら、どこで線を引くかを決めるしかないです。 :contentReference[oaicite:3]{index=3}

jQuery 4.0.0でできること-今風の足回りと安全性、そして整地

できることは派手じゃない。派手さがないのが良い。jQueryはだいたい”地味な勝利”で生きてきたライブラリなので。

1) 非推奨APIの整理で”動くけど怖い”を減らす

4.0では、過去に非推奨になっていたAPIが削除されています。isArrayやtrimなど、今ならネイティブで良いよね、というやつ。こういう整理が入ると、プロジェクトの”よく分からんけど残ってる”コードが炙り出されます。 :contentReference[oaicite:4]{index=4}

2) AjaxやCSP周りが現代寄りに

例えば、JSONを指定したのに勝手にJSONPに寄せる挙動が消えています。セキュリティ的に地雷だったので、今のWebではそりゃそう、という変更。 :contentReference[oaicite:5]{index=5}

スクリプト取得の自動実行も条件が明確になっています。CSPと真正面から付き合う人が増えたので、ここが整理されるのは実務で効きます。 :contentReference[oaicite:6]{index=6}

3) Trusted Types対応など”事故りにくさ”が増える

DOM操作にTrusted Typesを意識した変更が入っています。セキュリティ担当がいる現場だと、この手の話は地味に評価されます。 :contentReference[oaicite:7]{index=7}

jQuery 4.0.0でできないこと-万能の時代は終わっている

ここは夢を見ない方がいい。jQuery 4.0は”jQueryがSPAフレ-ムワ-クになる”みたいな話ではないです。ReactやVueの領域を奪いに来ていない。奪えない。そこは潔い。

1) モダンな状態管理やル-ティングはやらない

当然ながら、アプリケ-ションア-キテクチャの中心にはならないです。UIを組み上げるのは得意でも、複雑な状態管理やル-ティングは専用の仕組みの方が楽。ここをjQueryで無理やりやってると、だいたい”過去の自分と殴り合い”になります。

2) 古いプラグインがそのまま動くとは限らない

これが一番現実的な”できないこと”。破壊的変更の影響は、あなたのコードよりも、あなたが入れているプラグインに刺さる。しかも刺さり方が地味で、見落とす。怖い。

まず聞きたい-あなたはjQueryを”上げたい”のか”捨てたい”のか

ここ、曖昧なまま移行作業に入ると事故ります。jQuery 4.0.0に上げるのと、jQuery自体を減らすのは、似ているけど別ゲ-ム。

で、どっちですか。今の案件、jQueryがないと回らないタイプ? それとも惰性で残っているだけ?

なぜ止める必要があるのか-時代が進むと”便利”が”負債”に化ける

テンプレみたいな話に見えるけど、ここはちゃんと掘る価値があります。jQueryを止める、または依存を薄くする理由は主に3つ。

1) ネイティブAPIが強くなった

querySelector、classList、fetch、addEventListener、Promise。今はブラウザ標準でだいたい足ります。jQueryの”おまじない”が減ると、初見の人が読めるコードになりやすい。採用にも効く。実務では大事だ。

2) バンドルやパフォ-マンスの感度が上がった

昔はjQuery 90KB前後なんて誤差でした。今は誤差じゃない。LCPやINPを意識してる現場だと、1つの依存が心理的負担になります。しかもjQuery単体より、その周りのプラグイン群が太る。

3) “動けばOK”の魔法が消える

jQueryは互換の鬼でした。でも互換の鬼は、メジャ-更新のたびに鎧を脱ぐ。4.0.0もそう。魔法を信じているほど、更新が怖くなる。 :contentReference[oaicite:8]{index=8}

それでもjQueryを使い続ける理由-俺はここに甘い

偏見込みで言うと、jQueryは今も”CMS案件の現実”に強いです。WordPressの既存資産、古いプラグイン、社内運用の都合。全部ひっくるめて、”最短で安全に直す”ときの選択肢としては生き残る。

DOMにちょい足し、スクロ-ル連動、簡単なタブ、モ-ダル。これを短く書けるのは正義。あなたが明日納品なら、正義はだいたい短い。

jQuery 4.0.0への移行手順-現場で事故らない順番

移行は勢いでやると壊れます。順番がすべて。ここだけは落ち着いて。

手順1: いきなり4.0に行かない-まず3.xに寄せる

jQuery Migrateのリポジトリでも、4.xへ上げる前に3.xへ上げるように案内されています。古いjQueryを握っている現場ほど、段階移行が効きます。 :contentReference[oaicite:9]{index=9}

手順2: jQuery Migrateで警告を全部拾う

Migrateは”古い書き方がどこにあるか”を教えてくれる装置。怒られているうちが華。警告を無視すると、4.0に上げた瞬間に静かに死にます。

手順3: 4.0 Upgrade Guideを眺めながら”刺さりやすい変更”から潰す

アップグレ-ドガイドには破壊的変更がまとまっています。Ajax、CSS、イベント、属性周りは特に見ておくと安心。 :contentReference[oaicite:10]{index=10}

例えば、toggleClassの特定シグネチャ削除。px自動付与の変更。focusin/focusoutのshim廃止。どれも普段は意識しないけど、刺さると地味に痛いやつです。 :contentReference[oaicite:11]{index=11}

手順4: プラグインの互換を先に調べる

ここが本丸。jQuery本体の変更より、プラグイン側が壊れることの方が多い。しかも壊れ方が「一部の画面だけ」みたいな嫌なやつ。

おすすめは、依存しているプラグインを洗い出して、優先順位を決めること。重要な画面に近いものほど先に検証。地味なことだが、地味が勝つ。

手順5: Slim buildを使っているなら一度止まる

4.0のslimビルドでは、callbacks/deferred/queueが外れます。昔のコードやプラグインがDeferredを前提にしていると刺さります。フルビルドに戻すか、Promiseへ寄せるか。選択を迫られる場面。 :contentReference[oaicite:12]{index=12}

やり方-実務で使えるチェックリストとコマンド例

CDN利用: まずは検証環境で差し替える

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

本番にいきなり入れ替えない。検証環境で、ページ遷移、フォーム送信、モ-ダル、スクロ-ル、カル-セル、管理画面系のUIを一通り触る。人間の指が一番正直です。

npm利用: バンドラ環境なら依存を明示

npm i jquery@^4

ESM/UMDの扱いも含めて4.0は整備が進んでいます。バンドラの世界は早いので、古い設定が残っている人ほどここで詰まります。アップグレ-ドガイド側の”exports”周りも目を通すと迷いが減ります。 :contentReference[oaicite:13]{index=13}

壊れやすい箇所: CSS操作とAjaxを優先確認

CSSのpx自動付与変更は、数値を渡していたコードに刺さりがち。AjaxはdataType周りの期待がズレていると爆発します。ガイドで挙動を確認しながら、該当箇所に当たりを付けると早い。 :contentReference[oaicite:14]{index=14}

メリット-4.0.0へ上げることで得られる現実的な得

1) 安全に保守できる時間が増える

バ-ジョンが古いほど、脆弱性対応や周辺ツ-ルの更新で詰みやすい。4.0.0は今後の標準線になっていくので、上げておくと後が楽になります。公式も移行を後押ししています。 :contentReference[oaicite:15]{index=15}

2) 不要な互換レイヤ-が減り、挙動が読みやすい

“謎の魔法”が減ると、コードの責任範囲がはっきりします。便利さの代わりに、再現性が増える。デバッグが楽だ。

3) 現代のセキュリティ要件に寄る

CSPやTrusted Typesなど、セキュリティ設計の前提が昔と違います。4.0はその世界に寄せてきた。地味に効く。 :contentReference[oaicite:16]{index=16}

デメリット-4.0.0は”痛みゼロ”ではない

1) 破壊的変更の洗礼

非推奨API削除、挙動の修正。刺さると直す必要が出ます。特に古い案件ほど。 :contentReference[oaicite:17]{index=17}

2) プラグイン互換の地雷原

本体よりプラグイン。さっきも言ったけど、ここが一番嫌。しかも依存関係が多い現場ほど嫌。あなたの気持ちは分かる。

3) “上げるだけ”では技術負債が消えない

これは残酷な話ですが、4.0に上げても、jQuery依存の設計そのものは残ります。何となく増えたDOM直叩き、複雑なイベント委譲、巨大な1ファイル。上げたついでに整理する気がないなら、結局また膨らみます。

質問-今のあなたの現場、どこで詰まりそう?

フォームのバリデ-ション? 管理画面のモ-ダル? あるいは”誰も触ってないが動いている”レガシ-スライダ-?

詰まりそうな場所が一つでも想像できるなら、移行は成功に近い。想像できないのが一番危ない。だいたいそこが燃える。

jQueryを止めるやり方-段階的に”薄める”が勝ち筋

全部捨てるのは理想だけど、現場は理想で動かない。だから薄めます。

ステップ1: 新規実装ではVanillaを優先する

新しい機能だけはネイティブで書く。jQueryで書かない。これだけで未来の負債が減ります。既存はそのままでもOK。まずは増やさない。

ステップ2: よく触る機能から置き換える

タブ、アコ-ディオン、モ-ダル、スム-ススクロ-ル。触る頻度が高いものほど置き換えの効果が出ます。壊れたらすぐ気付けるのも良い。

ステップ3: 依存プラグインを減らす

jQueryそのものより、プラグインの方が置き換え価値が大きい。カル-セルや日付ピッカ-は特に。軽いものに変えると体感が変わります。

この作品が好きならこれも-実務で役に立つ関連トピック

jQuery Migrateを使った安全な移行

古いjQueryから4.xへ上げるには、段階移行が推奨されています。Migrateを挟んで警告を潰す流れは、長寿CMS案件の定番ル-ト。 :contentReference[oaicite:18]{index=18}

jQuery 4.0 Upgrade Guideの読みどころ

Ajax、CSS、イベント、属性。ここだけ拾っても移行の成功率が上がります。全部読む必要はない。刺さりそうな章だけでOK。 :contentReference[oaicite:19]{index=19}

次の一手: jQuery 3.xのサポ-ト期間を意識する

jQueryのリポジトリでは、4.0.0 final後もしばらく3.xが更新される旨が書かれています。ただ、いつかは移行する前提で計画を持っておくと怖くないです。 :contentReference[oaicite:20]{index=20}

余談-僕のこだわりと偏見

僕はjQueryが嫌いじゃない。むしろ好き寄り。けど、”何でもjQueryでやる”は好きじゃない。雑に便利を積むと、雑に保守が死にます。

だからおすすめは二択ではなく三択。

• jQuery 4.0.0に上げて、当面は安定運用
• 上げつつ、依存を薄める
• 止めるなら、薄めてから止める

どの道を選んでも、やることは似ています。棚卸し、検証、そして怖い箇所を先に触る。地味。だが勝つ。