今回は、Liquidを使用した配列の作り方をご紹介します。

splitフィルターを使用して配列を作成

Liquidで、配列を作る時はsplitというフィルターを使用します。

{% assign sweets = 'cake, icecream, crepe, applepie' | split: ', ' %}

これで、sweetsという配列が完成しました。

配列は以下のように作成されます。
①sweetsという変数に文字列としていくつか項目を追加する。
②splitフィルターを使用して文字列の', 'で分割する。

splitはどんな文字列でも分割可能

今回は', 'で分割しましたが、例えば以下のように分割して配列を作成することも可能です。

//' | 'で分割
{% assign sweets = 'cake | icecream | crepe | applepie' | split: ' | ' %}

//$で分割
{% assign sweets = 'cake$icecream$crepe$applepie' | split: '$' %}

//ひらがな'あ'で分割
{% assign sweets = 'cakeあicecreamあcrepeあapplepie' | split: 'あ' %}

一応ご紹介をしましたが、', 'での分割が見やすくて一般的かと思うので他の記号での分割はあまりおすすめしません。笑

スペースなどに気を付ける

一番最初に作成した', 'で分割した配列ですが、スペースを入れない場合うまく配列が生成されない可能性があります。

splitする文字列(記号)を指定する際は、スペースの有無など細かい部分についても確認しましょう。

配列に要素を追加する

//変数を作る
{% assign sweets = 'cake, icecream, crepe, applepie' %}

//文字列tartを追加する
{% assign sweets = sweets | append: ', ' | append: 'tart' %}
{% assign sweets_array = sweets |  split: ', ' %}

要素を追加していく場合はappendを使用して文字列を繋げていき、最後にsplitで配列を作成します。

配列の中身を使用する方法

Liquidで作成した配列の中身を、取り出して表示してみましょう。

インデックス番号で特定の要素を取得する

//配列を作成する
{% assign sweets = 'cake, icecream, crepe, applepie, tart' | split: ', ' %}

//インデックス番号で特定の要素を取得する
<p>{{ sweets[0] }}</p> // 表示結果：cake

配列のインデックス番号は0から始まり、前から順番に割り当てられます。
今回は、0: cake, 1: icecream, 2: crape, 3: applepie, 4: tartと割り当てられているため、0番目のcakeが表示されました。

このように、{{ 配列名[インデックス番号] }}と記述することで、中身を1つだけ取り出すことが出来ます。

for文を使用して順番に要素を取得する

//配列を作成する
{% assign sweets = 'cake, icecream, crepe, applepie, tart' | split: ', ' %}

//for文で配列の要素を順番に表示する
{% for item in sweets %}
  <p>I like {{ item }}! </p><br>
{% endfor %}

こちらの表示結果は、
I like cake!
I like icecream!
I like crape!
I like applepie!
I like tart!
となります。

for文とif文を併用して特定の要素を取得する

//配列を作成する
{% assign sweets = 'cake, icecream, crepe, applepie, tart' | split: ', ' %}

//for文とif文を使用してsweetsの中で'c'を含む要素のみ取得する
{% for item in sweets %}
  {% if item contains 'c' %}
    <p>I like {{ item }}! </p><br>
  {% endif %}
{% endfor %}

こちらの表示結果は、
I like cake!
I like icecream!
I like crape!
となります。

cが含まれていないapplepieとtartは表示されませんでした。
このように、配列とその他の処理を組み合わせることで、様々な処理ができるようになります。

まとめ

Liquidを使用した配列の作り方をご紹介しました。
他のプログラミング言語を学習された方は、少し煩わしく感じるかもしれません。
配列は、Shopify構築で度々登場するので覚えておくと便利です。

Liquidには配列のフィルターもいくつかあるので、いつかそれも記事にしたいと思います。