【Shopify】for文で使えるattirbutes（forloopオブジェクト）の使い方を解説

悩む人

forループ内で使えるオブジェクトはどんなものがある？

こんな疑問にお答えします。

商品一覧表示など繰り返し処理には欠かせないfor文。

その中で使えるforloopオブジェクトを使いこなせるとまたストア開発の幅も広がります。

ということで今回は、forloopオブジェクト7つの使い方について解説し、また使用時の注意点についてもお伝えしていきます。

本記事は、Shopify公式サイトに掲載されている「The forloop object」を参考に記述しています。

for文とは

for文とは、一連の処理の中で同様の処理を繰り返し行う際に使用できる構文です。

例えば、商品一覧を表示するための処理を数十回と繰り返したい時なんかに使います。

トマトソース

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

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

今回は、for文内で使用できるforloopオブジェクトについて解説します。

forloopのattributes（forloopオブジェクト）一覧とその使い方

forloopで使えるattributesは以下の７つです。

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

forloop.first

firstは、ループ処理の最初の処理の場合にtrueを、それ以外の場合はfalseを返却します。

firstの記述例と出力結果は以下の通りです。

// collections.frontpage.productsに3つ商品がある場合

{% for product in collections.frontpage.products %}
  {% if forloop.first == true %}
    最初のループ
  {% else %}
    最初ではないループ
  {% endif %}
{% endfor %}

// 出力：
// 最初のループ
// 最初ではないループ
// 最初ではないループ

forloop.index

indexは、ループ処理対象の配列の中で、現在どのインデックスかを返却します。

indexの記述例と出力結果は以下の通りです。

// collections.frontpage.productsに10個の商品がある場合

{% for product in collections.frontpage.products %}
  {{ forloop.index }}
{% else %}
  // 商品がない場合の処理...
{% endfor %}

// 出力：1 2 3 4 5 6 7 8 9 10

indexの注意点としては、indexが0ではなく1から始まる点です。

プログラミング言語では配列要素のインデックスは一般的に０から始まりますが、Liquid内のループ処理でforloop.indexとしてアクセスした場合は、1が最初のインデックスとなります。

トマトソース

配列のインデックスのイメージよりも、◯番目の要素と考えた方がイメージに合いますね。

forloop.index0

index0は、ループ処理対象の配列のインデックスを返却します。（最初のインデックスは０）

index0の記述例と出力結果は以下の通りです。

// collections.frontpage.productsに10個の商品がある場合

{% for product in collections.frontpage.products %}
  {{ forloop.index0 }}
{% endfor %}

// 出力：0 1 2 3 4 5 6 7 8 9

上記のように、先ほどのindexとは異なり、配列のインデックスが皆さんも慣れているように0から始まっています。

forloop.last

lastは、ループ処理対象の配列の最後の要素の場合にtrueを、それ以外の場合はfalseを返却します。

lastの記述例と出力結果は以下の通りです。

// collections.frontpage.productsに3個の商品がある場合

{% for product in collections.frontpage.products %}
    {% if forloop.last == true %}
        最後の要素
    {% else %}
        継続中...
    {% endif %}
{% endfor %}

// 出力：
// 継続中...
// 継続中...
// 最後の要素

forloop.length

lengthは、ループ処理の繰り返し回数を返却します。

lengthの記述例と出力結果は以下の通りです。

// collections.frontpage.productsに3個の商品がある場合

{% for product in collections.frontpage.products %}
  {% if forloop.first %}
  <p>コレクション内に{{ forloop.length }}個の商品があります。</p>
  {% endif %}
  <p>{{ product.title }}</p>
{% endfor %}

// 出力：
// 商品A
// 商品B
// 商品C

上記のように、lengthは配列内の要素数を返却するので、コレクション内の合計数を表示することもできます。

forloop.rindex

rindexは、forloop.indexの逆順で返却します。

rindexの記述例と出力結果は以下の通りです。

// collections.frontpage.productsに10個の商品がある場合

{% for product in collections.frontpage.products %}
  {{ forloop.rindex }}
{% endfor %}

// 出力：10 9 8 7 6 5 4 3 2 1

上記の例からも分かるかと思いますが、forloop.rindexはforloop.indexと同様にindexの始まりは1であることに注意が必要です。

トマトソース

プログラミングでの配列のインデックスは一般的に0から始まることが多いです。
なので、その認識だとバグを生み出す可能性があるので気をつけましょう。

forloop.rindex0

rindex0は、forloop.index0の逆順で返却します。

rindex0の記述例と出力結果は以下の通りです。

// collections.frontpage.productsに10個の商品がある場合

{% for product in collections.frontpage.products %}
  {{ forloop.rindex0 }}
{% endfor %}

// 出力： 9 8 7 6 5 4 3 2 1 0

rindex0では、rindexとは違い配列のインデックスが0から始まります。

トマトソース

なので、プログラマー的にはこちらの方が直感的に扱いやすいかもしれません。

forloopオブジェクトを使うときの注意点

ここまで紹介してきた7つのforloopオブジェクトを使用する際には注意点があります。

それは、forloopオブジェクトはforタグ内でのみ使用可能であるという点です。

トマトソース

forloopオブジェクトなので、当たり前といえば当たり前かもしれませんが。

なので、for文の外でアクセスしようとしてエラーやバグが生じない様に気をつけて使用する様にしてください。

まとめ：for文で使えるattirbutes（forloopオブジェクト）の使い方を解説

今回は、Liquidのfor文内で使用できるforloopオブジェクトの7つの種類とそれらの使い方について解説しました。

商品一覧など繰り返しの処理で使用できるfor文。

その中で様々な処理をする際に便利なforloopオブジェクトを活用して、ぜひ素敵なストア構築にお役立てください。