[Shopify] for文と変数で回数を数えるカウンタ変数をLiquidで使用する

2020年10月11日

先日ブログで書いたアーカイブ内の記事数カウントや、単純にforループ内の処理数をカウントする場合など、案件をこなしていくと数を数える必要がある時って結構出てくるのです。

そんな時に使用できるのが『カウンタ変数』です。カウンタ変数とは、forループ内でループされた回数を数えたり、回数によって処理を変えるなど便利な方法で知られています。（たぶん）

今回はそんなメジャー？なカウンタ変数をShopifyの基本言語Liquidで紹介していきます。

Liquidで単純にfor文を使用してカウントする

まずは単純にLiquidのfor文と変数を使用して、カウントしていきます。

{% assign count = 0 %}

{% for article in blog.articles %}
　{% assign count = count | plus: 1 %}
{% endfor %}

{{ count }}

まず

{% assign count = 0 %}

で変数countに0を代入し、カウントの基礎となる変数を作成します。

次にfor文ループで繰り返し処理を行い、1ループされるごとに先ほど作成したcount変数に1ずつカウントを足していきます。

{% assign count = count | plus: 1 %}

ここでカウント変数に+1した数を再代入しています。

そして、

{{ count }}

でカウントした結果を出力しています。

カウントを利用して処理を変える

上記でちゃんと変数countにカウントを1ずつ追加していくことができました。

それでは次にカウントの数に応じて処理を変える方法をご紹介します。例えば、カウントが3以下の場合は"below 3"を出力して、カウントが4以上の場合には"above 4"を出力しましょう。

{% assign count = 0 %}

{% for article in blog.articles %}
　{% if count <= 3 %}
　　<p>below 3</p>
　{% endif %}　
　{% if count >= 4 %}
　　<p>above 4</p>
　{% endif %}
　{% assign count = count | plus: 1 %}
{% endfor %}

これでcount変数が3以下であれば"below 3", count変数が4以上であれば"above 4"が表示されるようになります。

if文で分岐分けしている形になっています。

複数の変数を使用して複数カウントする

例えば記事内のタグをカウントしたい場合、一つ一つのタグ毎にfor文をループさせるのは非効率的ですね。

その場合は、変数カウントを複数用意して、if文で条件を当てつつ各変数に追加していく処理を書きます。

{% assign hello_tag = 0 %}
{% assign world_tag = 0 %}

{% for article in blog.articles %}
　{% for tag in article.tags %}
　　{% if tag contains "hello" %}
　　　{% assign hello_tag = hello_tag | plus: 1 %}
　　{% endif %}
　　{% if tag contains "world" %}
　　　{% assign world_tag = world_tag | plus: 1 %}
　　{% endif %}
　{% endfor %}
{% endfor %}

これでタグ名に"hello"が含まれているとhello_tagにカウントが追加されて、"world"が含まれているとworld_tagにカウントが追加される仕様になっています。

ちなみに

{% if tag contains "hello" %}

というのはタグの中に"hello"という文字列が含まれていた場合。のif文になります。

contains はめちゃくちゃ便利なLiquidコードなのでぜひ活用してみてください！