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

hidechi · ‎02-29-2024

theme.liquidの<head></head>の閉じタグ間際に外部の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構築が初心者のため、かなり基本的なことかもしれないのですが、

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

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

Jizo_Inagaki · ‎03-01-2024

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

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

参考:

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

Jizo_Inagaki · ‎03-01-2024

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

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

参考:

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

hidechi · ‎03-11-2024

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

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

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

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

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

コミュニティ・ブログ記事