無駄なループ処理が行われる前にスキップできるため、特に重い処理を伴う場合にはパフォーマンス改善..
-本文中

(最終更新 2024年11月07日)

【Liquid基礎】ループのスキップに用いる {% continue %} を理解するための最もシンプルなコード

Shopifyの開発言語Liquidのタグ解説。{% break %}と同様、イテレーション(iteration)タグとしてよく使われる{% continue %}について紹介いたします。

Shopifyのプログラミング言語であるLiquid。if文やfor文、case文などカスタマイズに不可欠な色々な制御構文があります。

本サイトでは以前、このような構文を理解するための用法やサンプルコードなどを紹介しました。

Shopify Liquid for文とif文「 繰り返し実行」or「1度だけ実行 」

Shopify Liquid 通知設置によく登場する「case」と「when」の使い方

先日は、{% break %} について、シンプルなサンプルコードを交えて紹介しました。

【Liquid基礎】ループの強制終了に用いる {% break %} を理解するための最もシンプルなコード

今回は、{% break %}と同様、イテレーション(iteration)タグとしてよく使われる{% continue %}について紹介いたします。

{% continue %}の役割

{% continue %}は、Liquidでループ内で使われるタグで、ループを途中でスキップして次のループの繰り返しに進むためのものです。

例えば、特定の条件に一致した場合にループの処理をスキップしたい場合に役立ちます。

for文、if文とセットで使用される事が多い

{% break %}と同様、

・ループを作るfor文
・条件っを作るif文

とセットで使用される事が多いです。

for文開始直後に登場する事が多い

{% continue %}は、スキップする条件を先に設定しておくという性質があるため、forループの開始直後に登場することが多いです。

また、無駄なループ処理が行われる前にスキップできるため、特に重い処理を伴う場合にはパフォーマンス改善にもつながると言われているようです。

簡単なサンプルコード

では、サンプルコードを見ていきましょう。

{% for product in collection.products %}
{% if product.tags contains 'exclude' %}
{% continue %}
{% endif %}

<div class="product">
<h2>{{ product.title }}</h2>
<p>{{ product.description }}</p>
</div>
{% endfor %}

①コレクションの商品を1つずつ取り出し、処理する。

②「exclude」とタグを持つ商品であれば、処理をスキップする。

③「exclude」とタグを持つ商品は、タイトル(title)や概要(description)を取得・表示

条件によって処理を行うか、行わないかを決めるのは、以下のコードと挙動が類似します。

{% for product in collection.products %}
{% if product.tags contains 'exclude' %}
<!-- 何もしない -->
{% else %}
<div class="product">
<h2>{{ product.title }}</h2>
<p>{{ product.description }}</p>
</div>
{% endif %}
{% endfor %}

{% continue %}は、最初から処理不要の条件を付けているので、無駄な処理が発生しないというメリットがあります。

そのため、大規模なデータ(商品の数が多いなど)の場合は、{% continue %}を使ったコードの方が効率的と言われています。

{% break %}の順番に注意

例えば、以下のようなコードだと、

{% for product in collection.products %}

<div class="product">
<h2>{{ product.title }}</h2>
<p>{{ product.description }}</p>
</div>

{% if product.tags contains 'exclude' %}
{% continue %}
{% endif %}

望んでいた{% continue %}の処理結果が得られませんので、ご注意ください。

上述しましたが、{% continue %}はループ開始直後に使用される事が多いので、処理後になると、スキップするはずの商品(ここのコードでは)が表示されてしまうのです。

以上、{% continue %}の役割とサンプルコードでした。

Shopify小技のフリーマーケット

Shopifyを運営する中で、「こんなことできないのか?」という疑問は尽きません。特に初心者にとっては、難しく感じるけれども、実はすぐに活用できる小技がたくさんあります。
当サイトでは、実際に試してみて有効だったShopifyの小技を、誰でも簡単に再利用できるよう提供しています。

少し高度なLiquidのテクニックやアプリを使わずに実装できる機能、そしてカスタマイズのヒントになるアイデアなど、さまざまな情報をご用意しています。

現在、出品者は私1人ですが、 これからさらに充実させていく予定です!もしもShopifyでの設定やカスタマイズで悩んでいる方がいれば、お気軽にお問い合わせください。

もっと知りたい

このブログと運営者について

BLOG More

設定

1日前

【備忘録】Shopify通知・メルマガ 外部ドメインのメールアドレス認証 (CNAME、DMARC)

自分の備忘録として認証方法の具体的な手順を紹介したいと思います。..

STORY

6日前

収入だけじゃないよ!40代男性「IT関連」副業のメリット5選と個人的な感想

40代男性にとってこのスキルアップは、単なる知識の習得以上の意味を持つことが多いのではないでしょうか。..

Liquid

7日前

【Shopify Liquid】店舗受取を希望する購入者への「注文通知メール」をカスタマイズ

「注文通知メール」にコピペすればOKなのでは?と思われがちですが、なぜか店舗情報が上手く表示されません。..

設定

1週間前

Shopify「店舗受取」運用に必要な基本的なフローと操作まとめ

アパレルや雑貨など「実物を見てから購入したい」お客様に対しても、あらかじめ在庫を確保しておくことで、店舗でのスムーズな購買体験を提供できます。..

設定

2週間前

【Shopify小技】飲食店でのテイクアウトに応用可能!「店舗受取専用」商品を作成する方法

「どこで店舗受取専用の商品を作成すればいいの?」と迷ってしまう人も多いのではないでしょうか?..

Liquid

3週間前

