コンテンツにスキップ
【厳選】おすすめ Shopifyアプリ
【厳選】おすすめ Shopifyアプリ
Shopify Liquidで配列から任意の要素を取り除いた配列を生成する Tsun Inc.

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

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

引用元: 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.へお問い合わせください。

前の記事 Shopifyのブログ記事内に自動で目次を生成する
次の記事 2022年12月時点のShopifyアプリ開発ベストプラクティス

Shopify Apps

TECH BLOGS

BLOGS

編集プロセス

EコマースやShopifyの初学者にとって、できるだけ “やさしく” “わかりやすく” “正確に” 難しいコマース用語やマーケティング用語、ストア構築から販売までの仕組み・ノウハウを伝えることを心がけて、記事コンテンツを作成しています。

詳しく見る →

掲載情報に関して

掲載している各種情報は、株式会社Tsunが調査した情報をもとにしています。できるだけ“最新“かつ“正確“な情報の掲載に努めておりますが、内容を完全に保証するものではありません。当サイトによって生じた損害について、株式会社Tsunではその賠償の責任を一切負わないものとします。掲載情報に誤りがある場合には、お手数ですが株式会社Tsunまでご連絡をいただけますようお願いいたします。

アプリの比較

{"one"=>"比較する2つまたは3つのアイテムを選択します", "other"=>"選択された3つのアイテムの{{ count }}"}

比較する最初のアイテムを選択します

比較する2番目の項目を選択します

比較する3番目の項目を選択

比較