「jQuery が定義されていません」エラーの解決

「jQuery が定義されていません」エラーは、特に広く使用されている JavaScript ライブラリである jQuery を Web ページに統合するのが初めての開発者にとって、Web 開発で遭遇する一般的なハードルです。 このエラー メッセージは、ライブラリがロードされる前に JavaScript コードが jQuery 構文または関数を利用しようとした場合、またはライブラリがまったくロードされていない場合に、ブラウザのコンソールにポップアップ表示されます。 本質的に、これはブラウザーが「jQuery が何なのかわからない」ということを示しており、jQuery 関連のスクリプトの実行が即時に停止されることになります。

エラーのバリエーション

「jQuery が定義されていません」エラーは、ブラウザー、環境 (開発環境と運用サーバーなど)、またはスクリプトが Web ページにどのように含まれているかに応じて、さまざまな形で現れる可能性があります。 このエラー メッセージの一般的なバリエーションとしては、次のようなものがあります。

• jQueryが定義されていません
• $が定義されていません
• キャッチされない参照エラー: $ が定義されていません
• キャッチされない参照エラー: jQuery が定義されていません
• 参照エラー: jQuery が定義されていません
• 参照エラー: $ が定義されていません
• タイプエラー: $(…)。 関数ではありません
• TypeError: jQuery(…)。 関数ではありません

WordPress の「jQuery が定義されていない」について理解する

WordPress エコシステムでは、対話性を追加し、ユーザー エクスペリエンスを向上させるために、jQuery がテーマやプラグインによって広く使用されています。 おそらく、使用しているプラ​​グインは、スライダー、ポップアップ、フォーム検証などの機能に jQuery を活用するように設計されているでしょう。 ブラウザーが「jQuery が定義されていません」と報告する場合、それは基本的に、jQuery 自体が読み込まれる前にサイトの JavaScript が jQuery 関数を呼び出そうとしているか、まったく読み込まれていないことを意味します。

WordPress でこのエラーが発生する一般的な原因

次のような、WordPress に特有のいくつかのシナリオがこのエラーを引き起こす可能性があります。

テーマとプラグイン: jQuery を不適切にエンキューしているテーマやプラグイン、または古いバージョンに依存しているテーマやプラグインがこの問題を引き起こす可能性があります。

手動編集: テーマ ファイルに対するカスタム編集、特に jQuery が手動で登録解除された場合、または誤ってエンキューされた場合に、このエラーが発生する可能性があります。

競合: 場合によっては、複数のプラグインをインストールし、それぞれが独自のバージョンの jQuery をロードしようとすると、競合が発生し、その後エラーが発生する可能性があります。

このエラーの一般的な原因

スクリプトの順序が正しくない: 最も一般的な原因は、HTML ページがロードされる前に jQuery を使用しようとしていることです。jQuery に依存するスクリプトは、jQuery ライブラリの<script>タグの後に配置する必要があります。

jQuery を含めない場合: Web ページに jQuery を含めることを忘れただけで、このエラーが発生する可能性があります。jQuery ライブラリを正しくソースする<script>タグがあることを確認してください。

ライブラリの競合: 他の JavaScript ライブラリまたはスクリプトが、特に$記号も使用している場合、jQuery と競合することがあります。これにより、誤って jQuery が上書きされたり、適切に初期化されなかったりする可能性があります。

キャッシュの問題: 場合によっては、ブラウザーが jQuery を含まない古いバージョンの Web ページをキャッシュしたり、jQuery へのパスが間違っていたりして、ライブラリのロードに失敗する可能性があります。

コンテンツ配信ネットワーク (CDN) の問題: CDN から jQuery をロードしていて、CDN がダウンしているかアクセスできない場合、サイトはライブラリをロードできず、このエラーが発生します。

jQueryが定義されていないエラーを修正する方法

変更を加える前に、Web サイトの完全なバックアップを確保することが重要です。 ステージング環境または開発環境にアクセスできる場合は、その環境を使用してエラーを修正し、ライブ サイトでの直接編集による潜在的な中断を回避できます。

これらの安全対策を講じれば、「jQuery が定義されていません」エラーに対処する準備が整います。

スクリプト ソースをテストして、jQuery が読み込まれていることを確認します。

