SWELL│Uncaught ReferenceError: jQuery is not definedの解決方法

2024.03.11

WordPressテーマ、SWELLではjQueryが使われているページは、自動で読み込める設定になっています。

ただし遅延読み込みの設定をしているとエラー発生していることがあります。

Uncaught ReferenceError: jQuery is not defined

これはChromeの検証のコンソールで確認できます。

こちらのエラーはjQueryを読み込む前にjQueryを使用したJava Scriptが実行されているよという警告になります。

本記事ではこのエラーの解決方法を紹介しております。

解決方法は簡単です。

もちろんjQuery自体をさらに読み込んでもいいのですが、それよりももっとスマートな解決方法があります。

それは実行するJavaScriptをjQueryを読み込んでから、スクリプトを実行することです。

以下はjQueryを使ったサンプルコードです。

jQuery('#myButton').click(function() {
   alert('ボタンがクリックされました！');
);

元のコードからさらにjQuery(document).ready(function($) {}を挟み込んであげましょう。

そうするとJavaScriptをjQueryを読み込んでから実行するようになり、エラーが出なくなるはずです。

jQuery(document).ready(function($) {
    jQuery('#myButton').click(function() {
        alert('ボタンがクリックされました！');
    });
});

以上です。

まとめ

jQueryを読み込むとサイトが重くなったりするので、極力使わない方がいいのですが、カスタマイズには必要になったりします。

ここでjQueryの遅延読み込みなどの高速化の設定をしているとjQuery is not definedのエラーが出やすくなるので注意しましょう。