【Shopify Liquid】恥ずかしいけど「CONTAINS」2つの使い方に今日気づいた‥

何の疑問も持っていなかった私、ちょっぴり衝撃でした。..

Liquid

3週間前

【Shopify Liquid】毎月「7」のつく日だけ!限定セールを自動表示する方法

Liquidにおける日にちの自動計算の仕組みはもちろん、for文やif文、フラグの概念も理解しやすくなるはずです。..

アプリ

4週間前

【Shopifyアプリ】注文に「任意の連番」をつける事もできる!「SeriaLogic」の使い方を解説

チケット購入順に入場番号を自動で割り振る事はできないの?..

Liquid

1か月前

【Shopify Liquid】土日など休日はスキップ!自動で最短の発送日を算出して案内する方法

Liquidを使って土日や祝日をスキップし、自動で最短の発送日を算出する方法を紹介します。..

Liquid

1か月前

【Shopify小技】15時までの購入で当日発送と案内&注文メール通知に実装

たとえば、「15時までの注文は当日発送」といった案内を、自動で表示できたら便利だと思いませんか?..

Js

1か月前

【Shopify小技】セール終了の日付と時間までのカウントダウンをJavascriptで実装

こうした視覚的な要素は、購入の後押しとなり、より多くの顧客を引き込む効果が期待できます。..

Liquid

2か月前

【Liquid日付計算】注文通知メールをカスタマイズ!支払期限を翌週月曜日の日付にする

特に「銀行振込」や「コンビニ決済」のような後払いの決済方法では、支払い期限を明示することが重要です。..

制作アイディア

2か月前

Shopifyでファンクラブを制作する人が押さえておくべき「リアルな要件定義」7項目

最初、ファンクラブサイトを作るには手軽なWordPressを考えました。しかし、会員情報を扱うことになるため、セキュリティの不安‥..

Js

2か月前

【JavaScript】Shopify ブログ関係なく特定タグを持つ全記事の一覧を作る(+時系列で並び替え)

残念ながら、Liquidでブログ記事を並び替えできる方法はない(2025年2月現在)ようです。..

Flow

2か月前

【Shopify Flow】注文をGoogleスプレッドシートに追加!つまずきやすい4つのポイントを解説

ただし1点注意点が必要です。注文のラインアイテムを一番最後に表示されるようにするという点です。..

Flow

2か月前

【Shopify Flow】「スケジュール」ワークフロー終了後に「実行対象リスト」を内部メールで送信

実はこのフロー、正確にいうと「実行後」ではなく、ほぼ同時進行になります。..

Flow

2か月前

Shopify Flowとはなに?使い方のヒントになる実践サンプル6選

日本語対応にはまだ課題があり、独自の組み合わせによって初心者には少々ハードルが高い領域と言えます。..

Liquid

2か月前

Shopify「ブログ」カスタマイズ&オリジナル記事一覧作成のヒント8選

商品ページだけでは伝えきれない情報を発信する事によってきっとECサイトの成長に役立つと考えられます。..

Liquid

2か月前

【Shopify カスタマイズ】メニュー カスタマイズ&作成するために知っておくべき事5選

オリジナルメニューを作成することで、サイトの使いやすさや視覚的魅力を向上させることができます。..

アプリ

3か月前

【Shopifyアプリ】会員のQRコードを簡単生成!イベントで入場チェックをする

QRコード入場が流行っているけど、うちでも導入できないか?..

アプリ

3か月前

Helium Customer Fieldsを使って顧客に任意のタグを付けるフォームを作成

会員からの退会希望の通知を受けたスタッフは、有効期限と会員番号のメタフィールドの値を削除し、「有料会員」タグを削除するなど、マニュアル作業が発生してしまいます。..

Liquid

3か月前

【Shopify小技】アプリなしでストア会員にメルマガ登録を促すボックスを作る

アプリなしでのカスタマイズは、AjaxリクエストやCustomerのAccount APIの用いる必要があるため難しい..

Flow

3か月前

【Shopify Flow】特別な日にロイヤリティの高い顧客にクーポン番号メールを送る

このパレートの法則に基づき、客単価の高いリピーターを増やす戦略が練られております。..

Flow

3か月前

【Shopify Flow】ちょっと気になる「Get product data」「Get customer data」データの絞り込みについて

上限100名にしかデータ取得ができないため、その中でさらに「苦情履歴あり」タグを持つユーザーを絞り込むと、9900人は対象から外れる・・..

Liquid

3か月前

【Shopify小技】アプリなしで商品公開後「販売開始日時」を指定(予約)する方法

可能であれば、商品ページが公開された状態で特定の日時に購入ができるようにしたい‥..

Js

3か月前

【Shopify小技】特定の商品オプションを選択すると注意書きがモーダル表示される

そうすると、知らなかった、読んでいないと苦情を言う人が続出する気が‥..

Liquid

4か月前

【Shopify小技】BtoBビジネスに有効かも?カートに入れた数をリアルタイムで制限

ブラウザの再読み込みをしないと「cart.item_count」にその数値が反映されません。..

Liquid

4か月前

【Shopify Liquid】空の変数で作る「重複しない」コレクションの商品タグリスト

ループ(for文)を使ってリスト化すると「小学生用」「セール中」が2回出現する事になります。..

Liquid

4か月前

【Shopify Liquid】在庫のある商品リスト(配列)を作る「空の変数」について

変数に格納する値が「空」の変数を指します。..

Flow

4か月前

【Shopify Flow】インターナルメールで支払い未確定注文をスタッフに知らせる

ワークフロー設計の抽象的なため、慣れるまでに時間がかかると言われています。..