この問題の一般的な原因の 1 つは、jQuery が含まれているにもかかわらず、URL が正しくない、ネットワークの問題、ファイル アクセス許可などのさまざまな理由により、jQuery が適切に読み込まれないことです。 jQuery が正しくロードされているかどうかを確認するには、ブラウザでスクリプト ソースを直接テストするというシンプルかつ効果的なアプローチが必要です。

jQuery スクリプト ソースをテストする手順

1. まず、HTML コード内で jQuery を含む script タグを見つける必要があります。 このタグは、jQuery のロード元のソースを指定するため、非常に重要です。 コード内で次のような行を探します。

 <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

2. このsrc属性には、ロードしようとしている jQuery ライブラリの URL が含まれています。
3. scriptタグのsrc属性からURLを抽出します。これは、サイトに含める jQuery ファイルへの直接リンクです。 先頭のhttp://またはhttps://の部分を含む URL 全体を正確にコピーしていることを確認してください。
4. Web ブラウザで新しいタブまたはウィンドウを開き、コピーした URL をアドレス バーに貼り付けます。 Enter キーを押して、この URL に移動します。

jQuery ファイルが正しくロードされている場合は、jQuery ライブラリの内容全体がブラウザにプレーン テキストとして表示されます。 これは、jQuery スクリプト ソースにアクセスでき、期待どおりに機能していることを示します。

jQueryの読み込みを確認するための代替方法

ページソース経由での jQuery の読み込みを確認する方法

1. 好みの Web ブラウザを使用して、検査する Web ページに移動します。
2. Web ページ上の任意の場所を右クリックし、コンテキスト メニューから[ページ ソースの表示]を選択します。 このオプションはブラウザごとに若干異なる場合があります。
3. ソース コードを開いた状態で、jQuery スクリプト インクルードを見つける必要があります。 これは、ブラウザに組み込まれている検索機能を使用して簡単に行うことができます。
4. Windows ではCtrl+F を押すか、Mac ではCommand+F を押して検索バーを開きます。
5. 検索フィールドに「jquery」と入力し、Enter キーを押します。 このアクションにより、ソース コード内のすべての jquery が強調表示されます。
6. 強調表示された結果で、jQuery ライブラリにリンクするスクリプト タグに似た行を探します。

次のようになります。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

または、ローカルでホストされる jQuery の場合は次のようになります。

 <script src="/path/to/jquery.min.js"></script>

このような行が見つかった場合、ページには jQuery が含まれています。 そうでない場合は、jQuery が読み込まれていない可能性があり、それが発生している問題の原因となっている可能性があります。

開発者ツールを使用して jQuery の読み込みを確認する

1. Web サイトにアクセスし、ブラウザで開発者ツールを開きます。 これは通常、ページを右クリックして「検査」を選択するか、F12またはCtrl+Shift+I(Windows) /Cmd+Option+I(Mac)を押すことによって実行できます。
2. 開発者ツール内で、[ネットワーク]タブを見つけてクリックします。このタブには、Web サイトの読み込み時に行われたすべてのネットワーク リクエストが表示されます。
3. [キャッシュを無効にする]オプションをオンにし、[ネットワーク] タブを開いた状態で Web サイトを再読み込みして、すべての読み込みアクティビティをキャプチャします。
4. フィルター オプションを使用して、結果を JavaScript ファイルに絞り込みます。 通常、これを行うには、 JSフィルターを選択するか、フィルター/検索ボックスに「jquery」と入力します。
5. ロードされているスクリプトのリストをスクロールするか、「ネットワーク」タブ内の検索機能を使用して、jQuery に関連するエントリを見つけます。 名前にjquery が含まれるファイルを探しています。これは、jQuery ライブラリがロードされていることを示しています。

jQuery が WordPress に正しく含まれていることを確認します

jQuery が読み込まれていない場合、または jQuery が存在しているにもかかわらず問題が発生している場合は、それが WordPress テーマまたはプラグインに正しく含まれていることを確認する必要がある場合があります。 WordPress は、 wp_enqueue_script関数を通じてスクリプトを管理するための堅牢な方法を提供します。この方法は、スクリプトの依存関係を効率的に処理し、競合を回避するのに役立つため、推奨されます。

WordPress で jQuery をエンキューする

1. FTP クライアントまたはホスティング サービスが提供するファイル マネージャーを使用して、WordPress サイトに接続します。
2. テーマのフォルダーに移動し、 functions.phpファイルを見つけます。テーマの更新時にカスタマイズが失われないように、子テーマを作成し、そこに変更を加えることをお勧めします。
3. jQuery が見つからない場合は、次のコード スニペットをfunction.phpファイルに追加することで jQuery をキューに追加できます。

 関数 my_theme_enqueue_scripts() {

 wp_enqueue_script('jquery');

}

