jQuery1.xからjQuery3.5.1へのバージョンアップ方法

Question

バージョンが1.xのjQueryをバージョン3.5.1へアップグレードする作業を業務で行うのですが、
作業対象ファイルやコードが多く、効率が良い方法や良い落とし所がありましたら教えていただきたいと思い、
投稿いたしました。

作業対象のサイトには、jQuery本体ファイル（1.x）が約100ファイル、1.x用のjQueryプラグインや、JSライブラリが数百ファイルあります。
しかもそれらプラグインやJSライブラリのほとんどはjQuery3.xに対応しておりません。
ですので、それらをjQuery3.5.1に対応させるには、各コードを書き換えるしか方法がないと考えているのですが、
ファイル数とコード量が多いので、工数がかかると考えています。

そこで、効率のよい対応方法がありましたら教えていただけませんでしょうか？

なお、jQuery Migrateプラグインで古いメソッドやプロパティを復元させて対応することも考えたのですが、
jQuery3.xに対応したjQuery Migrate3.xは、jQuery1.xで使用されているメソッドやプロパティのうち、復元してくれないものも多く、
jQuery Migrateプラグインだけではかなりの数の古いコードが残ってしまうので、そのプラグインの使用は諦めました。

Answer 1

もしかしたら、これを機にネイティブDOMに書き直したほうがいいものもあるかもしれません。

2020年時点で通常使われうるブラウザ（モダンブラウザと、いちおうIE11）を前提にするなら、querySelector、classListやDOMContentLoaded、CSSアニメーションなど、ブラウザネイティブで実装できる機能も数多くありますし、一度jQuery依存を脱却してしまえば、もはやその部分は永遠にjQueryのアップデートを考える必要から解放されます。

Comments

[m.ts10806]

＞jQuery依存を脱却してしまえば、もはやその部分は永遠にjQueryのアップデートを考える必要から解放されます。

これはすごく、言えるかもしれませんね。
jQueryで作り込み過ぎると離れられなくなる（私もその1人）

[beicun]

maisumakunさん、ご回答ありがとうございます。
なるほど。確かにそうですね。
jQueryというライブラリを使用するからそのバージョンに左右される訳ですから。
もちろんプラグインには便利なものがありますので完全な脱却は難しいかもしれませんが、
jQuery依存の記述を減らすことは大きなメリットですものね。
参考になりました。ありがとうございます！

Answer 2

ファイル数とコード量が多いので、工数がかかると考えています。

「そういうものです」と言ったらなんですが、そういうものです。
独自に作り込みされている部分があるのでしょうし、1つ1つ地道に潰していくしかないでしょうね。
コンバートツールがあったとしても、右から左にというわけにもいかない部分もあるのでは。
「同じような機能」に変換したとしても、「同じ動作」をしてくれるとは限りません。
リファクタリングとほぼ同じく、1つ1つ挙動を確認していくしかありません。

Comments

[beicun]

m.ts10806さん

早速ご回答くださりありがとうございます。

> 1つ1つ地道に潰していくしかないでしょうね。
> 1つ1つ挙動を確認していくしかありません。

なるほど。１つ１つ根気よくしていくものということですね。
それがわかっただけでも良かったです！
覚悟ができましたので。

本当にありがとうございました。

[m.ts10806]

「リファクタリング」という観点なら
「いっそ全部1から作り直す」のも手です。
1.x系を利用しているということはHTMLも相当古い構造かと推察されます。
それなら全体的に正規化をはかったほうが、良いでしょうし、現代のブラウザにも優しい（パフォーマンス的に）作りになると思います。

[beicun]

なるほど。。
私が作業するサイトは
アプリケーションではなくコンテンツやLPの集合体なのですが、
リファクタリングという観点は役に立ちそうです。
常に更新されているので抜本的な改修は難しいのですが、
コーディングの指針を決め、それにしたがって作ってもらうことで、
徐々に統一された構造になるようにしてみたいと思います。
また、当該サイトはご推察の通り20年ほど前から存在するサイトでして、HTML、CSS、JSの全てが古いです。。
正規化してパフォーマンスを上げることができるよう考えてみます。

[m.ts10806]

まぁこれを機に全体作り直しが良いでしょうね。