jQueryをバージョンアップする前に使いたいjQuery Migrate

2026-06-06 フロントエンド・PHPカンファレンス北海道2026 トーク資料
https://fortee.jp/frontend-phpcon-do-2026

Transcript

1. jQueryをバージョンアップする前に 使いたいjQuery Migrate 1 2026年6月6日 フロントエンド・PHPカンファレンス北海道2026 サイボウズ株式会社 松尾篤
2. jQueryをバージョンアップする前に使いたいjQuery Migrate このトークで伝えたいこと はじめに • jQueryを使って長年運用されているWebサイトは今も存在している • セキュリティの維持にはライブラリの更新を定期的に行う必要がある • jQueryが使われているサイトの保守を引き継ぐことになっても各種ツール を使えば自信を持ってjQueryのバージョンアップに臨むことができる 2
3. jQueryをバージョンアップする前に使いたいjQuery Migrate 今回の話題 はじめに • 保守を引き継ぐことになったヘルプサイト • 約10年ぶりのメジャーバージョンアップとなるjQuery 4.0 • jQueryのバージョンアップ準備時に役立つツール群と活用アイデア • jQuery Migrate • Claude Code • Playwright MCPサーバー 3
4. jQueryをバージョンアップする前に使いたいjQuery Migrate 自己紹介 はじめに 松尾篤 • PHP使用歴：約21年 • PHPを使った開発歴は約18年 • 2023年4月にGaroon開発チームに加入 • これまでの登壇実績（PHP関連） • PHPカンファレンス名古屋2025「PHPのバージョンアップ時にも役立ったAST」 • PHPerKaigi 2025「Windows版PHPのビルド手順とPHP 8.4における変更点」 • PHPカンファレンス福岡2025「PHPライセンス変更の議論を通じて学ぶOSSライセンスの基礎」 • PHPカンファレンス香川2025「テストやOSS開発に役立つSetup PHP Action」 • PHPerKaigi 2026「PHPのバージョンアップ時にも役立ったAST（2026年版）」 • PHPカンファレンス小田原2026「個人的に嬉しかったpnpmの新機能・3選」 • PHPカンファレンス香川2026「20年以上続くプロダクトでも使い続けられる静的解析ツールを求めて」 4
5. 保守を引き継ぐことになったヘルプサイト 5
6. jQueryをバージョンアップする前に使いたいjQuery Migrate 製品ヘルプサイト基盤の保守を引き継ぐことに 保守を引き継ぐことになったヘルプサイト • https://jp.cybozu.help/g/ja/ • 20年以上開発が続いている製品（Garoon）のヘルプサイト • Hugo（Go製のサイトジェネレーター）で作られた静的サイト • jQueryが使われている 6
7. jQueryをバージョンアップする前に使いたいjQuery Migrate 保守を引き継ぐことになったきっかけ 保守を引き継ぐことになったヘルプサイト • 別製品（kintone）のヘルプサイト基盤刷新が引き継ぎのきっかけ • 刷新の対象外になった、以前から使っている基盤の保守を引き継ぐことに • Garoon以外のグループウェア製品ヘルプサイト基盤も引き継ぎ対象 7 フロントエンドカンファレンス名古屋 2026での mugi さんの発表資料より https://speakerdeck.com/mugi_uno/help-site-renewal-with-ai
8. jQueryをバージョンアップする前に使いたいjQuery Migrate Hugoで作られた静的サイト 保守を引き継ぐことになったヘルプサイト • テンプレートファイルは全サイト共通で引き継いだ後もHugoのまま • kintone ヘルプサイトは基盤刷新後にHugoからAstroに移行し別管理に • 製品ごとにコンテンツ（Markdownファイル）を各リポジトリで管理 8 フロントエンドカンファレンス名古屋 2026での mugi さんの発表資料より https://speakerdeck.com/mugi_uno/help-site-renewal-with-ai
9. jQueryをバージョンアップする前に使いたいjQuery Migrate jQueryが使われていた 保守を引き継ぐことになったヘルプサイト • 引き継いだ時点でのjQueryのバージョンは3.7.0 • 現在はバージョン3.7.1に更新済み • 正式に引き継いだ直後にjQuery 4.0が公開 • https://blog.jquery.com/2026/01/17/jquery-4-0-0/ 9
10. 約10年ぶりのメジャーバージョンアップ となるjQuery 4.0 10
11. jQueryをバージョンアップする前に使いたいjQuery Migrate jQuery 約10年ぶりのメジャーバージョンアップとなるjQuery 4.0 • 20年の歴史を持つJavaScriptライブラリ • ReactやVue.jsなどのフレームワークが主流になる前は広く使われていた • 実際の現場では以前として現役 • 短い記述で簡単に実装できる • Webブラウザーの差異を吸収したDOM操作 • イベント処理、アニメーション、非同期通信等 • 拡張用のプラグインも数多く存在 • 記述例 • $( "button.continue" ).html( "Next Step..." ) 11 https://w3techs.com/technologies/overview/javascript_library より
12. jQueryをバージョンアップする前に使いたいjQuery Migrate jQuery 4.0が2026年1月に公開 約10年ぶりのメジャーバージョンアップとなるjQuery 4.0 • 約10年ぶりのメジャーバージョンアップ • Internet Explorer 10以前のサポートを終了 • 古いAPIや非推奨だった書き方が整理・削除された • Trusted Types APIへの対応やESモジュール化など 12
13. jQueryをバージョンアップする前に使いたいjQuery Migrate 削除されたAPIや非互換についてはバージョンアップ時に対応が必要 約10年ぶりのメジャーバージョンアップとなるjQuery 4.0 • jQuery 4.0で削除されたAPI • 数バージョン前から非推奨となっていた • jQuery.isArray、jQuery.parseJSON • jQuery.trim、jQuery.type、jQuery.now • jQuery.isNumeric、jQuery.isFunction • jQuery.isWindow、jQuery.camelCase • jQuery.nodeName、jQuery.cssNumber • jQuery.cssProps、jQuery.fx.interval • アップグレードガイドに対処法が記載されている • https://jquery.com/upgrade-guide/4.0/ 13
14. jQueryをバージョンアップする前に使いたいjQuery Migrate バージョンアップの必要性 約10年ぶりのメジャーバージョンアップとなるjQuery 4.0 • しばらくはjQuery 3.7.1のままでも大丈夫かもしれない • jQuery公式のサポート方針として現時点で次のように表明されている状況 • "jQuery 3.x will only receive critical security patches and bug fixes. We encourage all users to upgrade to the latest version of jQuery 4.x." • 将来的にセキュリティアップデートが提供されなくなる可能性があるので バージョンアップの準備を進めたい 14
15. jQueryをバージョンアップする前に使いたいjQuery Migrate メジャーバージョンアップに対する不安 約10年ぶりのメジャーバージョンアップとなるjQuery 4.0 • 削除されたAPIや非互換になった箇所は調査すれば分かるものの‥‥ • サイトの保守を引き継いだばかりで影響範囲が正確に見えていない状況 • 現時点ですでに非推奨になっていたAPIが使われている状況かも不明 • 過去バージョンで非推奨になったAPIを一から調べ直すのか？ ➢ 何も確認せずにバージョンアップするわけにはいかない一方、できる限り かける手間を少なくしたい 15
16. jQueryのバージョンアップ準備時に 役立つツール群と活用アイデア 16
17. jQueryをバージョンアップする前に使いたいjQuery Migrate jQuery Migrate 約10年ぶりのメジャーバージョンアップとなるjQuery 4.0 • jQueryのバージョンアップを支援してくれる開発用の公式プラグイン • https://github.com/jquery/jquery-migrate • 読み込むだけで使える移行支援ツール • 削除または非推奨となったAPIが使用された際にWebブラウザーのコンソール に警告を表示 • 削除されたAPIを復元 • バージョンの対応関係 • jQuery 3.x → jQuery Migrate 3.x • jQuery 4.x → jQuery Migrate 4.x 17
18. jQueryをバージョンアップする前に使いたいjQuery Migrate jQuery Migrateを使えば修正すべき箇所が分かる 約10年ぶりのメジャーバージョンアップとなるjQuery 4.0 • 開発環境においてHTMLにjQuery Migrateを読み込むscriptタグを追加 • Webブラウザーで当該ページを開きコンソールで警告が表示されるか確認 ➢ 「影響箇所が分からない」から「修正すべき箇所が分かる」状態に変わる 18
19. jQueryをバージョンアップする前に使いたいjQuery Migrate 更新作業は段階的に進める予定 jQueryのバージョンアップ準備時に役立つツール群と活用アイデア • Step 1：すでに非推奨になっていたAPIがないか手元で確認 • jQuery 3.7.1 + jQuery Migrate 3.6.0 • Step 2：非推奨になっていたAPIがある場合には修正して現サイトを更新 • jQuery 3.7.1 • Step 3：バージョンアップで影響を受ける箇所を手元で確認して修正 • jQuery 4.0.0 + jQuery Migrate 4.0.2 • Step 4：jQuery Migrateを外して最終確認 • jQuery 4.0.0 ➢ 公開サイトへのjQuery 4の適用はjQuery 4.1.0公開後に実施予定 19
20. jQueryをバージョンアップする前に使いたいjQuery Migrate jQuery Migrateの制約 約10年ぶりのメジャーバージョンアップとなるjQuery 4.0 • Webブラウザーで実際にページを開いてコンソールで警告が表示されるか 確認する必要がある • 表示していないページについては影響箇所は分からない ➢ 確認対象ページを事前に検討する必要がある 20
21. jQueryをバージョンアップする前に使いたいjQuery Migrate 今回のケースではすべてのページを確認する必要はなかった jQueryのバージョンアップ準備時に役立つツール群と活用アイデア • Garoonのヘルプだけで約2800ページが出力される • しかしながら、出力されるすべてのページを確認する必要はない • そもそもHugoで作られた静的サイト • テンプレートファイルが用意されている • 2800種類の画面があるわけではない ➢ テンプレート内のJavaScriptファイルやHTMLファイル内のscriptタグを 中心に代表的なページを確認すれば良い 21
22. jQueryをバージョンアップする前に使いたいjQuery Migrate jQuery MigrateだけでなくAIも活用して確認作業を省力化 jQueryのバージョンアップ準備時に役立つツール群と活用アイデア • 代表的なページの確認作業を次の流れで効率化 • テンプレートにjQuery Migrateを読み込むscriptタグを追加 • HugoのローカルWebサーバーを起動 • どの種類のページを見れば良いかAIに情報を渡す • AIにWebブラウザーのコンソールで警告が出ているか確認してもらう • 使用するツールの例 • Claude Code（AIエージェントツール） • Playwright MCPサーバー（ブラウザー操作） 22
23. jQueryをバージョンアップする前に使いたいjQuery Migrate 各種ツールを使って効率的に変更すべき箇所を特定 jQueryのバージョンアップ準備時に役立つツール群と活用アイデア • Hugoで出力した静的サイトであるという前提を踏まえてAIに端的に指示 • jQuery Migrateで修正すべき箇所を把握 • Claude CodeとPlaywright MCPサーバーで要変更箇所の特定と動作確認 ➢ 保守を引き継いだ直後に抱えていたバージョンアップに対する不安が解消 23
24. まとめ 24
25. jQueryをバージョンアップする前に使いたいjQuery Migrate まとめ まとめ • jQueryが使われているサイトの保守を引き継ぐことになっても各種ツール を使えば自信を持ってjQueryのバージョンアップに臨むことができる • jQuery Migrateでバージョンアップ前に影響範囲を効率的に把握できる • さらにAIを活用することで各種作業を省力化できる • 20年以上開発および保守が行われているjQueryに感謝 25
26. ©️ Cybozu, Inc. 26