liquid

Liquidを使った配列の作り方、操作方法！！

2023年8月16日公開

配列を表示したイメージ↓

Shopifyで配列を作る方法について解説します！

ちなみに配列とは、
複数のデータを順番に並べた構造のことを言います。

配列のコードはこちら

<!-- ①変数を定義 -->
{% assign mushroom = '松茸,舞茸,まちたけ,エリンギ' %}

<!-- ②splitフィルターを使って配列を定義 -->
{% assign mushroomArray = mushroom | split: ',' %}

<!-- ③配列の中身を全て出力 -->
<div class="page-width">
    <ul>
        {% for mushroom in mushroomArray %}
        <li>{{ mushroom }}</li>
        {% endfor %}
    </ul>
</div>

配列を作るにはをsplitフィルター使います。

※splitフィルターとは、指定した区切り文字に基づいて部分文字列の配列に分割する。

解説

① mushroom変数にカンマ(,)区切りで文字列を代入
今回はカンマ(,)で区切って配列用の変数を定義します。カンマだけではなく「_」や「text」など任意の文字列でも大丈夫です！

② splitフィルターを使って変数を配列に分割
区切り文字（今回はカンマ）をsplitしてあげて配列に分割

③ for文を使って配列の中身を順番に出力
配列の中身を順番に全て出力したい時はfor文を使います！

n番目の要素を取り出す

各データは連番で管理されており０からスタートです

<!-- 任意の配列の中身を出力 -->
{{ mushroomArray[0] }}

配列に値を追加する

appendフィルターを使って追加します。カンマをつけるのを忘れずに！

<!-- 配列に値を追加 -->
{% assign mushroom = mushroom | append: ',' | append: '椎茸' %}

配列から要素を削除

カンマ(,)も一緒に削除するのを忘れないこと空の要素ができてしまう。

<!-- 配列から要素を削除 -->
{% assign mushroom = mushroom | remove: ',まちたけ' %}

重複する要素を削除

表示イメージ↓

{% assign mushroom = '松茸,舞茸,まちたけ,エリンギ,まちたけ' %}
{% assign mushroomArray = mushroom | split: ',' %}

<!-- 同じ項目があれば削除し重複をなくす -->
{% assign mushroomDuplicateArray = mushroomArray | uniq %}

<!-- 重複あり -->
{{ mushroomArray }}
<!-- 重複なし -->
{{ mushroomDuplicateArray }}

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

表示イメージ↓

{% assign mushroom = '松茸,舞茸,まちたけ,エリンギ,まちたけ' %}
{%- liquid
    assign all_array = 'まちたけ,舞茸,松茸,エリンギ' | split: ','
    assign exclude_array = 'まちたけ,舞茸' | split: ','
    assign new_array_string = ''

for tag in all_array
    if exclude_array contains tag
    continue
    endif
    if new_array_string == blank
    assign new_array_string = tag
    else
    assign new_array_string = new_array_string | append: ',' | append: tag
    endif
endfor
assign new_array = new_array_string | split: ','
-%}

ALL array（元の配列）↓
<p>{{all_array}}</p>
exclude array（配列から消したい要素）↓
<p>{{exclude_array}}</p>
new array（削除後の配列）↓
<p>{{new_array}}</p>

①all_array → 元の配列
②exclude_array → 配列から消したい要素
③new_array → ①から②の要素を削除した配列

liquidにて配列から任意の要素を削除するには新しく配列を作り直す必要があります

※配列から要素を削除にもあるようにsplit前だったらremoveフィルターで任意の要素を削除可能です

まとめ

配列について解説しましたー！

liquidはJavaScriptみたいに配列用のメソッド（push()やpop()など）がないのでフィルターを使って操作する必要があります。

難しそうに見えますが１つずつ噛み砕いて見れば意外と簡単なので配列で悩んだ際はこの記事を見て頂けると嬉しいです！

ブログ一覧に戻る

ショピクラ