Shopifyでのカスタマイズを進める中で、Liquidという言葉に出会ったことはありませんか？
LiquidはShopifyの心臓部とも言えるテンプレート言語ということではありますが、恥ずかしながら今年になってShopifyの関する案件に携わることになってから初めて知りました。
この言語を理解することでShopifyのカスタマイズがさらに進むことになると思いますが、なかなか難しいのも事実。少しでも理解を深めるため、まだまだ模索しながらではありますが、この記事ではLiquidの基本的な概念とその活用方法を初心者向けに解説していきます。
至らない点もあるかと思いますが、そこは何卒温かい目で見守ってください。
Liquidとは
Liquidは、Shopifyのウェブページに動的な内容を表示するためのテンプレート言語です。例えば、商品の名前や価格など、常に変動するデータをページ上で適切に表示させるためにLiquidを利用します。
もともとShopifyのために開発されたテンプレート言語ですが、その後、他のプロジェクトやプラットフォームでも使用されるようになりました。例としては、Jekyllという静的サイトジェネレータにも使用されているようです。JekyllはLiquidを使ってテンプレートを処理し、静的なHTMLを生成するというものらしいです。
HTMLとの関連性
LiquidはHTMLの中で{{ }}や{% %}の中に記述されます。
これにより、静的なHTMLの中に動的な内容を織り交ぜることができます。
<p>{{ product.name }}</p>
上記の例では、{{ product.name }}というLiquidの変数を使用して、商品名を動的に表示しています。
Liquidの基本構文
Liquidの主な構文は、変数、タグ、フィルターの3つです。
- 変数：
{{ }}で囲まれ、Shopifyのデータベースから情報を取得します。
例：{{ product.title }} - タグ：
{% %}で囲まれ、制御構文やループなどのロジックを記述します。
例：{% if user_logged_in %}...{% endif %} - フィルター：変数に
|を使用してデータの形式を変更します。
例：{{ product.title | upcase }}
変数とオブジェクト
Liquidの変数は、主にShopifyの「オブジェクト」というデータの集まりから情報を取得します。
よく使われると思われるオブジェクトの一例を以下に示します。
| オブジェクト | 説明 |
|---|---|
| product | 商品情報を取得します。 |
| collection | コレクションの情報を取得します。 |
| cart | カートの内容や情報を取得します。 |
| customer | 顧客の情報を取得します。 |
他にも多数オブジェクトはありますので、詳しくは以下のページを参照してください。
タグについて
Liquidのタグは、ウェブページ上での制御構文やループ、変数の割り当てなどのロジックを記述するためのものです。基本的には{% %}で囲む形で使用します。
タグは以下の4つのカテゴリに分類されます。
- 制御構文：
if,unless,caseなどの条件分岐を行うタグです。 - ループ：
for,cycleなど、繰り返し処理を行うタグです。 - 変数割り当て：
assign,captureなど、データを一時的に保持するタグです。 - その他：
include,commentなど、特定の機能を提供するタグです。
フィルターについて
フィルターは、Liquidの変数のデータを特定の方法で加工するためのものです。|の後にフィルター名を記述することで、変数のデータに対して様々な変換や操作を行うことができます。
以下は、よく使われるフィルターの例です。
- upcase: 文字列を大文字に変換します。
{{ "hello" | upcase }}→ “HELLO” - date: 日付の形式を変更します。
{{ product.created_at | date: "%Y年%m月%d日" }}
Liquidについてのまとめ
正直なところ、自分自身もLiquidに関して初心者の中で、どうまとめて良いのか悩みました。しかしながらLiquidはShopifyでのカスタマイズのキーとなるテンプレート言語として重要です。まだまだ足りないところは沢山あるかと思いますが、今後も上手く付き合っていかなければならないと思って、自分なりにどうにかまとめてみました。
Liquidは変数、タグ、フィルターという基本的な要素を理解し、htmlと上手く組み合わせることで、Shopifyのサイトを自由自在にカスタマイズすることができます。
初めての方でも少し勉強すれば、使いこなすというところまではいかなくとも、ページ制作するぐらいでは困ることはない程度まではなるでしょう（多分）。
今後もShopifyの運営に携わる限りは、Liquidの知識をもう少し深めて行きたいと思います。
