FROM CACHE - jp_header
解決済

通常のscriptタグと{% javascript %}の使い分けにつきまして

るん
Shopify Partner
78 3 10

いつもお世話になっております。

 

テーマ内のコードを見ていると、

<script>で書かれているコードと{% javascript %}で書かれているコードがあるのですが、
これらはどのように使い分けられているのでしょうか?
 
よろしくお願いいたします。
1 件の受理された解決策
_osamu_iwasaki_
Shopify Partner
185 47 193

成功

{% javascript %}{% endjavascript %}

 

上記はセクションのLiquid構文が使えるJavascriptで、scripts.js として全てをまとめた圧縮ファイルになり、 {{ content_for_header }} の1つとしてに出力されます。

(ブラウザのDevToolでNetworkから探して中を見てください)

 

ソース見るとdeferになっているので、DOM構築中もバックグラウンドでロードされ、DOM構築後に実行されます。

 

一方で<script>のほうは、それぞれのLiquidの中にあるので、ロードされる順番もバラバラだと思います。

 

どちらが最適なのかは設計次第だと思います。

 

元の投稿で解決策を見る

7件の返信7

株式会社フルバランス
Shopify Partner
1441 504 644

るん 様

 

お世話になっております。

フルバランスのドウケです。

 

ご質問を確認いたしました。

 

最近、私も同じ疑問を持っておりました。

 

こちらの記事、ご参考になりませんでしょうか。

1つ目のAnswerの上段に、javascriptタグの使用例

下段に、scriptタグの使用例が記述されておりました。

https://stackoverflow.com/questions/64507365/how-does-shopifys-javascript-tag-work

 

なにかヒントになれば幸いです。

 

私たちの励みにもなりますので、

お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

 

分からない点があれば、またいつでもご連絡ください。

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
るん
Shopify Partner
78 3 10

フルバランス

ドウケ様

 

いつもお世話になっております。

お返事が遅くなってしまい、申し訳ありません。

 

参考記事確認させていただいたのですが、私には難しくてよく理解できませんでした。

ドウケ様的にはどのような理解でしょうか?

 

よろしければ教えていただけると助かります。

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

_osamu_iwasaki_
Shopify Partner
185 47 193

成功

{% javascript %}{% endjavascript %}

 

上記はセクションのLiquid構文が使えるJavascriptで、scripts.js として全てをまとめた圧縮ファイルになり、 {{ content_for_header }} の1つとしてに出力されます。

(ブラウザのDevToolでNetworkから探して中を見てください)

 

ソース見るとdeferになっているので、DOM構築中もバックグラウンドでロードされ、DOM構築後に実行されます。

 

一方で<script>のほうは、それぞれのLiquidの中にあるので、ロードされる順番もバラバラだと思います。

 

どちらが最適なのかは設計次第だと思います。

 

_osamu_iwasaki_
Shopify Partner
185 47 193

ちなみに同様に

{% stylesheet %}{% endstylesheet %}

styles.css としてまとめられ、 {{ content_for_header }} の1つとしてに出力されます。

るん
Shopify Partner
78 3 10

_osamu_iwasaki_様

 

ご回答ありがとうございます。

お返事が遅くなってしまい、大変申し訳ありません。

 

そのような違いがあるのですね。

すごく良く理解できました。

 

ただ勉強不足で、ネットワークでファイルを探す方法がわかりません。

よろしければそちらもお聞きして良いでしょうか?

 

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

_osamu_iwasaki_
Shopify Partner
185 47 193

こちらはCHROMEですが公式ヘルプご覧ください

https://support.google.com/campaignmanager/answer/2828688?hl=ja

るん
Shopify Partner
78 3 10

_osamu_iwasaki_様

 

{% javascript %}{% endjavascript %}と<script>タグの違いについて、またCSSにつきましても詳しく教えていただきまして、ありがとうございました。

 

検証ツールでもいろいろ確認できることも教えていただきまして、ありがとうございます。

検証ツールの使い方も勉強しようと思います。