Step By Work

Jqueryがテストサーバーで動いていたけど、本番環境で動かない場合

上杉 洋 Hiroshi Uesugi

Date: 2016.07.06
Update: 2023.05.28

Jqueryが動かないこと、よくあります。
私も先日Jqueryが動かなくて困ったので原因と解決法を備忘録として残します。
解決法は一番下です。

テストサーバーでは動いていたのに本番環境で動かない

状況としてはお客様のWebサイトを製作中、弊社テストサーバーで構築した後、お客様本番サーバーにアップロードしました。
しかし、テストサーバーでは動いていたのに本番サーバーではJqueryが動かない。

ファイルはまるまるコピーなのでパスが間違っていたり、他のJqueryと競合していることが原因だとは考えにくい。

エラーメッセージを見よう

最近のブラウザだと大体エラー状況を見ることができます。
下の画像はChoromeのコンソールです。

5c5e01707323c53aa14836eeaa1925d1-600x336

Jquery is not definedとは?

文字通りJqueryが定義されていませんということです。
このメッセージがでる場合はJqueryのパスが間違っていたりして読み込めていないことが多いです。

その事については1行目にも書いてあります。

Failed to load resource: the server responded with a status of 404 (Not Found)

簡単に言うとJqueryが読み込めませんでした、ということです。

HTTPSサーバーからJqueryを読み込もうとしていることが原因だった

弊社のテストサーバーはHTTPサーバーだったのですが、本番環境はHTTPSでした。
HTTPSの環境からhttp://ajax.googleapis.com/ajax/libs/jquery/◯◯/jqueryを読み込むとHTTPS経由で読み込まれます。

HTTPSというのは本来セキュアな通信なので、セキュアではないHTTPから操作できるようにすると問題が発生するみたいです。

Jquery読み込み部分の先頭「http:」の部分をけして「//ajax.goo~」とすれば無事Jqueryが読み込まれました。