いつもお世話になっております。
テーマ内のコードを見ていると、
で書かれているコードと{% javascript %}で書かれているコードがあるのですが、 これらはどのように使い分けられているのでしょうか？ よろしくお願いいたします。るん 様
お世話になっております。
フルバランスのドウケです。
ご質問を確認いたしました。
最近、私も同じ疑問を持っておりました。
こちらの記事、ご参考になりませんでしょうか。
1つ目のAnswerの上段に、javascriptタグの使用例
下段に、scriptタグの使用例が記述されておりました。
https://stackoverflow.com/questions/64507365/how-does-shopifys-javascript-tag-work
なにかヒントになれば幸いです。
私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。
分からない点があれば、またいつでもご連絡ください。
1 Like
フルバランス
ドウケ様
いつもお世話になっております。
お返事が遅くなってしまい、申し訳ありません。
参考記事確認させていただいたのですが、私には難しくてよく理解できませんでした。
ドウケ様的にはどのような理解でしょうか？
よろしければ教えていただけると助かります。
よろしくお願いいたします。
{% javascript %}{% endjavascript %}
上記はセクションのLiquid構文が使えるJavascriptで、scripts.js として全てをまとめた圧縮ファイルになり、 {{ content_for_header }} の１つとして****に出力されます。
（ブラウザのDevToolでNetworkから探して中を見てください）
ソース見るとdeferになっているので、DOM構築中もバックグラウンドでロードされ、DOM構築後に実行されます。
一方で****のほうは、それぞれのLiquidの中にあるので、ロードされる順番もバラバラだと思います。
どちらが最適なのかは設計次第だと思います。
1 Like
ちなみに同様に
{% stylesheet %}{% endstylesheet %}
も
styles.css としてまとめられ、 {{ content_for_header }} の１つとして****に出力されます。
1 Like
_osamu_iwasaki_様
ご回答ありがとうございます。
お返事が遅くなってしまい、大変申し訳ありません。
そのような違いがあるのですね。
すごく良く理解できました。
ただ勉強不足で、ネットワークでファイルを探す方法がわかりません。
よろしければそちらもお聞きして良いでしょうか？
よろしくお願いいたします。
こちらはCHROMEですが公式ヘルプご覧ください
https://support.google.com/campaignmanager/answer/2828688?hl=ja
1 Like
_osamu_iwasaki_様
{% javascript %}{% endjavascript %}とタグの違いについて、またCSSにつきましても詳しく教えていただきまして、ありがとうございました。
検証ツールでもいろいろ確認できることも教えていただきまして、ありがとうございます。
検証ツールの使い方も勉強しようと思います。