【Shopify】世界一丁寧なLiquidの解説

本記事の所要時間：10分

Liquidの解説記事は多くありますが、その多くはHTML/CSSやテンプレート言語、オブジェクト指向への理解が前提となっています。本記事は、世界一丁寧なLiquidの解説を目指して作成しました。

HTML/CSSやテンプレート言語、オブジェクト指向に関する知識が不十分な方でも、なんとか読み進められるレベルにまで噛み砕いて解説しています。

Liquidとは

Shopifyではストアの見た目を開発するために「Liquid」という言語を使用します。Liquidは、HTML/CSSにShopify特有の構文を混ぜたような言語です。

HTMLでは変数を扱えませんが、Liquidでは、 {{ }}で囲まれた文字が変数名として解釈されます。

例えば、事前にtitleという変数に商品名を代入しておくことで以下のような記述ができます。

<div class=”title-display”>
  <h1>{{ title }}</h1>
</div>

HTMLの復習をすると、<h1>は大きな文字で見出しを表示するタグです。

titleに「りんご」という値が代入されていれば、画面には大文字で「りんご」と表示されます。

Liquidの「{{ }}」と「{% %}」

Liquidは、HTMLの中にShopify特有の構文が混ざったものです。HTMLにLiquid特有の構文を埋め込む方法は2つあります。

二重括弧「{{ }}」を使う方法

1つ目は二重括弧「{{ }}」を使う方法です。

以下のコードは、Shopifyストアにデフォルトで設定されているテーマであるDawnから抜粋しました。(参照)

<form action=”{{ routes.search_url }}” method=”get” role=”search search-modal__form”>

HTMLでは<form>を使ってユーザに情報を入力させ、actionに設定したURLにその情報を送ることができます。

通常のHTMLでは<form action=”/create-infomation”>などと記述されますが、Liquidでは上記のように変数を埋め込むことができます。

変数を埋め込むことで、より柔軟で使いまわせるコードになります。

「routes.search_url」という構文については後ほど説明します。

実際にストアの見た目が表示されるときには、{{ }}の中にある変数が代入された値にすり替わります。そして通常のHTMLとしてサイト訪問者に表示されます。

「{% %}」を使う方法

HTMLにLiquid特有の構文を埋め込む方法の2つ目は、「{% %}」を使う方法です。

「{{ }}」が変数を値にすり替える(評価する)ものだったのに対して、「{%  %}」は場合分けや繰り返しに使用されます。

以下のものはDawnからコードを引用してきました。(参照)

