Shopify Liquidで配列から任意の要素を取り除いた配列を生成する

「RuffRuff 予約販売」は在庫切れや新商品販売前、入荷待ちなどタイミングで発生する機会損失の削減をサポートします。
ノーコードかつ３ステップで簡単にセットアップでき、日本語に対応しています。
無制限で予約商品を登録および無制限で予約注文を受け付けることが可能です。

引用元: RuffRuff 予約販売

Tsun Inc.でCTOをしている小笠原です！
最近はShopifyのアプリやテーマの開発を行っています。
このブログではShopify開発に役立つ情報を共有していきます。
Shopifyエンジニアの方の参考になれば嬉しいです！

なぜ作ろうと思ったのか

Shopifyの配列を扱っていて一部を除外 (JavaScriptのArrayのfilter処理) をしたかったが、調べたところLiquidには配列から一部を除外して新しく配列を生成するような処理がないため。

作成したもの

• Liquidで配列から任意の要素を取り除く処理

対象読者

• Liquidに関する基礎的な知識

実装

対象の配列を用意する

まずは任意の要素を取り除く前の配列を用意します。 今回は例としてapple、orange、lemon、bananaという4つの文字列が入った配列を作ります。 (文字列をsplitフィルターで配列に変換します。)

{%- liquid
  # ['apple', 'orange', 'lemon', 'banana'] の配列
  assign fruits = 'apple,orange,lemon,banana' | split: ','
-%}

取り除きたい要素の配列を用意する

上で作った配列から取り除く要素を持つ配列を同様に作成します。 今回はorangeとbananaを取り除きます。

{%- liquid
  # ['orange', 'banana'] の配列
  assign exclude_fruits = 'orange,banana' | split: ','
-%}

対象の配列から任意の要素を取り除く

配列から任意の要素を取り除くには、まず配列をforループで1つずつ回します。 そして、取り除く対象(orangeとlemon)に含まれるかをチェックし、含まればなければ文字列に追加します。 (直接配列に追加できないため、一旦文字列に追加していきます) 最後に、文字列からsplitで配列を生成することで、対象の配列から任意の要素が含まれていない配列が生成できました。

{%- liquid
  # ['apple', 'orange', 'lemon'] の配列
  assign fruits = 'apple,orange,lemon,banana' | split: ','
  # ['orange', 'banana'] の配列
  assign exclude_fruits = 'orange,banana' | split: ','

  # 配列の元となる文字列を用意
  assign new_fruits_string = ''

  for fruit in fruits
    if exclude_fruits contains fruit
      continue
    endif
    if new_fruits_string == blank
      assign new_fruits_string = fruit
    else
      assign new_fruits_string = new_fruits_string | append: ',' | append: fruit
    endif
  endfor
  # 任意の要素を取り除いた配列を生成
  # ['apple', 'lemon'] の配列
  assign new_fruits = new_fruits_string | split: ','
-%}

まとめ

今回はShopifyのLiquidで配列から任意の要素を取り除く方法をご紹介しました！
小ネタですが、Liquidを書いていると割と頻出する処理かなと思いますので、お役に立ったら嬉しいです。

クローズ

Tsun Inc.ではShopifyを使ったストア構築やアプリ開発を行っています。
もし、ストア構築やアプリ開発をしたい方は、Tsun Inc.へお問い合わせください。