Liquidの変数と制御構文の基本的な書き方、{{ }} と{%- -%}について初心者目線で解説します。
こんにちは！
Shopify初心者として日々奮闘中のホリと申します。
今回は、初心者にとっては大きな壁であり、習得していく事につれ大きな喜びを味わえるShopify開発言語『Liquid(リキッド)』について。
このLiquid、正直難しい･･それゆえ、すぐ諦めたくなり「ノーコードで何とか」と思ってしまいがちですが、(私見ですが)このLiquidこそが、Shopify開発者の証であり、上達すると、受注する仕事の量や単価も別次元のものになると断言します。
また、就職や転職にも断然有利だと思いますので、諦めないでできる範囲から少しずつ学習していきましょう。
もちろん、その学習範囲が非常に広いため、その全貌を１つの記事にまとめるのは無理なので、１つずつ潰していくという趣旨で{{ }} と{%- -%}の違いからご紹介します。
※プログラミング言語でいう「変数」や「配列」などの定義については割愛させていただきます。他プログラミング言語である程度学習をした経験のある方向けの説明になります。
{{ }}の役割は？
簡単にいうと「変数の表示」。
中に代入された変数の値をそのまま表示するために使用されます。
例えば、「city」という変数の値が「横浜」だとしたら、{{ city }}は「横浜」とHTML上に表示されます。
<p>私は{{ city }}に住んでいます。</p>{%- -%}の役割は？
一方、{%- -%}は、if文、for文、assignなどの制御構文の作成に用いられます。
・if文：条件分岐（もし、〇〇なら）
「ユーザーがログインしているのなら」「商品の表示価格が税込みなら」のような構文を作るときに使用します。
・for文：タグやコレクションなど、各要素を順に処理する構文
このfor文ですが、私も最初は理解に苦しみましたが、何回か目にするうちに理解できました。
・assign：変数に値を格納する構文
上記の「私は{{ city }}に住んでいます」では、すでに「city」という変数にすでに「横浜」という値が格納されています。
この値を格納するときに用いるのがassignです。
{%- assign name = "山田" -%}
<p>こんにちは {{ name }}さん!</p>ここでは「name」という変数にassignという構文を使い、「山田」という値を格納しました。
そのため「こんにちは山田さん！」と表示されます。
{{ }}と{%- -%}の応用
では、{{ }}と{%- -%}を組み合わせた構文(例文)を見てみましょう。
{% assign fruits = "リンゴ, バナナ, イチゴ" | split: ", " %}
<ul>
{% for fruit in fruits %}
<li>{{ fruit }}</li>
{% endfor %}
</ul>assignを使い「fruits」という変数に、「リンゴ」「バナナ」「イチゴ」を格納します。
※split: “, “は、フィルタのようなものです。配列を作るときに使用します。
これは、HTMLでは、
<ul>
<li>リンゴ</li>
<li>バナナ</li>
<li>イチゴ</li>
</ul>となります。
これで何となく理解はできましたでしょうか。
個人的に最も多く使いLiquidの制御構文は「if文」です。
例えば、
{% if customer.tags contains 'VIP会員' %}
<p>いらっしゃいませ！VIP会員さま</p>
{% elsif customer.tags contains '一般会員' %}
<p>こんにちは！一般会員さま</p>
{% else %}
<p>会員登録はいかがでしょうか。</p>
{% endif %}のように、会員のタグで条件分岐したりします。
「for文」も結構使っていますね。
{%- for line_item in order.line_items -%}
<a href="{{ line_item.url }}">{{ line_item.title }}</a>
{%- endfor -%}これは、お客様の注文履歴（購入した、リンク付きの商品名）を出力する際に使用する構文です。
以上、未熟者ホリが解説する「{{ }} と{%- -%}の違い」と参考になる例文でした！
