今回は、Liquidでのif文やその他の条件分岐式の書き方についてご紹介します。

基本のif文

まずは、基本のif文からご紹介していきます。

{% if product.title == 'チョコレート' %}
  <p>この商品はチョコレートです。</p>
{% endif %}

上記のコードは、以下のように構成されています。

①商品名がチョコレートかどうかの条件分岐
　→商品名がチョコレートの場合はtrueが返されて「この商品はチョコレートです。」という文言が表示。
　→当てはまらなかった商品は、falseが返されて何も表示されない。

サンプルコードでは、{% if 〇〇　== △△ %}のように、イコールを繋げた完全一致の条件分岐をしています。
その他にも様々な演算子が使用できるので、気になる方は以下の記事も併せてご覧ください。

【Shopify】Liquidの演算子

その他の条件分岐式

条件分岐にはif文以外にも様々な種類があり、用途に合わせて使い分けるととても便利です。

unless

unlessは「〇〇が△△じゃなかったら〜」という条件分岐です。

{% unless product.title == 'チョコレート' %}
  <p>この商品はチョコレートではありません。</p>
{% endunless %}

上記のコードは、以下のように構成されています。

①商品名がチョコレートじゃないかどうかの条件分岐
　→商品名がチョコレートの場合は、falseが返されて何も表示されない。
　→当てはまらなかった商品はtrueが返されて「この商品はチョコレートではありません。」という文言が表示。

少しややこしいですが、条件式に当てはまらなかった場合にtrueが返されます。

else / elsif

条件分岐に当てはまらなかった場合に、別の条件を指定することもできます。
まずはelseのサンプルコードを確認してみましょう。

{% if product.title == 'チョコレート' %}
  <p>この商品はチョコレートです。</p>
{% else %}
  <p>この商品はチョコレートではありません。</p>
{% endif %}

上記のコードは、以下のように構成されています。

①商品名がチョコレートかどうかの条件分岐
　→商品名がチョコレートの場合はtrueが返されて「この商品はチョコレートです。」という文言が表示。
②当てはまらなかった商品
　→falseが返されてelseの中の「この商品はチョコレートではありません。」という文言が表示。

elseを使用することで、条件に当てはまらなかった場合の処理を追加することができます。

elsifでは、さらに別の条件を追加することができます。
こちらもサンプルコードで確認してみましょう。

{% if product.title == 'チョコレート' %}
  <p>この商品はチョコレートです。</p>
{% elsif product.title == 'マシュマロ' %}
  <p>この商品はマシュマロです。</p>
{% else %}
  <p>この商品はチョコレートでもマシュマロでもありません。</p>
{% endif %}

上記のコードは、以下のように構成されています。

①商品名がチョコレートかどうかの条件分岐
　→商品名がチョコレートならtrueが返され「この商品はチョコレートです。」という文言を表示
②商品名がマシュマロかどうかの条件分岐
　→商品名がマシュマロならtrueが返され「この商品はマシュマロです。」という文言を表示
③どちらにも当てはまらなかった商品
　→falseが返されてelseの中の「この商品はチョコレートでもマシュマロでもありません。」という文言を表示

他のプログラミング言語を習得されている方は、elseifではないので注意しましょう。

また、elsifはいくつでも繋げて条件を追加していくことができます。
しかし、複雑なものになってくるとコードが冗長になってしまうため、その場合は以下のcase / whenを使用した条件分岐がおすすめです。

case / when

elsif同様、条件の追加ができます。

{% case product.title %}
  {% when 'チョコレート' %}
     <p>この商品はチョコレートです。</p>
  {% when 'マシュマロ' %}
    <p>この商品はマシュマロです。</p>
  {% when 'クッキー' %}
    <p>この商品はクッキーです。</p>
  {% else %}
    <p>この商品はその他の商品です。</p>
{% endcase %}

上記のコードは、以下のように構成されています。

①caseで条件分岐の対象を設定(今回は商品名を返すproduct.titleオブジェクト)
②whenで条件を追加
　→trueならwhen内に記述された処理を実行、falseなら次の条件へ。
③どの条件にも当てはまらない場合
　→else内の処理を実行

elsifとほぼ同じような動きをしますが、case / whenでは条件式を複数追加してもこのようにシンプルに記述することができます。

Liquidの論理演算子「and」と「or」

条件を複数指定することもできます。

and

{% if product.title contains 'チョコレート' and 'アイス' %}
  <p>この商品はチョコレートアイスです。</p>
{% endif %}

上記のコードは、if文のcontainsを使用して、商品名に該当のワードが含まれていればtrueを返します。
結果は以下のようになります。

条件分岐：商品名に「チョコレート」と「アイス」の両方のワードが入っているかどうか
①両方入っている → true
②チョコレートのみが入っている → false
③アイスのみが入っている → false
④どちらも入っていない → false

trueの場合に「この商品はチョコレートアイスです。」という文言が表示され、falseの場合には何も表示されません。

or

{% if product.title contains 'チョコレート' or 'チョコクッキー' %}
  <p>この商品はチョコレート製品です。</p>
{% endif %}

上記のコードも、if文のcontainsを使用して、商品名に該当のワードが含まれていればtrueを返します。
結果は以下のようになります。

条件分岐：商品名に「チョコレート」か「チョコクッキー」のどちらかのワードが入っているかどうか
①両方入っている → true
②チョコレートのみが入っている → true
③チョコクッキーのみが入っている → true
④どちらも入っていない → false

trueの場合に「この商品はチョコレート製品です。」という文言が表示され、falseの場合には何も表示されません。

まとめ

ここまでご紹介してきたように条件分岐は色々な種類があるため、用途に合った使い分けをすることが大切です。
公開されているテーマテンプレートにもたくさん使用されているので、そのコードを見てみるだけでも使い方の勉強になるかと思います。

私自身まだ使いこなせていないので、色々と勉強しながら最適なコードで書けるようにしていきたいです。

------------
■パートナー募集について
運営元であるkraftでは一緒に活動するパートナーを募集しています。
個々が協力していくことによってクオリティの高い制作をおこなっていくことができると考えています。
ご興味のある方は、こちらよりご連絡いただけますと幸いです。(※運営元の事業サイトに飛びます)

具体的な内容については以下URLをご確認ください。
パートナー募集の詳細について