サムネイル

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 = BA に B を代入
A == BA と B が等しい時に true を返す
A != BA と B が等しくない時に true を返す
A > BA が B よりも大きければ true を返す
A < BA が B よりも小さければ true を返す
A >= BA が B 以上なら true を返す
A <= BA が B 以下なら true を返す
A or BA または B が true なら true を返す
A and BA と B が両方 true なら true を返す
A contains BA に 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 学習の一助になれば幸いです。

最後まで読んでいただきありがとうございました。

おすすめ Shopify アプリ

シンプルブログ記事カスタマイズ|お手軽ブログテンプレートのアイコン

シンプルブログ記事カスタマイズ|お手軽ブログテンプレート

シンプルなブログ記事カスタマイズアプリ。ストアにブログ記事カスタマイズ機能を簡単に実現できます。

シンプルお知らせ一覧|お手軽ブログ一覧挿入アプリのアイコン

シンプルお知らせ一覧|お手軽ブログ一覧挿入アプリ

シンプルなお知らせセクションアプリ。ストアにお知らせセクションを簡単に挿入できます。

シンプルブログ記事目次|自動見出し一覧挿入のアイコン

シンプルブログ記事目次|自動見出し一覧挿入

シンプルなブログ目次生成アプリ。ストアにブログ目次を簡単に表示できます。

シンプルスライドショー|お手軽画像スライダーのアイコン

シンプルスライドショー|お手軽画像スライダー

シンプルなスライドショーアプリ。ストアにスライドショーを簡単に表示できます。

シンプル流れるロゴ|流れるロゴリスト挿入アプリのアイコン

シンプル流れるロゴ|流れるロゴリスト挿入アプリ

シンプルな流れるロゴリストアプリ。ストアに流れるロゴリストを簡単に表示できます。

シンプル名入れ|お手軽名前入りギフトオプションのアイコン

シンプル名入れ|お手軽名前入りギフトオプション

シンプルな日本製の名入れオプションアプリ。商品毎に名入れオプションを追加できます。

シンプル在庫数表示|お手軽残りわずか表示のアイコン

シンプル在庫数表示|お手軽残りわずか表示

シンプルな商品の残りわずか表示アプリ。ストアに商品の残りわずか表示を簡単に導入できます。

シンプルギフトラッピング|お手軽ギフト包装アプリのアイコン

シンプルギフトラッピング|お手軽ギフト包装アプリ

シンプルな日本製のギフトラッピングアプリ。カートページに簡単にギフト包装オプションを追加できます。

シンプル購入制限|お手軽注文制限について徹底解説のアイコン

シンプル購入制限|お手軽注文制限について徹底解説

シンプルな日本製の購入数制限アプリ。商品ごとに数量の規制を行えます。

シンプルランキング表示|お手軽ベストセラーのアイコン

シンプルランキング表示|お手軽ベストセラー

購入促進!コレクションにランキングラベルを表示してストアの人気商品をアピール

シンプル顧客タグごとの限定販売|お手軽ロイヤリティのアイコン

シンプル顧客タグごとの限定販売|お手軽ロイヤリティ

日本製の顧客タグごとの購入制限アプリ。特定のタグを持つ顧客への限定販売を簡単に実現できます。

シンプルロゴ一覧|お手軽ロゴリスト表示のアイコン

シンプルロゴ一覧|お手軽ロゴリスト表示

シンプルなロゴリストアプリ。ストアにロゴリストを簡単に導入できます。

シンプル余白調整|お手軽レイアウトのアイコン

シンプル余白調整|お手軽レイアウト

シンプルな日本製の余白調整アプリ。余白を挿入することでページデザインの調整が簡単にできます。

シンプルのし(熨斗)アプリのアイコン

シンプルのし(熨斗)アプリ

シンプルな日本製のしアプリ。のし選択機能を簡単に実現できます。

シンプル画像バナー|お手軽広告バナーアプリのアイコン

シンプル画像バナー|お手軽広告バナーアプリ

シンプルな画像バナーアプリ。ストアに画像バナーを簡単に表示できます。

シンプル Q&A|どこでも FAQのアイコン

シンプル Q&A|どこでも FAQ

シンプルな Q&A アプリ。ストアに FAQ を簡単に導入できます。

シンプルモバイルアプリバナー|スマホアプリに誘導のアイコン

シンプルモバイルアプリバナー|スマホアプリに誘導

シンプルなモバイルアプリバナー。ストアにモバイルアプリバナーを簡単に導入できます。

シンプル流れる告知|流れるお知らせ挿入アプリのアイコン

シンプル流れる告知|流れるお知らせ挿入アプリ

シンプルな流れる告知アプリ。ストアに流れる告知を簡単に導入できます。

シンプル売り切れ非表示|在庫切れ商品の表示変更のアイコン

シンプル売り切れ非表示|在庫切れ商品の表示変更

売り切れ商品を非表示にすることができる日本製アプリ。売り切れになった商品を、自動的に非表示(下書き状態)にすることができます。

シンプルレビュー|お手軽口コミのアイコン

シンプルレビュー|お手軽口コミ

シンプルな日本製のレビューアプリ。レビュー機能を簡単に実現できます。

シンプル会員限定販売|お手軽アカウント必須販売のアイコン

シンプル会員限定販売|お手軽アカウント必須販売

シンプルな日本製の会員限定販売アプリ。商品毎に、ログインしていない顧客の購入制限を行えます。

シンプル会員ランク|お手軽顧客タグ付けのアイコン

シンプル会員ランク|お手軽顧客タグ付け

日本製の会員ランク管理アプリ。条件を達成した顧客に自動でタグを追加し、顧客管理を手助けします。

シンプル Wishlist|お手軽お気に入りのアイコン

シンプル Wishlist|お手軽お気に入り

商品数・お気に入り数の上限なしで使えるお手軽お気に入りアプリ。簡単にお気に入り機能を実現できます。

シンプル Coming Soon|商品ページ発売予告アプリのアイコン

シンプル Coming Soon|商品ページ発売予告アプリ

シンプルな日本製の Coming Soonアプリ。商品毎に発売予告を行えます。

シンプルセット販売|お手軽クロスセルのアイコン

シンプルセット販売|お手軽クロスセル

シンプルな日本製のセット販売アプリ。セット販売でのクロスセルを簡単に実現できます。

シンプル予約販売|受注販売や在庫切れ商品販売で使えるのアイコン

シンプル予約販売|受注販売や在庫切れ商品販売で使える

日本製の予約販売アプリ。予約販売や受注販売、在庫切れ商品販売を簡単に実現できます。

シンプル販売期間設定|商品ごとに期間限定販売のアイコン

シンプル販売期間設定|商品ごとに期間限定販売

シンプルな日本製の期間限定販売アプリ。商品ごとに販売期間を設定することができます。

シンプルVIPプログラム|お手軽VIP会員限定販売のアイコン

シンプルVIPプログラム|お手軽VIP会員限定販売

日本製の VIP 限定販売アプリ。特別な顧客を対象とした限定商品の販売を簡単に実現できます。

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリのアイコン

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリ

シンプルな日本製の定額ポイントアプリ。顧客はポイントをそのまま利用することができます。

おすすめ記事