最も一般的な JavaScript エラーの 1 つは、「jQuery is not defined (jQuery が定義されていません)」 です。jQuery はすべての Web サイトの約 76% で使用されており、これらのサイトでは jQuery のロードに失敗すると JavaScript コードが使用できなくなるため、これは非常に深刻な問題です。
一般的な原因
このエラーの原因は、jQuery を使用する前に jQuery をインクルードし忘れたという単純なものもあれば、サイトを本番環境にデプロイするまでわからないものもあります。よくある原因を以下に示します。
1. CDN でホストされている jQuery がブロックされている
Google Hosted Libraries などの CDN (コンテンツ デリバリー ネットワーク) でホストされている jQuery を使用している場合、ユーザー側の接続で CDN がフィルターされたり、プロキシ サービスによってブロックされている可能性があります。この問題は通常、中国やインドネシアの IP アドレスからのリクエストで発生します。
2. CDN でホストされている jQuery がダウンまたはタイムアウトしている
別のよくある原因として、jQuery スクリプトをホストしている CDN が不安定であったり、ロードに時間がかかる場合が挙げられます。ブラウザーでは通常、スクリプト タグごとに約 20～30 秒のタイムアウトがあります。
解決方法
ほとんどの場合、簡単な解決策があります。次のように、ローカルでホストされた jQuery のフォールバック バージョンを提供します。
// 最初に Google の CDN から jQuery のロードを試みる
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
// CDN のロードに失敗した場合はローカルの jQuery コピーにフォールバック
<script>
window.jQuery || document.write('<script src="http://mysite.com/jquery.min.js"><\/script>'))
</script>Rails アプリを使用している場合は、代わりに jquery-rails gem を使用して、このフォールバック プロセスを自動化できます。
この手法は、jquery.com を含む多くのサイトで使用されており、ほとんどの「jQuery が定義されていません」 エラーを解決します。CDN jQuery のロードに失敗した場合は独自のドメインからロードし、そうでない場合は CDN でホストされた jQuery を使用します。
もう 1 つの方法は、npm や別のパッケージ マネージャーを使用して jQuery をインストールし、ほかの JavaScript とバンドルすることです。まず、npm install jquery --save を実行して、次に import $ from 'jquery' を実行します。
サイトに jQuery の問題が存在するか確認するには?
ブラウザー、オペレーティング システム、国、ISP などは運用環境によって大きく異なる可能性があるため、アプリケーションの開発時にすべての JavaScript の問題を防ぐことは不可能です。
BugSnag などの JavaScript エラー監視サービスを利用することで、サイトに jQuery の問題が存在するかどうかを確認できます。BugSnag のパフォーマンス監視、エラー監視、アプリの安定性に関するソリューションは、アプリがユーザーにとって最高レベルの品質で稼働することを確実にします。BugSnag は、包括的な JavaScript エラー レポートとパフォーマンス監視を提供し、「jQuery が定義されていません」エラーはもちろんのこと、その他すべての JavaScript エラーとパフォーマンスの問題を検出します。
BugSnag 製品に関する詳細、無料評価版は、こちら。
この資料は、SmartBear の BugSnag Blog で公開されている「jQuery is not defined: Common causes and a simple solution」の日本語参考訳です。原文は、2014 年 2 月に公開されたものを加筆・修正したものです。