1: {%- if section.settings.logo != blank -%}
2: 	{%- assign image_size = section.settings.logo_width | append: ‘x’ -%}
3: 	<img srcset=”{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x”
4: 		sec=”{{ section.settings.logo | img_url: image_size }}”
5: 	 	loading=”lazy”
6:		class=”header__heading-logo”
7:		width=”{{ section.settings.logo.width }}”
8:		height=”{{ section.settings.logo.height }}”
9:		alt=”{{ section.settings.logo.alt | default: shop.name | escape }}”
10:	>
11: {%- else -%}
12: 	<span class=”h2”>{{ shop.name }}</span>
13: {%- endif -%}

1行目と、11行目と、13行目がセットになっています。{%%}で囲われた中身は、見た目としては現れません。

その代わりに上記の例では、{% if 条件 %}のように条件が記述され、場合分けに使われています。

1: {%- if section.settings.logo != blank -%}

これは「section(セクション)のsettings(設定)にあるlogo(ロゴ)が、blank(空欄)だった時」という条件を意味します。

その条件を満たせば

2: 	{%- assign image_size = section.settings.logo_width | append: ‘x’ -%}
3: 	<img srcset=”{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x”
4: 		sec=”{{ section.settings.logo | img_url: image_size }}”
5: 	 	loading=”lazy”
6:		class=”header__heading-logo”
7:		width=”{{ section.settings.logo.width }}”
8:		height=”{{ section.settings.logo.height }}”
9:		alt=”{{ section.settings.logo.alt | default: shop.name | escape }}”
10:	>

が表示され、その条件が満たされなかった場合に

12: 	<span class=”h2”>{{ shop.name }}</span>

が表示されるというわけです。

「{%%}」は、ifで条件を表現するだけでなく、for構文で同じ要素を何回も繰り返して表示したり、assign構文を使って変数に値を代入することなどができます。

本章のまとめ

・「{{  }}」は変数の値を表示するのに使われる。
・「{% %}」は場合分けや繰り返しなどを実現するのに使われる。

次の章では、あらかじめ設定されている変数である「オブジェクト」について解説します。本章で学んだ「{{ }}」でオブジェクトを囲むことで、実際にその値が評価されます。

その次の章では「{% %}」で囲われるタグ(tags)について解説します。

Liquidの「オブジェクト」について

Liquidの「オブジェクト」は、「{{ }}」や「{% %}」の中で参照できる変数です。

オブジェクトに、「.」を使ったドット構文を適用することで、オブジェクトの性質や要素といった情報を取り出すことができます。

例えば、Liquidのオブジェクトに「shop」というものがあります。

「shop」はそのストア自身を表すオブジェクトです。以下のような性質・要素を持っています。

(ここに載っていない性質・要素もあります。詳しく確認したい方はコチラを参照してください。)

このように「shop」と「.」によって、ストアの性質や要素にアクセスできます。

前の章で紹介したコードの12行目を見てください。

1: {%- if section.settings.logo != blank -%}
2: 	{%- assign image_size = section.settings.logo_width | append: ‘x’ -%}
3: 	<img srcset=”{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x”
4: 		sec=”{{ section.settings.logo | img_url: image_size }}”
5: 	 	loading=”lazy”
6:		class=”header__heading-logo”
7:		width=”{{ section.settings.logo.width }}”
8:		height=”{{ section.settings.logo.height }}”
9:		alt=”{{ section.settings.logo.alt | default: shop.name | escape }}”
10:	>
11: {%- else -%}
12: 	<span class=”h2”>{{ shop.name }}</span>
13: {%- endif -%}

{{ shop.name }}と記述することで、ストアの名前を表示しています。ただし、1行目に記述されている条件が満たされた場合は表示されません。

Liquidでは「shop」の他にも数多くのオブジェクトを使用することができます。その一部を表にまとめました。

それぞれのオブジェクトがドット構文でアクセスできる性質・要素を持っています。

本章のまとめ

・Liquidの「オブジェクト」は、テーマの中で参照できる変数。shop、card、customerなどのオブジェクトがある。
・オブジェクトにドット構文を適用して、オブジェクトの性質や要素にアクセスできる。shop.nameなど。

Liquidのタグ(tags)について

先ほど紹介したifやforは、Liquidでは「タグ」と呼ばれています。タグは、{% %}の中で記述されると、それぞれ特別な意味を持ちます。

ifは場合分けという意味を持ち、forは繰り返すという意味を持ちます。

Liquidで使用できるタグは4種類に分類できます。

流れを制御するタグ(Control flow tags)

コードの塊を表示する条件を設定するタグ。

例) if, else/elsif, unless

繰り返しタグ(Iteration tags)

コードの塊を繰り返し表示するタグ。

例) for, else, break, continue

変数タグ(Variable tags)

変数に値を代入したり、変数に格納されている数値に+1するタグなどがある。

例) assign, capture, increment

その他のタグ(Theme tags)

コード中に実際の見た目に影響を及ぼさないコメントを埋め込んだり、テーマの要素であるsectionを呼び出すタグなどがある。

本章のまとめ

・ifやforはタグと呼ぶ
・タグには、流れを制御するタグと繰り返しタグ、変数タグ、その他のタグがある。

【まとめ】

LiquidにはHTMLに独自の構文を埋め込む2つの方法があります。「{{ }}」で囲う方法と「{% %}」で囲う方法です。

「{{  }}」は変数の値を表示するのに使用します。「{% %}」は場合分けや繰り返しなどを実現するために使用します。

Liquidの「オブジェクト」は、「{{ }}」や「{% %}」の中で参照できる変数です。オブジェクトに「.」を使ったドット構文を適用することで、オブジェクトの性質や要素といった情報を取り出すことができます。

{% %}の中ではタグ(tags)を使用することができ、それぞれのタグは特別な意味を持ちます。

コードの塊を表示する条件を設定したり、コードの塊を繰り返し表示したり、変数を扱ったりするのに使えます。

本記事を最後まで読んだあなたは、他のLiquidに関する解説記事が読みやすくなっていると思います。

今回ご紹介した内容はLiquidの入り口なので、是非さらに先に進み、テーマ開発のスキルを磨いていってください。