突然Webの動作がおかしくなる事ありますよね。 ”jQuery is not defined？”昨日まで問題なかったのに突然挙動が変になっている。調べてみました。まさかの落とし穴が?? 変更もしていないのになぜ？ 私も先日やってしまいました。気づくまで２時間以上も費やしてしました。そこで少しでもお役に立てればという思いと備忘録もかねて残しておきます。
原因は必ずある
jQueryが見つからない場合には、ブラウザにはいろいろな表示をします。
- jQuery is not defined
- uncaught referenceerror $ is not defined
もし挙動がおかしくなった場合に、ブラウザにはChromeにもFirefoxにもデベロッパーツールがあります。F12を押して起動してください。きっと上記のようなエラー表示がされていると思います。この場合は、jQueryが見つからないといっていますので、まずは根元から原因追求します。 見つからない原因は必ずあります。順を追って調べましょう
もっとも多いのは記述ミス
この記事を読まれている方にはあまりないミスかもしれません。なんといっても変更していないはずですから… でも以外と多い事例かもしれません。 単純なスペルミスをしていませんか？ やはり最後の所で確認しましょう。ブラウザからソース表示をしてよ～く観察してみてください。
ほんとうにない場合
たぶん、<script～始まるステートメントでjQueryを定義していると思いますが、jQueryもブラウザにしてみれば普通のJavaスクリプトですので、参照しているURLをそのままブラウザで表示することができますので、別のウィンドウやタブを開いてダイレクトにURLを打ち込んで表示されるかどうか確認してみてください。案外見つからないのかも
読み込む順番が違うのかも
案外気づきそうで気づかないのがこれ。本人はjQueryにばかり集中しているので、読み込み前に別のプログラムが参照しているのに気づかないことが考えられます。 JavaScriptは単純で前から順番にしか実行しません。いろいろなプログラミング言語をかじっていると、後方参照（使うのば前で、定義が後になる場合）に慣れてしまっているのかも知れません。Javaではこれはエラーです。
あるのに読み込み不可！
これもあるあるです！ jQueryをgoogleapisサイトから自サイトにコピーしている場合.htaccess等で置いてあるフォルダーを読み込み禁止にしてあり、実際に読み込みが不可になっていないかも確認してみてください。
最近のWebページはHTTPSページになっています。もし、Jqueryの読込を指定していてもSRC属性にhttp:が明示的に指定してある場合は読込がブロックされます。これもなかなか気づかない原因のひとつです。
さらに、firefoxを使っている場合はCSP（Content Security Policy)によりブロックされるので、一時的にでもCSPを無効にする必要があります。
2019年3月3日追記
ほんとうに自分じゃなかった！
今日の本題はこれです。 私は結構おっちょこちょいなんで凡ミスも多いです。これらの事を上から順番に１つ１つ確認してこの問題で２時間以上も費やしてしまいました。最後にはサンプルまで作っても確認。でも原因は見つかりませんでした。やはりどうしても動かない。ほぼ諦めかけた時、気づきました。それは、製作のためにCloudFlareをパスさせているということ。CloudFlareはサイトの高速化のためのキャッシュサーバー。あなたも使っていませんか。CloudFlareはドメイン単位で稼動させますが、サブドメインをつくると一部だけCloudFlareから切り離すことができます。 CloudFlareを通すとRocket Loderという機能がつかえます。実際には以下に示したように<script～を書き換えます。
これらのCloudFlareの機能は別の機会にしますが、切り離したサブドメインでも同じ記述が見受けられました。もうお分かりかもしれませんが、切り離したつもりが完全に切り離されずにjQueryに影響していました。 これの対処方法は２つ
- CloudFlareのRocket Loaderの機能自体をオフにする。
- 切り離さずにCloudFlareを通す
２番は必要ないかもしれませんが、これには理由があります。１番目のRocket Loaderの機能のオフは、CloudFlareのPage rulesでRocket LoaderがdefaultまたはAutomaticとなっていると思いますがこれをOffにします。でも実際にはOffにならずにリロードするとdefaultに戻ってしまいました。しかたなく私は２番で今回の問題をパスすることにしました。とりあえずこれ以上は時間をかけたくなかったので。
結論：
