jQuery やめようぜ

警告: 本記事にはレガシーの粉塵と遠慮ゼロの批判が含まれます。IE9 未満の読者は画面がちらつく副作用を起こす可能性があります。^[1][2]

---

0. TL;DR をあえて冗長に

• jQuery: 2006 年製の "Write less, debug more" 発電機。$() が短いことだけが 唯一 の高速化。^[3][4]
• Vanilla JS (ES2015~): ネイティブ API の筋肉で DOM を粉砕。querySelector が $ より読めるという衝撃事実。^[5][6]
• モダン FW: React/Vue/Svelte… 仮想 DOM で世界を焼き直す一方、$(document).ready の呪怨からは完全断酒。^[7]
• ベテラン開発者: 「jQuery はもう十分学んだので卒業します」と宣言しつつ、プライベート案件でこっそり fadeIn() を使用。^[8]

要旨: jQuery は "IE6 時代の義理の親"。過去の恩を理由に居候を許したらリビングで eval() を焚き火し始めた。^[9]

---

1. 起源: $(document).ready() だけで拍手喝采だった時代

1.1 2006—ブラウザ戦国を一人芝居で治めた夜

John Resig 氏が 800 行で放ったシンタックスシュガーに全世界が砂糖依存。だが依存症患者は 血糖値 ではなく バンドルサイズ で倒れる未来を予測できなかった。

1.2 無秩序プラグイン宇宙

$.fn.doWhatever() で誕生した星雲は、メンテナが失踪した瞬間ブラックホールへ変貌。結果、npm install すると宇宙背景放射レベルの警告が流れる。^[10]

1.3 エンドレスアップグレード地獄

• 1.x: innerHTML 書き換えで XSS 無双。
• 2.x: IE<9 を切り捨てたと豪語するが、実際は誰も気づかなかった。
• 3.x: .size() 削除で全国の Stack Overflow コピペ回答が一夜で陳腐化。
• 4.x (未定): 「軽量化」と言いつつリリースノートが出る前に esbuild が圧縮し尽くす予定。

---

2. "まだ使ってる"人の言い訳リスト

言い訳	即死ツッコミ
"コードが短いから"	短いのは寿命です
"学習コスト低い"	学ぶべき API が 2006 年で止まっているという悲報
"既存資産が…"	技術負債の利息は複利計算です
"動けばいい"	それを言い出すと COBOL が王者[11]
"プラグイン豊富"	9 割が GitHub で虫干し中

介錯のひと言: "jQuery はツール" ではなく "止血帯"。装着したまま走ると壊死する。

---

3. 深刻な副作用カタログ

1. グローバル汚染 — $ の名義貸しで名前空間が即死。
2. バンドルメタボ — gzip しても 90 kB、さらに jquery-ui が横に座る。^[12]
3. イベント洪水 — .on('click') をページ生成ごとに登録して Memory Leak 冠水注意報。
4. テスト絶望 — DOM を直接触るため Jest で嘆きの jsdom.reconfigure。
5. CSP 束縛 — eval() を好物とする $.globalEval が効かず CSP ヘッダに捕縛。
6. アクセシビリティ放棄 — fadeOut() は視覚障がい者に 404 を配達。

---

4. コード比較—こんなに違う

// jQuery
$('.btn').click(function () {
  $('.panel').slideToggle();
});

// Vanilla (2025)
for (const btn of document.querySelectorAll('.btn')) {
  btn.addEventListener('click', () => {
    document.querySelector('.panel')?.animate(
      [
        { height: 'auto', opacity: 1 },
        { height: 0, opacity: 0 }
      ],
      { duration: 200, fill: 'both' }
    );
  });
}

長く見える? Minify + gzip で縮むが、jQuery 本体は縮まらない。^[12:1]

---

5. コーポレート幽霊屋敷: 社内ポータル実例

• IE11 専用: 最新 Edge でアクセスするとアニメが倍速でホラー化。
• CDN 禁止: <script> タグが社内ファイルサーバを DDoS。
• jQuery 1.7 必須: だが同じページに 1.12 と 3.6 が共存し「健康的ミルフィーユ」。^[13]

---

6. WordPress プラグイン内戦 — 終わらないバージョン上書き

enqueue で jQuery を呼ぶたび 誰かのスクリプトが 404。Page Builder がドラッグでページ消滅するのは本能的自衛。^[14]

---

7. 面接で聞かれたら?

禁句: 「jQuery しか書けません」^[15]
模範: 「保守で使った経験はありますが、新規では選択しません」

採用側はあなたが jQuery を斬れる刀を持つか、それとも 切腹 する覚悟かを測っている。

---

8. 未来予測 (より暗黒)

1. 2026 — Stack Overflow の "jQuery" タグが史上初の 自動アーカイブ。
2. 2027 — npm install jquery すると npm audit が即アラート。^[16]
3. 2030 — React が jQuery ライセンス継承争いに巻き込まれ訴訟。^[17]
4. 2040 — $.ajax が WebAPI Deprecation に登録され、ブラウザが警告をポップアップ。
5. ∞ — あなたの CI が赤くなった理由は まだ jQuery。

---

9. 締め

遺言: $.noConflict() は儀式に過ぎない。本当に断捨離したいなら
git rm -r ./static/js/jquery*

最後にひと言。コードの長さより技術負債の長さが怖い。 さあ、バックログから remove-jquery ブランチを切ろう。Pull Request は未来へのラブレター。

---

脚注

1. 免責事項に同意しない場合、ブラウザは IE6 にダウングレードされます。ご武運を。

2. 吸い込むとレイアウトシフトの咳が止まらなくなると言われています。

3. 短縮したのはコードではなくあなたの余命です。

4. 燃料は昔ながらのコールバック石炭。CO2 排出量は then() の 3 倍。

5. 記号を読めるようになると、人は成長と呼ばれる副作用を得ます。

6. 筋肉は裏切らないが、innerHTML は裏切る。

7. useEffect の依存配列から逃げたつもりが、再レンダーで追い付かれます。

8. $(this).detach() ではなく、椅子から detach してリハビリへ。

9. 焚き火の火消しは removeEventListener ですが、誰も呼びません。

10. 宇宙は膨張しますが、npm の警告行も膨張します。

11. 1959 年デビューなのに未だ現役。長寿は罪かもしれないが、罪状は安定稼働。

12. 圧縮によりファイルサイズは減るが、読み込み前に感じる絶望は圧縮できない。

13. 層が多いほどおいしそうに見えるのは料理だけです。

14. 更新通知が来るたび functions.php が PTSD。

15. 履歴書に書くと「レガシー温存希望者」と誤解される恐れがあります。

16. あなたの依存関係に穴があったら npm が大声でタレコミます。

17. 訴状の冒頭が $().ready(function(){ になる前に和解しましょう。