【まとめ】jQueryが正常に動作しない時の対処方法2023.05.08jQueryを使い始めると、うまく動作しない場面にたくさん遭遇するようになります。そんな時に多くの場合は、「ブラウザのデベロッパーツールのコンソールでエラーを確認する」ことで原因を知ることができます。場合は...jQuery本体が抜けているjQuery本体が重複しているjQuery本体の設置場所が適切じゃないjQueryのバージョンが古いjQueryスクリプト自体にエラーがあるのどれかに当てはまることが多いです。これらの対処方法については、後ほど簡単に解説していきます。今回は、今まで動作していたのに急に動かなくなったり、PCでは動くのにスマホでは動かないなどのイレギュラーな場合について解説していきたいと思います。紹介した事例に当てはまらない場合もあるので、解決のヒントとして活用していただければ幸いです。まとめよくあるjQueryのトラブル解決方法jQueryが動かないというトラブルは結構頻繁に起こるので、おかしいなと思ったらまずはデベロッパーツールを使ってエラーメッセージが出ていないか確認してみましょう。デベロッパーツールの使い方については改めて別の機会に紹介したいと思います。jQuery本体プログラムが抜けているブラウザのデベロッパーツールのコンソールを開いてみると、以下のメッセージが出てくることがあります。definedこのメッセージは、「キャッチできなかった参照エラー:jQueryが見つかりません」($が見つかりません)という内容になっています。このメッセージが出力される場合は、ほとんどjQuery本体プログラムが読み込まれていないことが多いので、ページソースを表示して記述を確認してみましょう。記述していない場合は追加し、記述している場合はリンクURLの記述が間違っていないか今一度確認してください。WordPressでサイト制作を行なっている場合は、functions.phpの中でjQuery本体プログラムの出力を除外している場合もあるので、ファイル内の記述も確認しておきましょう。jQuery本体プログラムが重複しているWordPressでサイト制作を行なっていると、jQuery本体プログラムの記述はwp_head()の中で定義されているので、他の箇所でjQuery本体プログラムの記述をしてしまうと、二重定義になってしまうことがあります。jQuery本体プログラムが重複していると、予期せぬ不安定な動作をすることがあります。ある箇所は動作するのに、他方では動作しないとか、昨日は動作したのに今日は動作しないとか...必ずしもそうとは限らないのですが、原因不明のおかしな動作の場合は、この重複の可能性があります。何か不自然な動作をする場合は、プログラムが重複していないか確認してみましょう。確認の方法としては、ブラウザの「ページのソースを表示」でHTMLコードを表示してそれに対して「jquery」で検索してみてください。重複していた場合、ひとつだけ残して動作確認してみます。改善しない場合は、元に戻して他方のプログラムを残して動作確認しましょう!jQuery本体プログラムの設置場所が適切じゃないjQuery本体プログラムは正しく記述されているのにも関わらず、正常に動作しない場合、HTMLやPHP上の記述する場所に問題がある可能性があります。本体プログラムより前にスクリプトを記述している場合、そのスクリプトは正常に動作しません。src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>上記のような記述の場合、スクリプトより下にjQuery本体プログラムがあるため、スクリプトは動作しません。対応策としては、本体プログラムの記述をスクリプトより上に移動させます。jQuery本体プログラムのバージョンが古いjQuery本体プログラムのバージョンが古い場合も動作不全を起こしてしまうことがあります。これはブラウザがアップデートされたり、jQueryライブラリが更新されると、サポートから除外されてしまうことに起因します。現象としては、Aのライブラリは動くけど、Bのライブラリは動かないCのブラウザでは動くけど、Dのブラウザでは動かないPCでは動くけど、スマホでは動かない(その逆も)のようなものが発生する恐れがあります。jQuery1.xや2.xの古いバージョンを使っている場合は、できるだけ最新のバージョンを使うようにしましょう。(最新すぎると不具合がある場合もあります...)CDNを使っている場合は、URLに記載されているバージョン番号を書き換えるだけで使える場合もありますが、念の為リリースされているURLを取得して貼り直してください。あまりに古いバージョンから最新バージョンに本体プログラムを変えてしまうと、ライブラリが動作しない場合もあるので、その時はライブラリも最新のものに変えてみましょう。jQueryスクリプト自体にエラーがある本体プログラム側の問題ではなく、自作したjQueryスクリプト自体に問題があると当然動きません。その場合は、エラーのある箇所についてデベロッパーツールにエラーメッセージが表示されるので、内容を確認してエラーを取り除いてください。jQueryスクリプトにエラーがあると、上記のようにデベロッパーツールのコンソールにエラーメッセージが表示されます。該当箇所とエラー内容が表示されるので、原因を究明してエラーを取り除いてください。デベロッパーツールにエラーが無い場合デベロッパーツールのコンソール画面にエラーメッセージが出ていないにもかかわらず、jQueryが動作しない場合もあります。そのいくつかの例を紹介して、対処方法を解説していきたいと思います。WordPressのプラグインで最適化しているこの場合、Javascriptの最適化をプラグインで実施していると場合によってはエラーが無いのに動作不全を起こしてしまう可能性があります。いった場合には、プラグインの設定やプラグイン事態をオフにしてみてください。サーバーキャッシュ・ブラウザキャッシュが残っているデベロッパーツールにエラーが出ていない、HTMLやJSファイル上の記述に問題が無い、という原因の特定が困難な不具合が発生した場合、サーバーキャッシュやブラウザキャッシュが残っている可能性があります。そんな時は、キャッシュをクリアしてから動作確認してみてください。意外とあっさり解決するので拍子抜けするパターンです。まとめjQueryが正常に動作しない場合についてまとめて紹介しました。今回紹介した事例を元に原因を探りながら対処していくと、ある程度の不具合は解消できると思います。それでも不具合が解消されない場合は、当スクールのワンタイムレッスンなどを活用してもらえると案外あっさり解決する場合もありますよ?その前に以下にまとめた事例と対処方法について確認してみてくださいね。キャッシュをクリアして様子を見るこれらの対策を実施しても解決しない、もしくは対策の仕方が分からないという方は、気軽にご相談ください。