はじめに
Shopifyのテーマ開発やカスタマイズをやっていると必ず出てくるのが「Liquid」。
HTMLやCSSのようなマークアップ言語ではなく、Rubyベースで作られたテンプレート言語です。
エンジニア視点で言うと「ロジックは最低限だけど、ビュー層を強化するためのミニ言語」といった位置づけ。
この記事では、実務で本当に使うLiquidのタグやフィルタ、構文を中心に整理します。初心者が最初につまずきやすい部分から、中級者でも意外と知らないテクニックまで、幅広くまとめました。
1. Liquidの基本構造
Liquidは大きく分けて3種類の構文を持ちます。
- 出力（Output） →
{{ ... }}
値を表示する。例：{{ product.title }} - タグ（Tags） →
{% ... %}
制御文やロジックを実行する。例：{% if product.available %} - フィルタ（Filters） →
{{ title | upcase }}
値を加工して表示する。
これを組み合わせることで、「データを呼び出し → 条件分岐で制御 → 加工して表示」という流れを作ります。
2. よく使うタグ（Tags）
2-1. 条件分岐 {% if %}
{% if product.available %}
<p>在庫あり</p>
{% else %}
<p>在庫なし</p>
{% endif %}
在庫表示やバッジに必須。
2-2. 繰り返し {% for %}
{% for product in collections.frontpage.products %}
<h2>{{ product.title }}</h2>
{% endfor %}
商品リストを出すときによく使う。forloop.index でカウントも取得可能。
2-3. 変数定義 {% assign %}
{% assign price = product.price | divided_by: 100 %}
一度フィルタを通した値を変数に保持するのに便利。
2-4. include / render
{% render 'product-card', product: product %}
パーシャル化してコンポーネントを呼び出せる。最近は include より render が推奨。
3. よく使うフィルタ（Filters）
3-1. 文字列操作
upcase/downcasetruncate: 30→ 文字数制限replace: '旧', '新'
3-2. 数値操作
plus: 10minus: 5times: 2divided_by: 100
3-3. 配列操作
first,lastsize→ 要素数join: ', '→ CSV形式に
3-4. 日付操作
{{ 'now' | date: "%Y-%m-%d" }}
→ 現在の日付を表示。キャンペーンの終了日などに使える。
4. 実務でよくある使い方
4-1. 在庫があるときだけ「カートに追加」ボタンを表示
{% if product.available %}
<button>カートに追加</button>
{% else %}
<span>在庫切れ</span>
{% endif %}
4-2. コレクションの商品をグリッドで並べる
{% for product in collection.products %}
<div class="grid-item">
<img src="{{ product.featured_image | img_url: '300x300' }}">
<h3>{{ product.title }}</h3>
</div>
{% endfor %}
4-3. 特定のタグを持つ商品だけにラベルを表示
{% if product.tags contains 'New' %}
<span class="badge">NEW</span>
{% endif %}
5. 中級者向けテクニック
5-1. unless
{% unless product.available %}
<p>在庫なし</p>
{% endunless %}
if not の代替で使いやすい。
5-2. case / when
{% case product.type %}
{% when 'Shoes' %}
<p>靴カテゴリー</p>
{% when 'Bag' %}
<p>バッグカテゴリー</p>
{% else %}
<p>その他</p>
{% endcase %}
条件が多いときにスッキリ。
5-3. with の活用
{% render 'price', product: product %}
コンポーネント化でDRY原則を守れる。
6. Liquidを学習するステップ
- 公式ドキュメントを読む
Shopify公式のLiquidリファレンスは最も信頼できる。 - テーマを実際に触る
DawnやCraftなど無料テーマを編集しながら理解。 - 小さな改造から
- テキストの差し替え
- バナーの追加
- 在庫バッジの表示
- 他人のコードを読む
GitHubに公開されているテーマコードを見ると勉強になる。
7. 難易度とつまずきポイント
- 変数のスコープ → forループ内外で参照できないことがある
- JSとLiquidの違い → クライアントサイドで動的変更はLiquidだけではできない
- キャッシュ → Liquidの変更がすぐに反映されない場合がある
👉 エンジニア的には「思ったよりロジックが弱い」と感じるかもしれません。でもその分、フロント側の制御がシンプルにできるのが利点です。
8. Liquidをマスターするメリット
- Shopify案件を取れる確率が一気に上がる
- コード改修が速くなる → クライアントからの信頼も上がる
- テーマをゼロから構築できるようになる
まとめ
Liquidは「エンジニアなら必ず押さえておきたいShopify専用言語」。
複雑なアルゴリズムを組む言語ではありませんが、Shopifyのデータ構造と組み合わせることでストアを自由に操れる武器になります。
まずは if / for / assign / filters から慣れていき、徐々に render や case を使いこなしていくのがオススメです。
コメント