ShopifyのLiquidテンプレートで頻出する「where」フィルタは、オブジェクトの配列から特定の条件に一致する要素を絞り込むのに便利です。「first」や「last」を使えば先頭や末尾の要素を簡単に取得でき、「sort」や「map」などと組み合わせればより柔軟なデータ操作も可能です。
Shopifyでテーマをカスタマイズしていると、よく目にするのが「Liquidフィルタ」という存在です。これは、オブジェクトのデータを整形したり、特定の条件で絞り込んだりする際に欠かせない機能のひとつ。
中でも、特定の条件に一致するアイテムだけを取り出したいときに使われるのが「where」フィルタです。たとえば、「タグが◯◯の記事だけを表示したい」といった場面では、このフィルタが大活躍します。
今回は、そんな便利な「where」フィルタの基本的な使い方と、つまずきやすいポイントについて、わかりやすく解説していきます。
「where」フィルタ
「where」フィルタは、オブジェクトの中から特定のプロパティ(キー)に指定した値を持つ要素だけを取り出すときに使います。
このとき返されるのは配列形式のデータなので、そのままループ処理(for文)で出力することも可能です。
たとえば、「販売元(vendor)」が「Nintendo」の商品だけを抽出したい場合は、以下のように書きます。
{% assign nintendo_products = collection.products | where: 'vendor', 'Nintendo' %}
このように書くことで、collection.products
の中から「vendor」が「Nintendo」である商品だけがnintendo_productsという配列に格納されます。あとは、この配列をfor文でループすれば、Nintendo製品だけのリストを簡単に作成できます。
他の使用例
用途 | Liquidコード | 説明 |
---|---|---|
特定のベンダーの商品を抽出 | collections['all'].products | where: 'vendor', 'Nintendo' |
販売元が「Nintendo」の商品だけを配列で取得 |
特定のタグを持つ記事を抽出 | blog.articles | where: 'tags', 'イベント' |
※注意! tagsは配列のため、うまくマッチしない場合あり |
在庫があるバリエーションだけを抽出 | product.variants | where: 'available', true |
在庫があるバリエーション(variant)だけを取得 |
公開されているブログ記事 | blog.articles | where: 'published', true |
非公開記事を除外し、公開中の記事だけを取得 |
カスタムメタフィールドで絞り込み | collection.products | where: 'metafields.custom.flag', 'true' |
カスタムメタフィールド「flag」が true の商品のみ抽出(要Liquid対応) |
付随でよく使わっる「first」と「last」フィルタ
「where」フィルタで条件に合う要素を配列として取り出したあとは、さらにその中から最初または最後の要素だけを取得したいケースもよくあります。
そんなときに便利なのが「first」フィルタと「last」フィルタです。
{% assign nintendo_product = collections.products | where: 'vendor', 'Nintendo' | first %}
<p>最初に見つかったNintendo商品:{{ nintendo_product.title }}</p>
{% assign sony_product = collections.products | where: 'vendor', 'Sony' | last %}
<p>最後に見つかったSony商品:{{ sony_product.title }}</p>
他にも以下のフィルタも「where」と組み合わせて使われることが多い便利なツールです。
- sort: 配列を特定のプロパティで昇順に並べ替える。
例:products | sort: 'price'
→ 商品を価格の安い順に並べ替え - reverse: 配列の順序を反転させる。
例:products | reverse
→ 配列の順番を逆にして取得 - map: 配列内の特定のプロパティ値だけを取り出して、新しい配列を作成する。
例:products | map: 'title'
→ 商品タイトルだけの配列を作成
いかがでしょうか?「where」フィルタは、Liquidにおけるデータ操作の中でも非常に便利な存在ですが、すべてのケースにマッチするとは限らず、とくに配列プロパティへの適用には注意が必要です。
正直なところ、私自身はこのフィルタを積極的にアレンジして活用するというよりは、テーマやデフォルトテンプレート内の記述を読み解くための理解にとどめていることが多いです。
とはいえ、基本的な使い方を押さえておけば、テーマのカスタマイズや修正の際に大きな助けとなるのは間違いありません。
皆さんもぜひ、自分に合った使い方で「where」フィルタを取り入れてみてください!