タグアーカイブ jQuery

WooCommerce商品ページでjQueryが未定義になるエラーはプラグインのasync読み込みが原因

jQueryに依存したフロントエンド向けスクリプトが async 属性付きで読み込まれると、実行順序が崩れて「Uncaught ReferenceError: jQuery is not defined」が発生する。商品ページの動作不良やバリエーション選択UIの不具合につながるこの問題は、プラグイン側で強制された async 指定と prefetch ヒントを外せば解決する。

なぜ商品ページで「jQuery is not defined」が起きるのか

WooCommerce サイトで「重大なエラーが発生しました」ではなく、ブラウザのコンソールに jQuery の参照エラーが出てページの一部が動かなくなるケースがある。このエラーの多くは、JavaScript の依存関係が守られていないことに起因する。

WordPress 本体や多くのプラグインは、JavaScript を安全に読み込むために wp_register_script や wp_enqueue_script で依存関係（例：array('jquery')）を宣言している。しかし、一部のプラグインが表示速度を意識してか、最終的に出力される <script> タグに async 属性を強制的に付与してしまうことがある。

async 属性が付いたスクリプトは、ダウンロードが完了次第すぐに実行される。もしその時点で jQuery 本体（jquery-core-js）の読み込みが終わっていなければ、jQuery is not defined の参照エラーとなる。この実行順序の逆転は、キャッシュや最適化プラグインが介在するとさらに発生しやすくなる。

加えて、問題のプラグインが <link rel="prefetch"> を head 内に自ら出力している場合、ブラウザはそのスクリプトを早期取得しようとし、実行タイミングの競合がさらに深刻化する。

async 読み込みを強制している箇所を特定する手順

まず、エラーがどのスクリプトで起きているのかを絞り込む。WooCommerce 商品ページで特定の動作（数量変更、バリエーション切替など）が効かなくなったら、ブラウザの開発者ツールを開く。

調査の過程で、プラグインフォルダ（多くは /wp-content/plugins/プラグイン名/）内の enqueue.php やメインのプラグインファイルを開き、以下のような処理が入っていないか検索する。

• str_replace( ' src', ' async src', $tag ) のように script タグに async を差し込むコード
• wp_register_script で jQuery 依存を宣言しているにもかかわらず、上記で async を上書きしている箇所
• echo '<link rel="prefetch" href="' ... .js'>' の形でプリフェッチヒントを出力している処理

これらのコードが確認できれば、プラグインが意図せず実行順序を壊している原因と断定できる。

プラグインのコードを修正して async を外す方法

問題を解消するには、async の強制付与と prefetch の出力を取りやめる必要がある。理想はプラグイン開発者が修正版をリリースすることだが、すぐに動かす必要がある場合は以下のようにコードを直接修正する。修正前に必ずバックアップを取り、子テーマや独自プラグインによる上書きが可能ならそちらを優先する。

実際の修正は、プラグインファイルの該当行をコメントアウトまたは削除することで行う。

async 強制付与の無効化

includes/enqueue.php のようなスクリプト登録ファイルを開き、str_replace で async を割り込ませている箇所を探す。典型的には以下のようなコードだ。

if ( 'wcmmq-custom-script' === $handle ) {
    return str_replace( ' src', ' async src', $tag );
}

この部分全体をコメントアウトするか、条件分岐を削除して return $tag; だけを残す。これで async 属性の付与が止まり、WordPress が宣言した依存関係通りに jQuery の後で実行されるようになる。

prefetch リンクの除去

次にメインのプラグインファイル（例：plugin-name.php）を開き、wp_head 等にフックして <link rel="prefetch"> を出力している箇所を探す。

echo '<link rel="prefetch" href="' . esc_url(WC_MMQ_BASE_URL . 'assets/js/custom.js') . '">' . "\n";

この行をコメントアウトする。prefetch ヒントがなくなると、ブラウザが該当スクリプトを過度に早期取得しようとする圧力が減り、実行タイミングの競合リスクが下がる。

functions.php で上書きする方法

