📘 公式リファレンス🏷️ リファレンス/タグ中級

javascript タグ（セクション・ブロック内のコード）

セクション、ブロック、スニペット内に JavaScript コードを記述するタグ。このタグ内に書いた JavaScript は Shopify のテーマビルドシステムにより自動的に読み込まれて実行される。

用途

商品カード、カートドロワー、アコーディオンなどのセクション・ブロック内で、インタラクティブな動作（イベントリスナー、DOM 操作、アニメーション）を実装するとき。

設置場所

セクション / ブロック / スニペットのファイル内で `{% javascript %}...{% endjavascript %}` タグで囲んで JavaScript コードを記述する。セクション・ブロック・スニペットごとに1つだけ使用可能。

注意点

Liquid タグやフィルターはこのタグ内では展開されず、JavaScript として解釈されるため Liquid コードを含めるとエラーになる。動的な値（商品ID など）が必要な場合は、Liquid をセクション外で処理してから JavaScript に data 属性や window オブジェクト経由で渡す。

タグ:javascriptsectionblocksnippetevent-handling

仕様

17 行 / json

{
  "category": "theme",
  "deprecated": false,
  "deprecation_reason": "",
  "description": "Each section, block or snippet can have only one `{% javascript %}` tag.\n\nTo learn more about how JavaScript that's defined between the `javascript` tags is loaded and run, refer to the documentation for [javascript tags](/storefronts/themes/best-practices/javascript-and-stylesheet-tags#javascript).\n&gt; Caution:\n&gt; Liquid isn't rendered inside of `{% javascript %}` tags. Including Liquid code can cause syntax errors.",
  "parameters": [],
  "summary": "JavaScript code included in [section](/storefronts/themes/architecture/sections), [block](/storefronts/themes/architecture/blocks) and [snippet](/storefronts/themes/architecture/snippets) files.",
  "name": "javascript",
  "syntax": "{% javascript %}\n  javascript_code\n{% endjavascript %}",
  "syntax_keywords": [
    {
      "keyword": "javascript_code",
      "description": "The JavaScript code for the section, block or snippet."
    }
  ],
  "examples": []
}

出典・ライセンス

Source:: Shopify/theme-liquid-docs/data/tags.json
Repository:: https://github.com/Shopify/theme-liquid-docs
License:: MIT

このコードは Shopify 著作の MIT ライセンスソースです。原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

javascript タグ（セクション・ブロック内のコード）

仕様

出典・ライセンス

関連項目

doc タグ（テンプレートの注釈・ドキュメント）

include タグ（スニペットを埋め込む）

sections タグ（セクショングループを描画）

stylesheet タグ（CSS定義）

break タグ（ループの中断）

continue タグ（ループをスキップ）