• HOME
  • 【Shopify】Liquidを使用したfor文の書き方
Kyan

【Shopify】Liquidを使用したfor文の書き方

記事をシェアする

for文とは、ループ処理のことで同じ処理を繰り返す際に使用する構文です。
今回はLiquidでのfor文の書き方についてご紹介します。
※以下コード例の出力結果は見やすいように半角スペースを空けていますが、基本は詰めた状態で表示されます。

for文の基本使用例

コレクション内の商品タイトルを一覧で表示する際には以下のようにfor文を書きます。
《 products:トマト、とうもろこし、ブロッコリー、じゃがいも、にんじん 》

{% for product in collection.products -%}
  {{ product.title }}
{%- endfor %}

//【出力結果】
//トマト とうもろこし ブロッコリー じゃがいも にんじん


Liquidのfor文で使用できるパラメータ

Liquidのfor文にはいくつかのパラメータが用意されています。

limit

ループ回数(出力する値)を制限することができます。
《 products:トマト、とうもろこし、ブロッコリー、じゃがいも、にんじん 》

{% for product in collection.products limit: 2 -%}
  {{ product.title }}
{%- endfor %}

//【出力結果】
//トマト とうもろこし


offset

ループ開始位置を指定することができます。
《 products:トマト、とうもろこし、ブロッコリー、じゃがいも、にんじん 》

{% for product in collection.products offset: 2 -%}
  {{ product.title }}<br>
{%- endfor %}

//【出力結果】
//ブロッコリー じゃがいも にんじん

offsetで指定した数までの値が削除されるので、3つ目のブロッコリーから表示されています。

range

ループ回数(出力する値)の範囲を指定することができます。

{% for i in (1..3) -%}
  {{ i }}
{%- endfor %}

//【出力結果】
//1 2 3


また、変数を使用した範囲の指定も可能です。

{%- assign start = 2 -%}
{%- assign limit = 4 -%}

{% for i in (start..limit) -%}
  {{ i }}
{%- endfor %}

//【出力結果】
//2 3 4


reversed

逆からループして順番に出力することができます。
《 products:トマト、とうもろこし、ブロッコリー、じゃがいも、にんじん 》

{% for product in collection.products reversed -%}
  {{ product.title }}
{%- endfor %}

//【出力結果】
//にんじん じゃがいも ブロッコリー とうもろこし トマト


Liquidのfor文で使用できるタグ

Liquidのfor文では、基本の記述に追加して使用することができるタグが用意されています。
今回は、else、break、continueの3つをご紹介します。

else

コレクション内に商品が存在しない場合の処理を記述することができます。

{% for product in collection.products %}
  {{ product.title }}
{% else %}
  <p>このコレクションには商品がありません</p>
{% endfor %}


break

指定した数値でループを止めることができます。
今回はif文を使用して4回目でループを中断する処理をしています。

{% for i in (1..5) -%}
  {%- if i == 4 -%}
    {% break %}
  {%- else -%}
    {{ i }}
  {%- endif -%}
{%- endfor %}

//【出力結果】
//1 2 3 

ループが4回目の時にbreakが当たってループが中断されるので、3まで出力されています。

continue

指定した数値をループからスキップすることができます。
今回はif分を使用して4回目のループをスキップする処理をしています。

{% for i in (1..5) -%}
  {%- if i == 4 -%}
    {% continue %}
  {%- else -%}
    {{ i }}
  {%- endif -%}
{%- endfor %}

//【出力結果】
//1 2 3 5


まとめ

Liquidのfor文は、コレクション内の商品を出力する時だけではなく、ブログの記事やタグリストなどの表示にも使用できます。
様々なパラメータも用意されているので、ぜひ試してみてください。

記事をシェアする