Cdnの正しい記載方法について

日本語 ディスカッション 技術的なQ＆A
,

Topic summary

ShopifyのテーマファイルでjQueryやGSAP、Swiperなどの外部CDNスクリプトを読み込む際、VS Codeで「jQuery is not defined」というエラーが発生している問題について質問されています。

発生している問題:

  • theme.liquidの<head>タグ内にCDNを記載
  • ブラウザの検証ツールで「jQuery is not defined」エラー
  • VS Codeで「parser blocking scripts」の警告が表示

解決の方向性:
回答者は、これはShopifyやCDN特有の問題ではなく、HTMLとJavaScriptの基本的な仕組みに関する問題だと指摘しています。

推奨される学習内容:

  • asyncとdefer属性の使い方
  • jQueryライブラリと実行コードの読み込み順序
  • スクリプトの読み込みタイミングの制御

MDN Web Docsの<script>要素のdefer属性に関する参考リンクが共有され、質問者は調査を進めることで解決に向かっています。

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

theme.liquidのの閉じタグ間際に外部のscript CDNを記載しているのですが、

VS Code上で以下のエラーメッセージが出てしまいます。

Shopifyではどのように記載するのは正しいのでしょうか？

■CDNのコード

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

■エラーメッセージ

Avoid parser blocking scripts by adding `defer` or `async` on this tag

試しにjQueryのCDNタグに「defer」を追記してみたのですが、

今度はブラウザの検証ツール上で「jQuery is not defined」というエラーメッセージが出てしまいます…

■CDNのコード

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" defer></script>

■エラーメッセージ

Uncaught ReferenceError: jQuery is not defined

Shopify構築が初心者のため、かなり基本的なことかもしれないのですが、

皆さまのお知恵をいただけると助かります。

よろしくお願いいたします。

2

ShopifyやCDN特有のものではないと思いますので、HTMLやJSに関して学ばれることをお勧めします。

加えてasyncやdefer、それらとjQueryの関係(ライブラリと実行コードが書かれたファイルの読み込み順序)に関しましても検索すれば色々と出てくるかなと思います。

参考:

https://developer.mozilla.org/ja/docs/Web/HTML/Element/script#defer

3

ご回答いただき、ありがとうございます！

なるほど、Shopifyの仕様などに関係なかったのですね…

参考URLの共有までご丁寧にありがとうございます。こちら、調査してみます！