Shopifyをカスタマイズ？Liquidの基本構文を解説！

#はじめに
今回は、liquidの基本的な構文を学習していきます。

頑張っていきましょう。

今回は[こちら](https://shopify.github.io/liquid/tags/iteration/)を参考にしました。
#サイト上の表示とロジック
Ruby On Railsを触ったことがある人なら馴染み深いですが、liquidはHTMLの文章中に直接コードを書くことができます。

`.html.erb`ファイルのようなものですね。

HTMLの中に直接コードを書く上で大切になってくるのは、`表示`と`ロジック`です。

表示とは、HTMLのようにサイト上に表示される部分で、ロジックとはif文などのコードの制御を行う部分です。

ifやforなどのコードを制御する部分がHTMLファイル上に見えてしまったら、大変なことになりますよね。

そのため、liquidファイルでは表示とロジックを明確に区別しています。

##表示
liquidでサイト上に表示を行う場合は、`{{}}`でコードを囲います。

```.liquid
{% assign number = 100 %} 
<h1>{{number}}</h1>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/a42fd903-404c-9c21-65af-057806d36d63.png)

`{{}}`の中にはShopifyであらかじめ定義されている「オブジェクト」や、「オブジェクトのプロパティ」、または「文字列」が入ります。

簡単に書くと、liquid内で定義した変数を表示するときに用います。

##ロジック
`{%%}`は、liquidのロジックを用いるときに使います。

liquidのロジックとは、具体的には`for文`や`if文`、`変数宣言`などが当てはまります。

`{{}}`との違いは、サイト上に出力されないということです。

```.liquid
{% if 5 > 3 %}
    <h2>5は3より大きい</h2>
{% else %}
    <h2>5は3より小さい</h2>    
{% endif %}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/06738886-be11-2ffd-a00f-36d401e75a9f.png)

それでは、liquidの具体的な構文を見てみましょう。

#変数の定義（assign）
既に一度出てきていますが、liquidにおいて変数の定義は`assign`を用いて行います。

変数の定義はロジックなので`{%%}`を用います。

```.ilquid
{% assign number = 100 %} 
<h1>{{number}}</h1>
```

#条件分岐（if）
これも既に出てきていますが、条件分岐は`if`を使って表現します。

ifもロジックなので`{%%}`を使います。

```.liquid
{% if 5 > 3 %}
    <h2>5は3より大きい</h2>
{% else %}
    <h2>5は3より小さい</h2>    
{% endif %}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/06738886-be11-2ffd-a00f-36d401e75a9f.png)

`if`と`endif`で挟むことで、条件分岐を実装できます。他のプログラミング言語と同じように、`else`も使えます。

#ループ（for）
残念なお知らせですが、liquidではwhileループが使えません。

forループを頑張って使いましょう。

```.liquid
{% for i in (1..5) %}
    <h1>{{i}}</h1>
{% endfor %}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/a531cb8b-8f7a-dffc-a8c2-6798c61550fb.png)

pythonなどで使う`range`の代わりに、(1..5)とることで、1から5までのイテレーターを作成することができます。

####break
`break`は使えます。

他の言語と同じで、`break`文が走ると処理が終了します。

```.liquid
{% for i in (1..5) %}
  {% if i == 4 %}
    {% break %}
  {% else %}
    <h1>{{ i }}</h1>
  {% endif %}
{% endfor %}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/d9b88b5b-7de3-2562-b1cc-6d7763418db8.png)

####continue
ついでに、`continue`も使えます。

```.liquid
{% for i in (1..5) %}
  {% if i == 4 %}
    {% continue %}
  {% else %}
    <h1>{{ i }}</h1>
  {% endif %}
{% endfor %}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/b5b6499f-9ad3-ac5f-04d8-aa0cfeeab586.png)

#フィルター
[こちら](https://shopify.dev/docs/themes/liquid/reference/filters/url-filters)を参照しています。

liquid特有の書き方ですが、変数をパイプで繋ぐことでフィルターをかけることができます。

イメージとしては、変換器のようなものだと思って下さい。

assetsファイルを渡したら、そのassetsファイルのURLを返す`asset_url`というフィルターや、配列を渡すと一番最初の値を返す`first`というフィルターがあります。

以下のコードで、具体的な挙動を見てみましょう。

##asset_url
テーマの「assets」フォルダにあるファイルのURLを返します。

```.liquid
{{ 'shop.css' | asset_url }}
```

>//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.css?28253

`asset_url`を用いることで、タグのsrc属性にurlを渡すことができます。

応用として、スタイルシートの読み込みタグの出力をするフィルターを連結させることができます。

```.liquid
{{ 'shop.css' | asset_url | stylesheet_tag}}
```

上記のように書くと、`shop.css`のurlがstylesheetタグに渡された状態の、stylesheetタグを出力することができます。

##asset_img_url
テーマの「assets」フォルダにある画像のアセットURLを返します。 また、asset_img_urlは画像サイズパラメータを受け取ります。

```.liquid
{{ 'logo.png' | asset_img_url: '300x' }}
```

>//cdn.shopify.com/s/files/1/0000/0001/t/1/assets/logo_300x.png?42

上記のように、asset_img_urlは画像サイズをパラメータとして受け取ります。

##img_url
戻り値として、画像のURLを返します。また、画像のサイズをパラメーターとして受け取ります。

また、以下のオブジェクトで`img_url`を用いることができます。

+ product
+ variant
+ line item
+ collection
+ article
+ image

`img_url`フィルターの後には、使用する画像のサイズを入力して下さい。また、もとの画像のサイズよりも小さいサイズを指定した場合は、Shopifyは画像を拡大縮小して表示します。

画像サイズを指定しない場合は、フィルターは（100 x 100）の画像を返します。

```.liquid
{{ product | img_url: '100x100' }}
{{ variant | img_url: '720x720' }}
{{ line_item | img_url: '1024x' }}
{{ product | img_url }}
```

上記のようにすると、オブジェクトの画像のURLを取得することができます。

このように、フィルターはかなり多くあるので、詳しくは別の記事で解説したいと思います。

#終わりに
今回の記事を最後まで読んで頂きありがとうございました。

Shopifyで重要なのはフィルターをどう使うのかということと、オブジェクトをどう使うのかという部分です。

その辺りは、また別の記事にまとめるので、楽しみにして下さい。

# Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://coming-soon.reterior.jp/

https://apps.shopify.com/shopify-application-314?locale=ja&surface_detail=%E3%83%AA%E3%83%86%E3%83%AA%E3%82%A2&surface_inter_position=1&surface_intra_position=1&surface_type=search