add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

これにより、WordPress のサイトのすべてのページに jQuery が含まれるようになります。

jQuery に依存するカスタム スクリプトを追加する場合は、次のように jQuery を依存関係としてリストしてください。

 wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0', true );

Google がホストする jQuery を使用してローカル フォールバックを実装する

Google がホストするバージョンの jQuery を Web サイトに含めることは、この人気のある JavaScript ライブラリを高速かつ信頼性の高い配信のために Google の CDN を利用する一般的な方法です。 ただし、潜在的な CDN の停止やネットワークの問題に対して Web サイトの堅牢性を維持するには、ローカル フォールバックの実装が重要です。 この設定により、何らかの理由で Google でホストされているバージョンの jQuery の読み込みに失敗した場合に、サイトでローカルでホストされているバージョンの jQuery が自動的に使用されるようになります。 この方法は、冗長性を確保しながらパフォーマンスを最適化することで、Web 開発のベスト プラクティスに準拠しています。 以下は、この戦略を効果的に実装するためのステップバイステップのガイドです。

Google がホストする jQuery を含める

まず、Google がホストする jQuery スクリプト タグを Web サイトに追加する必要があります。 このタグをHTML ドキュメントの<head>セクション内、または</body>終了タグの直前に配置して、jQuery に依存する他のスクリプトがこのタグを使用できるようにします。 例えば：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

ローカルフォールバックスクリプトを追加する

Google がホストする jQuery の script タグの直後に、小さな JavaScript を追加します。 このスクリプトは、jQuery が Google CDN から正常にロードされたかどうかをチェックします。 そうでない場合は、HTML ドキュメントに新しいスクリプト タグを動的に書き込み、ローカル ソースから jQuery を読み込みます。

 <スクリプト>

 window.jQuery || document.write('<script src="/path/to/local/jquery-3.5.1.min.js"><\/script>');

</script>

「/path/to/local/jquery-3.5.1.min.js」を、サーバー上でホストされている jQuery ファイルへの正しいパスに置き換えてください。

コードを理解する

window.jQuery : スクリプトのこの部分は、jQuery オブジェクトがグローバルに利用可能かどうかをチェックします。これは、jQuery が正常にロードされたことを示します。

document.write : このメソッドは、HTML をドキュメントに挿入するために使用されます。ここでは、CDN バージョンが読み込まれていない場合にローカル jQuery ファイルのスクリプト タグを追加するために使用されます。 エスケープ シーケンス<\/script>は、文字列がスクリプト ブロックの終わりとして解釈されるのを防ぐために使用されます。

フォールバックメカニズムを理解する

フォールバック メカニズムは、単純なチェックwindow.jQueryで動作します。 jQuery オブジェクトが定義されていない場合は、CDN バージョンが正しく読み込まれていないことを意味します。 次に、 document.writeメソッドを使用して、ローカル ファイルから jQuery をロードする新しい<script>タグを挿入します。

利点

• CDN に障害が発生した場合でも、jQuery を常に使用できるようにします。
• jQuery をローカルに読み込むと、特定のシナリオ、特に CDN バージョンの応答が遅い場合、またはユーザーのネットワークで CDN への接続に問題がある場合、レイテンシを短縮できます。
• ローカル コピーがあると、使用する jQuery のバージョンを制御できるため、一貫したテストとデバッグが可能になります。

wp-config.php ファイルにスニペットを追加します

WordPress で「jQuery が定義されていません」エラーまたは同様の JavaScript の問題を解決するためにさまざまな方法を試してもうまくいかない場合は、スクリプトの連結を無効にすることが役立つトラブルシューティング手順になる可能性があります。 スクリプト連結は、複数の JavaScript ファイルを 1 つのリクエストに結合して読み込み時間を短縮する WordPress の機能です。 ただし、特に競合が発生している場合や特定のスクリプトが正しく読み込まれていない場合、これによってエラーが発生したり、スクリプトの読み込みの問題が発生したりすることがあります。

wp-config.php ファイルの編集

FTP クライアントまたは Web ホスティング コントロール パネルが提供するファイル マネージャーを使用して、WordPress サイトのファイルにアクセスします。

