Shopifyのプログラミング言語であるLiquidの制御構文である「break」をサンプルコードを交えて紹介したいと思います。
Shopifyのプログラミング言語であるLiquid。if文やfor文、case文などカスタマイズに不可欠な色々な制御構文があります。
本サイトでは以前、このような構文を理解するための用法やサンプルコードなどを紹介しました。
Shopify Liquid for文とif文「 繰り返し実行」or「１度だけ実行 」
Shopify Liquid 通知設置によく登場する「case」と「when」の使い方
今回は、ループの強制終了に用いる{% break %}についてシンプルなサンプルコードを交えて紹介したいと思います。
{% break %}の役割
{% break %}は、ループの途中で条件が満たされた時に、そのループを強制的に止めるための命令。ループが最後まで続かず、途中で終わらせたいときに使います。
たとえば、繰り返しをしている中で「これ以上処理を続ける必要がない」と判断した場合に、{% break %}を使ってループを終わらせます。
for文、if文とセットで使用される事が多い
{% break %}の主な役割が「ループの強制終了」なので、
・ループを作るfor文
・条件っを作るif文
とセットで使用される事が多いです。
いわば「三兄弟」のようなものです。
それぞれの役割をまとめると、
・{% for %}{% endfor %}：ループを作成し、繰り返し処理を行う。
・{% if %}{% endif %}：特定の条件が満たされたときにbreakを呼び出すきっかけを作る。
・{% break %}： 途中でループを強制終了させる役割。
になります。
簡単なサンプルコード
では、サンプルコードを見ていきましょう。
<ul>
{% for number in (1..5) %}
<li>{{ number }}</li>
{% if number == 3 %}
{% break %}
{% endif %}
{% endfor %}
</ul>①for文で、1～5まで変数「number」に代入し、順に処理を行う→表示
②if文で「number」が「3」になった場合、{% break %}を発動し、ループを終了させる。(4以降は処理されない)
この構文によって、今のようなHTMLが生成されます。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>{% break %}の位置に注意
もし、以下のようなコードだと、どうなるのでしょうか。
<ul>
{% for number in (1..5) %}
{% if number == 3 %}
{% break %}
{% endif %}
<li>{{ number }}</li>
{% endfor %}
</ul>結果は、
・1
・2
と、2までしか表示されません。
一つ上のコードが「1」「2」「3」まで表示した後、ブレイクがかかりましたが、今のコードは同じく「3」でブレイクがかかったものの、表示前にかかったため「3」は表示対象から外されております。
「3」だけを表示させたい
上記のコードは「１」処理(表示)後に「２」、そのあと「３」を処理したらブレーキ(break)がかかったのです。
もし「３」だけを表示させたい場合は、以下のコードになります。
<ul>
{% for number in (1..5) %}
{% if number == 3 %}
<li>{{ number }}</li>
{% break %}
{% endif %}
{% endfor %}
</ul>この{% break %}ですが、商品が持つオプションやメタフィールドなどで最近目にする事が多くなり、基礎的な使い方を整理しておきたいと思い、記事を作成してみました。
