条件に基づいたカウントアップに活用できる、ループ内で「回数記録係」を務める「カウンター変数」について、サンプルコードを交えて解説したいと思います。
先日別の記事で「1回のみ処理実行」のために、ループ内で「記録係」を全うするフラグ（flag）について解説いたしました。
【Shopify Liquid】ループの記録係！1回のみ実行に有用な「フラグ(Flag)」サンプルコード
今回は、少し似たような役割として、ループ内で「回数記録係」を務める「カウンター変数」について、サンプルコードを交えて解説したいと思います。
カウンター変数とは
カウンター変数とは、プログラム内で何かを数えるために使われる変数を指します。
特に、繰り返し処理（ループ/for文など）内で、処理が何回実行されたかを記録する用途でよく使われます。
主にループ内で条件に合う要素に番号を付けたり、数を数えたりします。
Shopifyだけでなく、他プログラミング言語の学習にもよく登場する概念です。
基本構造
基本構造は、
①任意のカウンター変数を「０」に設定
②ループ開始(for文)
③条件分岐開始(if文) → 条件に合う要素が現れたら「＋１」
になります。
forloop.index
Shopify Liquidには、カウンター変数を使わなくても「forloop.index」という便利なオブジェクがあります。
詳しく知りたい方は、以下の記事をご一読ください。
【Shopify小技】forloop.indexを使って「売れ筋ランキング (セクション)」を作る
ただ、forloop.indexは、全てのループ回数をカウントするため、条件に基づいたカウントアップには直接利用できないという使用上の限界があります。
カウンター変数のサンプルコード
では、さっそくサンプルコードを見ていきましょう。
{% assign counter = 0 %} //カウンター変数を初期化(0にする)
<ul>
{% for product in collections['baseball'].products %}
{% assign counter = counter | plus: 1 %} //ループの要素ごとにカウンター変数が「＋1」
<li>
カウント: {{ counter }} - 商品名: {{ product.title }}
</li>
{% endfor %}
</ul>例えば、スポーツ用品ストア > 野球用品(コレクション)のループ(for文)の配列要素が3つあれば、最後に表示される商品は、
「３ – 商品名：キャッチャーミット」
と表示されます。
このサンプルコードは、ループの中に条件がないため、上述した「forloop.index」オブジェクトを使用する事も可能です。
<ul>
{% for product in collections['baseball'].products %}
<li>
カウント: {{ forloop.index }} - 商品名: {{ product.title }}
</li>
{% endfor %}
</ul>では、条件に基づいたカウンター変数の使い方を見てみましょう。
{% assign counter = 0 %} //カウンター変数を初期化(0にする)
<ul>
{% for product in collections['baseball'].products %}
{% if product.available %}
{% assign counter = counter | plus: 1 %}
<li>
カウント: {{ counter }} - 商品名: {{ product.title }} (在庫あり)
</li>
{% endif %}
{% endfor %}
</ul>
<p>在庫あり商品数: {{ counter }}</p>こちらのコードは、条件（在庫がある）つきでカウントアップをしており、ループ内で条件にあう要素があれば、カウンター変数は「＋1」になります。
もし、条件と一致する配列要素が3つあれば、{{ counter }}は「3」になります。
以上、カウンター変数について解説しました。在庫のある商品の数、セール中の商品の数の表示に活用できるので、ぜひ試してみてください。
