jQueryをバージョンアップしたときに出るエラーの原因（事例）
2022.06.07とあるサイトが1.x系(1.10.2)のjQueryを使用しており、セキュリティ上の観点から最新の3.x系（現時点で3.6.0）に切り替えたいと相談がありましたので対応しました。
調べてみたら1.10.2のjQueryのリリースは2013年でした。
通常であれば9年経てばリニューアルなどで新しいjQueryに切り替わるのですが、このサイトは部分的に改修を繰り返してましたので、jQueryをアップデートする機会がなく1.x系(1.10.2)のjQueryがおよそ9年に渡り使用されていたというわけです。
- この記事を書いた人
-
メッツ（Webデザイナー/ディレクター）
2009年～大手旅行代理店の系列会社でECサイトの管理運用
2012年～Web制作会社に転職し制作現場へ。現在は制作チーフとしてディレクションなども担当。 顧客の問題や要望を適切なサイト設計を通して解決。WordPressのテーマ開発が得意
その他Webコンサルやアクセス解析/サイト改善の提案を行う
jQueryのバージョンアップで起こる不具合
jQueryが古くなったのであれば新しいのに切り替えれば良いのですが、それで終わりといった単純な話ではありません。新しいjQueryに差し替えたら色々とエラーが生じる可能性があります。
古い仕様のjQueryをベースに作られていたライブラリを使用している場合、新しいjQueryと合わず画面が崩れてしまうことがあります。
また廃止された関数が使われていたり、古い記述が入っていると不具合を起こすことがあります。
今回私がサイトのjQueryのバージョンアップを行う上で対応した事例を3つ紹介していきます。
ちなみに私はjsのエラーなどはChromeのデベロッパーツールで確認しながら解消してます。
デベロッパーツールの使い方はこちらの記事をご覧ください。
記述の修正
//修正前
$('a[href*=#page-top]').click(function() {
}
↓
//修正後
$('a[href*="#page-top"]').click(function() {
}
分かりますでしょうか？
hrefに「#page-top」が設定されたa（アンカー）タグをクリックイベントの処理ですが、よく見てみると修正前の「#page-top」がダブルクォーテーション(“”)で囲まれてません。
古いjQueryではダブルクォーテーションで囲まれてなくても特に問題ありませんでしたが、3.x系のjQueryに切り替えたらエラーになりクリックイベントが行われませんでした。
こういった文法による問題が起こります。
廃止された関数
//修正前
.size()
↓
//修正後
.length
サイト内でjQueryベースで様々なjsファイルを作成してましたが、いくつかのファイルで.size()にてエラーが起こりました。
.size()は要素の個数を取得する関数なのですが、調べてみると.size()は2.x系で非推奨になり、3.x系で廃止になったようです。参考はこちら>
代替えとして.lengthが使えるとのことですので関数を差し替えたところエラーが解消されました。
古いライブラリー
スライダーのライブラリーとしてbxsliderがサイト内で多々使っており、jQueryを3.x系にしたらbxsliderの箇所が思いっきり崩れエラーになりました。
bxsliderは他の一般的な企業サイトでも使用されているのをよく見かけますが、3.x系で使えないとなると多くのサイトで影響が出るはずです。しかし3.x系でも稼働しているサイトがいくつかありましたし、bxsliderの公式サイトも現役で運営しております。
試しに最新のbxsliderのjsファイルに差し替えてみたところエラーが解消されました。
どうやら運用側で最新のjQueryに対応するようにアップデートを行っているようです。
ファイルをみたらバージョンも変わってました。
jQueryを1.x系から3.x系に切り替えたらエラーが起きた古いbxsliderは「v4.1.1」でした。今回新たに入手して差し替えたbxsliderは「v4.2.1d」で、こちらはエラーが起こりませんでした。
最後に
以上今回は「記述の修正」と「関数の修正」そして「ライブラリーファイルの差し替え」でサイト内のエラーが解消されて晴れて新しいjQueryで稼働を始めることができました。
サイトによってはこれ以外にも改修する箇所が出てくることもあると思いますが、こちらで紹介したエラー事例を念頭に置いておけば素早く対応することが出来るかと思います。
ちなみに今回の作業サイトは結構規模の大きなサイトでしたのでどこでエラーが起こるか皆目見当もつきませんでしたが、幸いにもテストサイトがありましたので一度テストサイトのjQueryを切り替えて盛大にエラーを発生させて確認することが出来ました。
そこまでアクセスの多いサイトでなければ時間帯を考慮して作業しても良いかもしれませんが、もし影響が大きくなりそうであればテストサイトなどを使用する事をお勧めします。
WordPressのテストサイト構築はこちら↓