テキストエディタでwp-config.phpファイルを開きます。FTP クライアントを使用している場合は、まずファイルをダウンロードし、コンピュータ上のテキスト エディタで開き、編集後にアップロードし直す必要があります。 Web ホスティング コントロール パネルでファイル マネージャーを使用している場合は、通常、ブラウザーでファイルを直接編集できます。

ファイルの一番下、「/* 以上です。編集を中止してください」という行の直前までスクロールします。ブログを楽しんでください。*/ 。ここに、次のコード スニペットを貼り付けます。

 /** WordPress ディレクトリへの絶対パス。 */

 if ( !define('ABSPATH') )

 定義('ABSPATH', dirname(__FILE__) . '/');

 定義('CONCATENATE_SCRIPTS', false);

スニペットを追加した後、変更を保存します。 ファイルをコンピュータ上でローカルに編集している場合は、必ずそのファイルをサーバーにアップロードし、既存のwp-config.phpを置き換えてください。

スニペットを理解する

ABSPATH 定義: この行は、WordPress ディレクトリへの絶対パスが正しく定義されていることを保証します。これは、WordPress が正しく動作するための基本的な要件です。

連結の無効化: `define('CONCATENATE_SCRIPTS', false);` 行は、スクリプトをリンクしないよう WordPress に明示的に指示します。これは、各スクリプトを個別にロードすることで、スクリプトの問題のデバッグに役立ち、問題の原因となっている可能性のあるスクリプトを特定しやすくなります。

jQueryライブラリを手動で追加する

jQuery ライブラリを WordPress テーマのheader.phpファイルに手動で直接組み込むことは、特に jQuery 関連の問題を解決する他の方法が成功しなかった場合に、簡単なアプローチです。 この方法により、ページ レンダリング プロセスの早い段階で jQuery が読み込まれるようになり、「jQuery が定義されていません」エラーのリスクが軽減されます。

jQuery ライブラリを手動でインクルードする方法

1. Google Hosted Librariesページに移動して、最新バージョンの jQuery にアクセスします。
2. ページにリストされている jQuery の最新バージョンを見つけて、提供されている script タグをコピーします。 T
3. FTP クライアントまたはホスティング サービスが提供するファイル マネージャーを使用して、WordPress サイトのファイルにアクセスします。
4. WordPress ディレクトリ内で、wp-content/messages/your-theme-folder/に移動し、 header.phpファイルを見つけます。your-theme-folder をテーマの実際の名前に置き換えます。
5. header.phpファイルをテキストエディタで開きます。Web ホスティング コントロール パネルからファイル マネージャーを使用している場合は、ブラウザーでファイルを直接編集できる場合があります。



6. Google ホスト ライブラリからコピーした jQuery スクリプト タグを、header.phpファイルの開始<head>タグの直後に貼り付けます。これを head セクションの先頭付近に配置すると、jQuery が早期にロードされ、jQuery に依存するすべてのスクリプトで使用できるようになります。

例えば、

 <頭>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 <!-- 以下の他の head コンテンツ -->

7. script タグを追加したら、header.phpファイルを保存します。ファイルをコンピュータ上でローカルに編集した場合は、忘れずにファイルをサーバーにアップロードし、古いバージョンのファイルを置き換えてください。

重要な考慮事項

子テーマ: テーマを直接変更する場合は、子テーマを使用することをお勧めします。 これにより、親テーマが更新されたときに変更が上書きされるのを防ぎます。

サイトをテストする: jQuery を手動で追加した後、サイトを徹底的にテストして、スクリプトが期待どおりに実行されていること、および互換性の問題がないことを確認します。

最後に

私たちのブログでは、「jQuery が定義されていません」エラーに対処するためのさまざまな解決策を説明し、jQuery が Web サイトに正しく読み込まれ、実装されていることを確認することの重要性を強調しました。 ページ ソース検査とブラウザの [ネットワーク] タブによる jQuery の存在の検証について説明し、ローカル フォールバックで補完された Google ホストの jQuery によるサイトの信頼性の強化について説明しました。 さらに、 wp-config.phpファイル内のスクリプト連結を無効にしたり、テーマのheader.phpファイルに jQuery を手動で追加したりするなど、WordPress の高度なトラブルシューティング手法を検討しました。全体を通して、Web サイトの機能とユーザー エクスペリエンスを維持するために、安全な変更のためのステージング環境や子テーマの使用など、慎重な編集実践に重点が置かれました。