Shopifyをカスタマイズする時に出てくる「Liquid」という言語について解説していきます。
プログラミング経験がないととっつきにくく、ドキュメントも今は英語がほとんどなので、敬遠される方も多いと思います。
しかし、Shopifyをカスタマイズするには避けては通れないので、プログラミング経験がない方でもできるだけ理解できるように解説していきます。
Liquidとは？
Liquidの説明文で「Liquidは、ShopifyがRubyで開発したテンプレート言語です。」という文章が当たり前のように記述されていますが、ほとんどの人は意味が分からないと思います。
Rubyは一種のプログラム言語とだけ理解しておけばいいでしょう。
深く知っても意味はありません。
まず、Webページというのは、HTML、CSS、JavaScriptという言語で作られています。
ECサイトのように、いろいろ条件でWebページの表示内容を変えたい場合、条件を記述することが必要になります。
その条件を記述するのがテンプレート言語です。
テンプレート言語は、
- サーバーのエンジンによって解釈され
- 用意されているHTMLテンプレートを読み込み
- テンプレートにある変数に処理された値を埋め込んでいき
- HTMLを書き出します
つまり、通常のWebページでは静的なページしか表示されませんが、テンプレート言語を使うことで、より表現豊かなWebページを表示できるということです。
Liquidの基本構文
Liquidは、HTMLの文中にコードを直接記述することができます。
Liquidで書かれたファイルをShopifyサーバーがHTMLに変換し、サイト上に表示されます。
変数
{{ }}の中に変数名を記述することで、出力したいデータを表示することができます。
Shopifyの公式ドキュメントでは、{{ }}のことを「Objects」と呼んでいます。
{{ product.title }}
と記述すれば、
商品タイトル
が表示されます。
{{ }}の中には、
- オブジェクト
- オブジェクトのプロパティ
- 文字列
のいずれかを記述します。
{{ product.title }}の場合、productがオブジェクトで、titleがプロパティになります。
オブジェクトとプロパティについての解説は、Liquid referenceを参照しましょう。
https://shopify.dev/docs/themes/liquid/reference/objects
処理（ロジック）
{% %}の中にロジックを記述することで、処理が実行されます。
Shopifyの公式ドキュメントでは、{% %}のことを「Tags」と呼んでいます。
処理（ロジック）は、
- 変数の定義
- if文
- for文
などを行います。
変数の定義
Liquidではassignで変数を定義します。
{% assign myName = 'Growth Shop' %}
変数「myName」に対して、文字列「Growth Shop」を定義しました。
if文
条件文を書くことが出来ます。
{% if myName == 'Growth Shop' %}
<p>わたしの名前はGrowth Shopです</p>
{% endif %}
elseifを含んだif文の書き方は、
{% if myName == 'Growth Shop' %}
<p>わたしの名前はGrowth Shopです</p>
{% elsif myName == 'Taro' %}
<p>わたしの名前はTaroです</p>
{% else %}
<p>わたしの名前は不明です</p>
{% endif %}
注意するポイントは、Liquidでは、「elseif」ではなく「elsif」と記述します。
for文
ループ処理を記述することができます。
{% for product in collection.products %}
{{ product.title }}
{% endfor %}
collection.productsの数だけループし、商品タイトルを出力します。
Tagsについての解説は、Liquid referenceを参照しましょう。
https://shopify.dev/docs/themes/liquid/reference/tags
Filters（フィルター）
{{ | Filter }}と記述することで、オブジェクトや出力の内容を変更することができます。
{{ 'growth shop' | capitalize }}
単語の一文字目を大文字に変えるcapitalizeフィルターを使うと「Growth shop」と出力されます。
{{ 'Growth shop' | append: '.jpg' }}
文字列を結合するappendフィルターを使うと、「Growth shop.jpg」と出力されます。
{{ 'Growth shop' | remove: 'shop' }}
文字列を削除するremoveフィルターを使うと、「Growth」と出力されます。
{{ 'shop.css' | asset_url }}
テーマのassetフォルダにあるファイルのURLを返すasset_urlフィルターを使うと、「//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.css?28253」と出力されます。
フィルターには、
- Array filters
- Color filters
- HTML filters
- Math filters
- Money filters
- String filters
- URL filters
- Additional filters
Filtersについての解説は、Liquid referenceを参照しましょう。