エンジニアの皆さん、Liquidのwhereを活用していますか？
今回は、Themeカスタマイズを行う際に、特定の条件を満たす要素を効率的に取得するためのwhereについて紹介します。

if文と配列で取得する方法

これまで、配列の中のオブジェクトが特定の要素を持つ場合、その要素を取得するために以下のようなコードを書いていました。

{% assign test = "" %}
{% for product in collections.all.products %}
  {% if product.metafields.hoge.fuga == xxxx %}
    {% assign test = test | append: "," | append: product %}
  {% endif %}
{% endfor %}
{% assign test = test | remove_first: "," %}
{% assign test = test | split: "," %}

{% if test.size > 1 %}
  {% for i in test %}
    何かを表示
  {% endfor %}
{% endif %}

この方法だと、仕様が複雑になると、コードが膨れ上がってしまいます。
サンプルなので、これぐらいのコードで済みますが、実務の中の条件では本当に大変なことになります。
作る時はまだ、いいんです。
その時にコメント書いて、作ってるんで。
半年後に、変更・修正が入ったことを想像してみてください…ゾッとするでしょ？

whereを使った取得方法

whereを使用すると、配列の中のオブジェクトが特定の値を持つ場合、その要素を配列として取得することができます。

{% assign test = collections.all.products | where: "metafields.hoge.fuga", "xxxx" %}
{% if test.size > 1 %}
  {% for i in test %}
    何かを表示
  {% endfor %}
{% endif %}

驚くべきことに、これだけで目的の要素を取得できます！
今までの方法と比べて、非常にシンプルで読みやすいコードになりました。
私自身もこの方法を知って驚きましたし、今までの取得方法を考えると少し恥ずかしくも感じます。

まとめ

Liquidのwhereは、特定の条件を満たす要素を効率的に取得する際に非常に役立ちます。コードの見通しを良くするためにも、ぜひ活用してみてください。
あと、たまにはチートシートを眺めるのも大事ですね！

参考リンク
Shopify Liquid Documentation - where
Shopify Liquid GitHub - where

ARCHETYPからのお知らせ

ARCHETYPではShopifyテーマ、Shopifyアプリ、Webサイト/サービスなどの開発を行うエンジニアを募集中です！
正社員、副業などとわず募集です！（フルリモートも相談可です！）
https://www.archetyp.jp/recruit/
気になる方はお気軽にエントリーお待ちしております！