Liquid

定義

Liquidとは、Shopifyが開発しオープンソース化したテンプレート言語です。HTMLの中に独自のタグやオブジェクトを埋め込み、商品データ・顧客情報・在庫状況などを動的にレンダリングするために使われます。Rubyで書かれたテンプレートエンジンで、2006年にTobias Lütke氏によって開発され、現在はShopify以外にもJekyllやSalesforce Commerce Cloudなどで採用されています。

Liquidは「ロジックを書く言語」ではなく「表示を制御する言語」です。PHPやRubyのようなサーバーサイド言語と異なり、テーマ開発者がデータベースを直接操作したり、任意のコードを実行したりすることはできません。このサンドボックス設計により、マーチャントが安全にテーマをカスタマイズできる仕組みを実現しています。

类比（たとえ話）

Liquidは「料理のレシピカード」に似ています。キッチン（Shopifyのサーバー）には膨大な食材（商品データ、顧客データ、注文履歴）がありますが、料理人（テーマ開発者）は自由に冷蔵庫を漁ることはできません。代わりに「この食材を使って、この手順で盛り付けてください」と指示を書いたカードがLiquidです。カードに書かれた通りにキッチンが料理を完成させ、顧客（買い物客）に提供されます。

別の言い方をすれば、Liquidは「動的な型抜き」です。HTMLというクッキー生地に、{{ product.title }}という型を押し当てると、その商品名が浮かび上がる。商品が変われば、同じ型から違う文字が現れる。これがLiquidの本質です。

公式・基本構文

Liquidの構文は大きく3種類に分かれます。

1. オブジェクト出力：{{ product.price | money }}
2. タグ（制御構文）：{% if product.available %} 在庫あり {% endif %}
3. フィルター：{{ product.title | upcase | truncate: 20 }}

具体的なデータ例：

- {{ product.price | money }} → 商品価格が「¥3,980」のように通貨フォーマットで出力される

- {% for product in collection.products limit: 12 %} → コレクション内の商品を最大12件ループ処理

- {{ cart.total_price | divided_by: 100 }} → カート合計金額を100で除算（セント→円換算など）

Liquidのフィルターはパイプ|で連結でき、money、date、img_url、defaultなど50種類以上が標準搭載されています。

比較表：Liquid vs 他テンプレート言語

項目	Liquid	Twig	Jinja2	Handlebars
開発元	Shopify	SensioLabs	Pallets	Yehuda Katz
主な用途	ECサイト（Shopify）	PHP CMS	Python Web	JSフロント
サンドボックス性	非常に高い	中程度	低い	中程度
学習コスト	低い	中程度	中程度	低い
カスタムロジック	制限あり	拡張可	拡張可	ヘルパー登録可
EC向けフィルター	豊富（money等）	少ない	少ない	少ない
採用プラットフォーム	Shopify, Jekyll	Drupal, Craft	Django, Flask	Ghost, Ember

Liquidの最大の特徴はEC特化フィルターの充実度です。たとえばmoney_with_currencyフィルターは、ストアの通貨設定に基づいて「¥3,980 JPY」のように自動整形します。これは他のテンプレート言語にはない強みです。

応用シーン（DTC/ECでの実用例）

1. 商品バリエーションの動的表示

{% for variant in product.variants %}
  {% if variant.available %}
    <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
  {% endif %}
{% endfor %}

在庫切れのバリエーションを自動的に非表示にし、購入可能なSKUのみをドロップダウンに表示します。

2. カート内の送料無料判定

{% if cart.total_price >= 10000 %}
  送料無料
{% else %}
  あと{{ 10000 | minus: cart.total_price | money }}で送料無料
{% endif %}

DTCで定番の「あと○円で送料無料」訴求を、Liquidの計算フィルターでリアルタイム表示できます。

3. 顧客タグによる会員向け表示

{% if customer.tags contains 'VIP' %}
  <p>VIP会員様限定：10%OFFクーポン</p>
{% endif %}

顧客タグを条件分岐に使い、セグメント別のコンテンツ出し分けが可能です。

4. メタフィールドを使った商品詳細

{{ product.metafields.custom.ingredients }}

管理画面で定義したカスタムフィールドを、Liquidで自由に呼び出せます。化粧品の成分表やアパレルの素材情報など、DTC特有の詳細情報に向いています。

よくある誤解・落とし穴

誤解1：Liquidで複雑な計算ができる

Liquidは四則演算程度しかできません。消費税計算や複雑な割引ロジックは、Shopify Functionsやアプリ側で処理すべきです。

誤解2：{{ }}と{% %}は同じ

{{ }}は出力、{% %}は制御です。{% product.title %}と書いても何も表示されません。

誤解3：Liquidは高速

Liquidはインタプリタ言語のため、ループを多用するとレンダリングが遅くなります。1ページあたりのループ回数は50回以内が推奨です。

誤解4：テーマを編集すれば即反映される

Shopifyのテーマエディタで保存しても、CDNキャッシュにより反映まで最大5分かかることがあります。

誤解5：LiquidでAPI連携ができる

Liquidから外部APIを直接叩くことはできません。{% include %}や{% render %}でスニペットを呼び出すのが基本です。

定義