ShopifyのLiquidで配列と配列を結合する方法【重複の取得・削除】

ShopifyのLiquidでの配列処理の基礎と課題

Liquidは、Shopifyで使用されるテンプレート言語であり、HTMLと組み合わせて動的なページ生成を実現するための中核的な存在です。
しかし、LiquidにはJavaScriptやRubyといったプログラミング言語にあるような高機能な配列操作メソッドがなく、配列の扱いには制約が存在します。

たとえば、Liquidには concat や push、uniq などの便利な配列操作関数が用意されていないため、「配列同士の結合」「重複の削除」「要素のフィルタリング」などを行うには、ループや条件分岐などを駆使した手動処理が基本となります。

そのため、Shopifyでのデータ整形においては、「Liquidでどうやって目的の形に配列を加工するか」がプロジェクトの成否を分ける重要な要素となります。
Liquidでは、自由度の高い配列処理がそのまま柔軟なサイト構築につながります。

テンプレート言語とは

テンプレート言語とは、HTMLなどの静的な構造に、動的なデータやロジックを組み合わせてWebページやメールなどを自動生成するための言語です。プレースホルダーや制御構文（if文・for文など）を使って、データベースの内容を表示したり、繰り返し処理を行ったりできます。デザインと処理を分離できるため、デザイナーとエンジニアの分業がしやすく、保守性や再利用性にも優れています。Liquid、EJS、Twig、Bladeなどが代表的です。

Liquidでの配列の結合と重複削除の解説

この記事では、以下のような2つの配列を例に解説を進めます。

Liquid

{%- assign array1 = "apple,banana,orange" -%}
{%- assign array2 = "banana,grape,apple" -%}

この2つの配列を単純に連結すると、`["apple", "banana", "orange", "banana", "grape", "apple"]` のように、"banana" や "apple" が重複して含まれる状態になります。

Shopifyのテーマでは、たとえばタグやカテゴリをユーザーに一覧表示したい場合などに、こういった配列結合の処理が求められます。
しかし、重複があるまま表示すると、UX（ユーザー体験）の面でよくありませんし、SEO的にも好ましくありません。
そこで必要になるのが「重複を除いた配列結合処理」です。Liquidでは、すでに含まれている値を1つずつチェックしながら、手動で配列に追加していくという処理が必要となります。

配列の結合と重複削除するソースコード

Liquid

{%- assign array1 = 'apple,banana,orange' -%}
{%- assign array2 = 'banana,grape,apple' -%}
{%- assign array1 = array1 | split: ',' -%}
{%- assign array2 = array2 | split: ',' -%}

{%- assign merged_array = array1 -%}

{%- for item in array2 -%}
    {%- unless merged_array contains item -%}
        {%- assign merged_array = merged_array | join: ',' -%}
        {%- assign merged_array = merged_array | append: ',' | append: item -%}
        {%- assign merged_array = merged_array | split: ',' -%}
    {%- endunless -%}
{%- endfor -%}

{%- for item in merged_array -%}
    {{ item }}
{%- endfor -%}

重複を除外しながら配列を結合する処理の解説

この処理の流れは以下のようになります。

1. 最初に merged_array に array1 を代入（初期値設定）
2. array2 をループ処理
3. 各要素について、merged_array にその値が含まれていなければ追加
4. 追加時は一度文字列（join）に戻し、カンマで連結してから再度配列化（split）することで要素を追加

このように、Liquidの制約の中でも工夫を凝らせば、実用に耐える配列結合処理が可能となります。
Liquidは一見すると直感的でシンプルな構文ですが、こうした操作ができるようになると、テーマ開発の幅が大きく広がります。
また、この手法は商品タグの集約、ナビゲーションの構築、カスタムセクションのフィルタ処理などにも応用可能であり、繰り返し使えるパターンとして覚えておくと便利です。

配列同士の共通要素（重複要素）を抽出する方法

配列の結合だけでなく、共通項目の取得（重複要素の抽出）も、Shopifyテーマ開発においては重要な処理のひとつです。
たとえば、異なるカテゴリーに属する商品群の中から、共通するタグや属性を抽出してレコメンドを表示する、といった機能に活用されます。

Liquidでこれを実現するには、以下のような構成で処理を行います。

Liquid

{%- assign result = blank -%}

{%- assign array1 = 'apple,banana,orange' -%}
{%- assign array2 = 'banana,grape,apple' -%}
{%- assign array1 = array1 | split: ',' -%}
{%- assign array2 = array2 | split: ',' -%}

{%- for item in array2 -%}
    {%- if array1 contains item -%}
        {%- assign result = result | append: ',' | append: item -%}
    {%- endif -%}
{%- endfor -%}

{%- assign result = result | split: ',' -%}

{%- for item in result -%}
    {{ item }}
{%- endfor -%}

1. 空の配列を定義（共通値を格納するため）
2. 一方の配列をループし、もう一方の配列に contains で含まれているか確認
3. 含まれていれば、重複配列に追加

このような重複チェックの仕組みを自前で構築することで、Liquidでも「AにもBにも含まれる値だけを取り出す」といった条件付きの処理が可能になります。
テーマ側のレイアウトにあわせて、「共通ブランド一覧」や「共通仕様を持つ商品の絞り込み」などに応用できるため、テンプレートロジックの質が格段に上がります。

出力形式とフロントエンド連携

ここまでで、配列を結合し、重複を除外・抽出する処理ができるようになりました。
あとは、これらの配列をどのようにユーザーに見せるかを考える段階です。

たとえば、配列に格納された値をHTML上でリスト表示したい場合は、Liquidの `for` を使ってループ出力することで、ダイナミックにリストを生成することができます。
このように整形された出力は、ユーザーの視認性を高めるだけでなく、検索エンジンにも評価されやすくなります。
さらに、構造化マークアップやセマンティックなHTMLタグと組み合わせれば、SEOの観点でも大きな効果が期待できます。

また、JSON形式やデータ属性で出力すれば、JavaScript側でのデータ再利用にも対応できるため、拡張性のあるサイト設計にもつながります。

応用パターンと今後の発展的な使い方

Liquidでの配列結合ロジックは、単なるテンプレート制御にとどまらず、さまざまな場面で活用できます。

たとえば、

• 商品メタフィールドに記録されたカスタム値を統合してリスト化
• ブログ記事のタグ・カテゴリを統合してナビゲーションに表示
• 類似商品の比較項目を一覧表示し、差異を強調
• ユーザーの閲覧履歴とおすすめ商品の共通点を抽出

こういった応用例では、「Liquidでどこまでデータを加工できるか」がUXやコンバージョンに大きく関わってきます。
Liquidの本質を理解し、「ループ」「条件分岐」「配列操作」の3つをマスターすれば、Shopifyテーマ開発の自由度は飛躍的に向上します。

まとめ

いかでしたでしょうか？
今回の記事では、ShopifyのLiquidにおいて配列を結合し、重複を除去・抽出するための基本的かつ実用的なテクニックを解説しました。

今回のポイントをまとめますと、次のとおりです。

他にもShopifyに関する技術や実用テクニックを随時発信しています。
「役に立った」と思っていただけた方は、ぜひブックマークやSNSでのシェアをお願いいたします！

最後までお読みいただきありがとうございました！