Shopify の独自開発言語 Liquid とは？使い方から基礎知識まで徹底解説！
目次
はじめに
今回は、Shopify の独自開発言語である Liquid について、基本的な使い方や Liquid を使う上で欠かせない基礎知識について解説していきます。
この記事では、以下の読者を対象にしています。
- Shopify の EC サイトの見た目や機能を自分でカスタマイズできるようになりたい
- Liquid について学習したいけど、何から勉強すればいいかわからない
Shopify の Liquid とは？
Shopify の Liquid とは、Shopify がオープンソースで開発しているテンプレート言語です。
Liquid を使うことで動的なサイトを作ることができ、訪問するユーザ一人ひとりに最適化した情報を画面に表示させることが可能になります。
Liquid には独自の構文があり、変数を扱うことができます。その Liquid の構文を HTML 内に埋め込み、Liquid の変数の値によって表示する情報を出し分けることで、ユーザーに合わせた動的なコンテンツを表示させることができます。
Shopify を使う場合、基本的には Liquid の知識がなくても EC サイトを立ち上げて運営することができます。しかし、Liquid について理解を深めることで、より独自性のある EC サイトを作れるようになるでしょう。
Liquid の基本的な使い方
まずは、Liquid の基本的な書き方と、Liquid のオペレータについて解説していきます。
「{{ }}」と「{% %}」
Liquid のコードは、基本的に HTML の構文の中に記載していくため、コンピュータがそれらを区別するために特別な記法で書く必要があります。（PHP でいう <?php ?> のようなものです）主な埋め込み方法は「{{ }}」と「{% %}」の二つです。それぞれ解説します。
{{ }} の使い方
{{ }} は、出力を意味します。この中で書かれた文字列や変数、オブジェクトはプログラムの実行時に評価され、HTML の一部として解釈されます。
<h2>
{{ "Hello World!" }}
</h2>
出力： Hello World!
文字列等を代入した変数を {{ }} 内で書くと、代入された値を出力します。
（1 行目のコードの意味については後述します）
{% assign hello = "Hello World!" %}
<h2>
{{ hello }}
</h2>
出力： Hello World!
商品詳細ページ内で product.title とすると、その商品のタイトルを表示できます。
<h2>
{{ product.title }}
</h2>
出力： Elegant Leather Wallet
{% %} の使い方
{% %} はロジックを書く際に使用します。
この中では、条件分岐や変数の代入、計算など、さまざまなロジックを記述することができます。この中での実行結果は HTML に出力されることはありません。
下記の例では {% %} の中で変数 animal に文字列 "dog" を代入し、その変数の値がもし "cat" なら p タグに囲まれた「にゃー！」を出力し、そうでない場合は「わんわん！」を出力するロジックを書いています。（if 文の詳しい使い方については後述します）
{% assign animal = "dog" %}
{% if animal == "cat" %}
<p>
にゃー！
</p>
{% else %}
<p>
わんわん！
</p>
{% endif %}
出力： わんわん！
Liquid のオペレーター（演算子）
他の言語と同様に、Liquid にも固有のオペレーターがあります。
| オペレーター | 意味 |
|---|---|
| A = B | A に B を代入 |
| A == B | A と B が等しい時に true を返す |
| A != B | A と B が等しくない時に true を返す |
| A > B | A が B よりも大きければ true を返す |
| A < B | A が B よりも小さければ true を返す |
| A >= B | A が B 以上なら true を返す |
| A <= B | A が B 以下なら true を返す |
| A or B | A または B が true なら true を返す |
| A and B | A と B が両方 true なら true を返す |
| A contains B | A に B が含まれている場合に true を返す |
基本的には他の言語と同じなのですが、JavaScript では論理演算子が「||」や「&&」なのに対して、Liquid の場合は「or」や「and」となっているのが特徴的ですよね。
また、「contains」という見慣れないオペレーターがありますが、これはある文字列の中に部分文字列が存在するかどうかを判断するために使われます。
{% if customer.email contains "shopify.com" %}
Hey there, Shopify employee!
{% endif %}
結果：
もし顧客の email アドレスに "shopify.com" が含まれていたらいたらそれは従業員なので、従業員用のメッセージを表示する。
Liquid の基礎知識
Liquid の大きな概念として、Object と Tags と Filters があります。
これらを使いこなすことで、必要な情報を取得・加工して適切に画面に表示させることができます。
それぞれ解説していきます。
Object
Liquid の Object は「{{ }}」や「{% %}」の中で参照できるオブジェクトのことです。Object に対して「.」を使うと、その Object の中にある任意の属性を取り出すことができます。
この Object を適切に使うことで、1 つのテンプレートで全ての商品に対応できるようになり、商品ごとに商品ページをコーディングする必要がなくなります。
たとえば、 product オブジェクトには title という属性が存在しており、「{{ }}」の中でその値を出力すると、画面にその商品の商品名を表示することができます。
<p>
こちらの商品は、「 {{ product.title }} 」です！
</p>
（例 1）「Organic Cotton T-Shirt」の商品ページ内で上のコードを実行
結果： こちらの商品は、「 Organic Cotton T-Shirt 」です！
（例 2）「Luxury Silk Scarf」の商品ページ内で上のコードを実行
結果： こちらの商品は、「 Luxury Silk Scarf 」です！
Tag
Liquid の Tag とは、変数の定義や繰り返し処理を指示するためのもので、「{{% %}}」の中で使います。代表的なものでいうと、assign による変数定義や、if 文や for 文による制御フローなどがあります。
Tag を使って条件分岐や繰り返し処理を行うことで、状況にあった画面表示を実現することができます。
それでは、代表的な Tag を紹介していきます。
assign タグ
assign タグは、変数を定義・代入する際に使用します。
変数の値を出力する時は、定義した変数を「{{ }}」で囲みます。
{% assign favorite_color = "red" %}
<p>
My favorite color is {{ favorite_color }}.
</p>
{% assign favorite_color = "blue" %}
<p>
My favorite color is {{ favorite_color }}.
</p>
結果:
My favorite color is red.
My favorite color is blue.
上記の例では、初めに favorite_color を "red" の値で定義して、一度出力しています。その後、同じ変数に対して、"blue" を代入しているため、二度目の出力では "blue" が表示されます。
JavaScript では、一度定義した変数に他の値を代入する場合、変数名から書き始めます。それに対し Liquid では、代入する際も assign タグを入れる必要がある点に注意してください。
if タグ
if タグを使うことで、条件分岐を実現することができます。if タグと、endif タグに挟まれたコードは、if タグに書かれた条件が満たされた場合のみ実行されます。
また、Liquid では if タグの否定形として、 unless タグが存在します。このタグと endunless タグに挟まれたコードは、unless タグの条件が満たされない場合のみ実行されます。
{% if product.title == "UnReact" %}
<p>
You are buying some UnReact!
</p>
{% endif %}
上記のコードでは、product.title の値が "UnReact" である場合のみ、「You are buying some UnReact!」の文字列が表示されます。
{% unless product.title == 'UnReact' %}
<p>
You are not buying UnReact.
</p>
{% endunless %}
上記のコードでは、product.title の値が "UnReact" ではない場合のみ、「You are not buying UnReact.」の文字列が表示されます。
また、複数の二つ以上の条件に分岐させたい場合は elsIf タグに追加の条件分を書くことで実現できます。
{% if shipping_method.title == 'International Shipping' %}
You're shipping internationally. Your order should arrive in 2 ~ 3 weeks.
{% elsif shipping_method.title == 'Domestic Shipping' %}
Your order should arrive in 3 ~ 4 days.
{% else %}
Thank you for your order!
{% endif %}
なぜか「elseIf」ではなく「elsIf」なので、書き間違えないように気をつけてください。
ちなみに、unless タグの場合も複数条件にする場合は elsIf タグを使用します。
case / when タグ
条件分岐が多くなる場合は case / when タグを使います。case タグには条件分岐に使用する変数、when タグには、変数に対して比較したい値を指定します。when タグを追加することで、条件分岐を増やすことができます。また、どの条件にも当てはまらない時に専用の処理をしたい場合は、else タグを使うことでその処理を記述できます。条件分岐を書き終わったら endcase タグで閉じてください。
{% case shipping_method.title %}
{% when 'International Shipping' %}
You're shipping internationally. Your order should arrive in 2 ~ 3 weeks.
{% when 'Domestic Shipping' %}
Your order should arrive in 3 ~ 4 days.
{% when 'Local Pick-Up' %}
Your order will be ready for pick-up tomorrow.
{% else %}
Thank you for your order!
{% endcase %}
for タグ
for タグを使うと、その中のコードブロックを繰り返し実行することができます。
for タグでは、{% for product in collection.products %} のように、 for の後に変数名、in の後に配列を受け取ります。この場合、collection オブジェクトの products 配列に含まれる商品の数だけ繰り返し、その都度対応する商品が変数 product に代入され、コードブロック内で使用することができます。
{% for product in collection.products %}
{{ product.title }}
{% endfor %}
結果： Aurora Nebula Zenith Vertex Nimbus Eclipse Solace Vortex Haven Oasis
このように、for タグを使うことで、全ての商品に対して同じ処理を繰り返し行うことができます。
for タグは出力できる数が決まっており、1ページあたり最大50件まで出力することができます。
50件を超えて出力する場合、paginate タグを使用して複数ページにわたって表示させる必要があります。（今回は paginate の説明は割愛します）
また、配列の代わりに数値を使うこともできます。
数値を使う場合は、in の後に (1..4) というふうに初めの数字と終わりの数字を記入します。そして、対応する数字が for の後の変数に代入され、コードブロック内で参照することができます。
{% for index in (1..4) %}
{{ index }}
{% endfor %}
出力： 1 2 3 4
Liquid では以上のようなタグを組み合わせて使用することで、商品や顧客の情報に合わせて表示を切り替えたり、繰り返し表示させたりすることができます。
Filter
Filter とは、JavaScript でいうメソッドのことです。
たとえば文字列に対しては、文字列を追加する append 、全て大文字に置き換える upcase 、指定した文字列を削除する remove などがあります。
Filter を駆使することで、情報を整形して、最適な形で出力することができます。
それでは、代表的な Filter をいくつか紹介していきます。
String filter
文字列に対する Filter です。
append
文字列に文字列を追加します。
{{ '30' | append: '% OFF!!' }}
結果： 30% OFF!!
upcase
文字列を大文字に変換します。
{{ "coming soon" | upcase }}
結果： COMING SOON
remove
文字列から指定した文字列を全て削除します。
{{ "Hello, world. Goodbye, world." | remove: "world" }}
出力： Hello, . Goodbye, .
Math filter
数値に対して処理をする Filter です。
Liquid では、四則演算をするときも Filter を使います。JavaScript のように「+」「-」「*」「/」を使って表すことはできないので注意が必要です。
plus
足し算です。
{{ 3 | plus: 2 }}
結果： 5
minus
引き算です。
{{ 3 | minus: 2 }}
結果： 1
times
かけ算です。
{{ 3 | times: 2 }}
結果： 6
divided_by
割算です。
整数同士で割ると、小数点以下は切り捨てられます。
{{ 20 | divided_by: 7 }}
結果： 2
割る数に少数点以下の数値を入れると、小数点以下まで計算します。
{{ 20 | divided_by: 7.0 }}
結果： 2.857142857142857
以上が代表的な Math filter となります。
HTML filter
HTML filter は HTML 要素を生成するためのフィルターです。
Liquid のプロパティやストアの assets（画像や動画などが保存されているファイル）から HTML 要素（img タグや button タグなど）を作ることができます。
image_tag
image_tag フィルターを使うと、HTML の img タグを生成できます。
{{ 'aurora_glass.png' | asset_url | image_tag }}
出力： <img src="aurora_glass.pngのURL">
image_url
image_url フィルターは、画像の URL を返し、パラメーターとして、width と height を受け取ります。必ずどちらかのパラメーターを渡してください。どちらも渡さなかった場合はエラーが返されます。
{{ product | image_url: width: 450 }}
出力： 商品画像のURL
以上が代表的な HTML filter となります。
おわりに
今回は、Liquid 言語の基本的な使い方や基礎知識について解説しました。
この記事が皆様の Liquid 学習の一助になれば幸いです。
最後まで読んでいただきありがとうございました。
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