プラグイン本体を直接触りたくない場合は、テーマの functions.php で該当スクリプトをいったん解除し、async なしで再登録する方法もある。

function fix_custom_js_async() {
    wp_deregister_script('wcmmq-custom-script');
    wp_register_script('wcmmq-custom-script', WC_MMQ_BASE_URL . 'assets/js/custom.js', array('jquery'), $js_version, true);
    wp_enqueue_script('wcmmq-custom-script');
}
add_action('wp_enqueue_scripts', 'fix_custom_js_async', 99);

この方法でも async の強制を回避できるが、prefetch の出力は別途 remove_action で除去する必要がある。確実なのはプラグインの該当コードをコメントアウトする方針だ。

修正後も注意すべきキャッシュと最適化プラグインの影響

コード修正後にサイトを確認してもまだエラーが出る場合、キャッシュや最適化プラグインが古いスクリプトを配信し続けている可能性がある。

• 使用しているキャッシュプラグイン（W3 Total Cache、WP Super Cache など）のキャッシュを全削除する
• 最適化・高速化プラグイン（NitroPack、WP Rocket など）のキャッシュもクリアする
• サーバー側で CDN を利用している場合は、CDN のキャッシュもパージする
• ブラウザのキャッシュをクリアするか、シークレットウィンドウで動作確認する

最適化プラグインの中には、JavaScript の結合や遅延読み込み（defer）を独自に行うものもある。async を外したあとも問題が続くなら、最適化機能の「JavaScript の遅延読み込み」や「スクリプトの結合」を一時的に無効化し、問題のスクリプトが正しく読み込まれるか切り分けを進める。

よくある質問

async と defer の違いは何か

async はスクリプトのダウンロードが完了次第すぐに実行され、他のスクリプトとの実行順序が保証されない。defer は HTML の解析が完了したあとに、書かれた順序で実行される。jQuery 依存スクリプトに async を使うと実行順序が守られないため、今回のようなエラーを引き起こす。

プラグイン本体を修正するとアップデートで上書きされないか

プラグインを直接修正した場合、そのプラグインがアップデートされると修正内容は上書きされて失われる。長期的には、プラグイン開発者にバグ報告を行い、公式の修正版がリリースされるのを待つのが理想だ。それまでの間はアップデートを見送るか、修正を再適用する必要がある。

async を外しても「jQuery is not defined」が消えないのはなぜか

原因が複数存在するケースもある。ほかのプラグインやテーマが jQuery を正しく依存関係に含めずにスクリプトを読み込んでいる可能性や、jQuery そのものが何らかの理由で読み込まれていないケースが考えられる。コンソールで jQuery が本当に未定義かどうかを確認し、ネットワークタブで jQuery 本体の読み込み状況を再調査する。

子テーマで対策する利点は何か

テーマのアップデートに影響されず、修正内容を保持できる点が最大の利点だ。ただし、スクリプトの登録解除と再登録では prefetch の出力まで止められないため、完全な対策にはならないこともある。状況に応じて最適な方法を選ぶ。

この記事のポイント

• jQuery 依存スクリプトに async 属性が付くと実行順序が崩れ「jQuery is not defined」が発生する
• プラグインの enqueue.php やメインファイルで async 付与・prefetch 出力が強制されていないか確認する
• 該当コードをコメントアウトし async を外せば、依存関係が守られエラーが解消する
• 修正後はキャッシュプラグインや CDN のキャッシュをクリアして検証する
• プラグイン本体の修正はアップデートで上書きされるため、公式修正を待つか都度再適用が必要

佐々木 太陽

・ Reddit、Stack Overflow、WordPress.org フォーラムを日々巡回し、現場の悩みを拾い上げて記事化
・ WordPress、WooCommerce、Next.js などモダンWeb制作領域のトラブルシューティングが専門
・ 「検索しても答えが見つからなかった」を一つでも減らすことが目標
・ エラーメッセージから根本原因にたどり着く粘り強い調査が得意
・ 初心者がつまずきやすい箇所を先回りで解決する記事作りを心がけている