🧰 ユーティリティ中級

HTML要素の動的タグ名生成

Liquid テンプレート内で HTML タグ名を動的に生成するコード例。`{{ }}` による変数展開でカスタム要素やヘッダータグを組み立てる方法を示し、Prettier のフォーマッタが複合名タグを正しく整形することを検証している。

用途

Liquid のフィルタ結果や変数を要素名に埋め込む必要があるとき。例えば、レスポンシブデザイン時に h1〜h6 を動的に振り分ける場合や、カスタム要素（`<custom-header>`）を条件付きで出力する際に参考になる。

設置場所

このコードはテストケース・ドキュメント用であり、本番テーマに直接貼り付けるものではない。動的タグ名の Liquid 構文については、section や snippet 内で必要な箇所に応じて構文を抽出して使用する。

注意点

動的タグ名は SEO やアクセシビリティ検証が難しくなるため、h1〜h6 の振り分けは heading_tag メタフィールドなど明示的な設定値に依存させるとよい。Liquid の `{{ }}` 内に複雑な計算式を書くとコンパイル時の構文検証が失敗する可能性があるため、可能なら Liquid フィルタで事前に値を算出しておく。ブラウザの DevTools では動的タグ名は HTML として正しく認識されるが、静的解析ツール（lighthouse、axe など）でエラーと判定されることがあるため、本番利用時は動作確認を十分に行う。

タグ:liquid-syntaxdynamic-markuphtml-generationformattingtesting

コード

12 行 / liquid

It should pretty print html element compound tag names
<h{{header_number}}></h{{header_number}}>
<{{header_type}}-header></{{header_type}}-header>

It should print compound names on a single line, even if long
printWidth: 1
<h{{header_number | round}} ></h{{header_number | round }}>

It should print compound names with attributes as it would
printWidth: 1
<h{{ header_number | round }} attr=value disabled></h{{ header_number | round }}>

出典・ライセンス

Source:: Shopify/theme-tools/packages/prettier-plugin-liquid/src/test/html-compound-names/index.liquid
Repository:: https://github.com/Shopify/theme-tools
License:: MIT

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

HTML要素の動的タグ名生成

コード

出典・ライセンス

関連項目

コメント後の空白フォーマット

Liquidコメントのフォーマット

セクション呼び出しの改行制御

Prettier フォーマッタの HTML リスト整形テスト

Vue.js属性のLiquid整形

sections タグのフォーマット