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

[るん]

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

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

<script>で書かれているコードと{% javascript %}で書かれているコードがあるのですが、

これらはどのように使い分けられているのでしょうか？

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

[株式会社フルバランス]

るん　様

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

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

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

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

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

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

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

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

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

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

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

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

[るん]

フルバランス

ドウケ様

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

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

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

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

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

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

[_osamu_iwasaki_ · Accepted solution]

{% javascript %}{% endjavascript %}

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

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

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

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

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

[_osamu_iwasaki_]

ちなみに同様に

{% stylesheet %}{% endstylesheet %}

も

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

[るん]

_osamu_iwasaki_様

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

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

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

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

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

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

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

[_osamu_iwasaki_]

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

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

[るん]

_osamu_iwasaki_様

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

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

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