【Shopify】Liquidのfor文で使える文法を解説｜使用例

悩む人

・Liquidのfor文を使いこなしたい
・for文で使える文法が知りたい

こんなご要望にお応えします。

Shopifyのテーマ開発の際に欠かせない繰り返し処理を行うためのfor文。

そのfor文の中で使える便利な文法・構文がいくつか存在しています。

そこで今回はfor文を使いこなすための１つのポイントとして、for文内で使用できる文法について解説していきます。

トマトソース

for文をマスターしてより良いストア構築にお役立てください。

本記事は、Shopify公式サイトを参考に解説していきます。

for文とは

そもそもfor文とはという点ですが、for文は同様の処理を繰り返し行う際に使用できる構文です。

for文の中で使用できる属性（attributes)については、「forloopオブジェクト7つの使い方と注意点を解説」をご覧ください。

トマトソース

プログラムでは同じ処理を繰り返し記述することは良しとされていないので、同じ処理を行う場合は積極的にfor文を使用するようにしましょう。

関連記事 【Shopify】Liquidのfor文の使い方と注意点を解説｜使用例あり

for文で使える文法一覧

Liquidのfor文で使用できる文法は以下の7つです。

以下でそれぞれの使い方を解説していきます。

elseの使い方

for文内で以下のようにelseを記述できます。

{% for product in collection.products %}
  {{ product.title }}
{% else %}
  コレクション内に商品がありません。
{% endfor %}

// 出力：コレクション内に表品がありません。
// ↑ collection内に商品がない場合

上記のようにfor文内のelseでは、for文で繰り返す対象の要素（上記の場合collection内のproducts＝product）が存在しない場合に、実行される処理を記述できます。

なので、上記のようにコレクションの中に商品がない場合に商品がない旨を表示するように使用できます。

トマトソース

if文のelseと同じですね。

breakの使い方

for文でのbreakは以下のように記述できます。

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

// 出力：1 2 3

上記のように、for文内でbreakを使用すると、該当の処理が走った際にfor文の繰り返し処理を抜けるようになります。

つまり、上記のコードではiの値が4になったときに、for文を抜ける処理となります。

continueの使い方

for文内でのcontinueは以下のように記述できます。

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

// 出力：1 2 3   5

上記のようにcontinueを用いると、該当の処理が走った場合にその処理をスキップして次の要素に処理を移らせることができます。

上記の例の場合だと、iの値が4の時にiの出力を飛ばすようになっています。

limitの使い方

for文内でのlimitは以下のように記述できます。

<!-- numbersの中身が [1,2,3,4,5] である場合-->

  {% for item in numbers limit:2 %}
    {{ item }}
  {% endfor %}

// 出力：1 2

上記のように、limitを使用するとfor文で処理する要素数を制限できます。

上記の例では、numbersに1〜５の数字が入っていますが、limit:2とすることで1と2のみ出力する処理となっています。

offsetの使い方

for文内でoffsetを使用する場合は、以下のように記述できます。

<!-- numbersの中身が [1,2,3,4,5] である場合-->
  {% for item in numbers offset:2 %}
    {{ item }}
  {% endfor %}

// 出力：3 4 5

上記のように、offsetを使用すると指定した要素からfor文内の処理を開始することができます。

上記の例では、offset:2とすることで1つ目と２つ目の要素（1と2）を出力せず、３つ目の要素（3）から出力するようになっています。

rangeの使い方

for文内でrangeを使用する場合は、以下のように記述できます。

{% for i in (3..5) %}
  {{ i }}
{% endfor %}

// 出力：　3 4 5

{% assign my_limit = 4 %}
{% for i in (1..my_limit) %}
{{ i }}
{% endfor %}

// 出力：1 2 3 4

上記のようにrangeを使用すると、繰り返して処理を行う範囲を指定することができます。

ただ、上記のコードを見ていただくと分かるようにrangeという言葉は使わず（）を使用してその中で範囲の指定をおこなっています。

トマトソース

１つ目の例だと（3..5）、２つ目の例だと（1..my_limit）の部分です。

reversedの使い方

for文内でのreversedを使用する場合は、以下のように記述できます。

<!-- arrayが [1,2,3,4,5,6] の場合 -->
{% for item in array reversed %}
  {{ item }}
{% endfor %}

// 出力：6 5 4 3 2 1

上記のようにreversedを使用すると、対象の配列内の要素を後ろから繰り返し処理を行うことができます。

上記の例の場合、1〜６の配列を６から順に出力するようになっています。

【Shopify】Liquidのfor文で使える文法を解説：まとめ

今回は、Liquidのfor文の中で使える文法７つについて解説しました。

繰り返しの処理には欠かせないfor文の構文を使いこなすことで、テーマのカスタマイズの幅も広がりより良いストアを構築できるようになります。

是非マスターして良いストアの構築にお役立てください。