【Shopify】LiquidのMath filterを全てまとめてみた話

#はじめに
今回の記事では、ShopifyのMath filterを全てまとめてみました。

こちらを参考にしました。

#Math filter
Mathフィルタを使うことで、四則演算や四捨五入等の数学的処理を行うことができます。

Mathフィルタも他のフィルタと同様に左から順に処理をし、複数の処理をつなげて書くことができます。

下の例では、minusの引き算、timesの掛け算、divided_byの割り算の順で、処理されます。

.liquid

You save {{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price }}%

それでは、Math filtersを見てみましょう。

##abs
数値の絶対値を返します。

.liquid

{{ -17 | abs }}

17

absフィルタは、数字のみの文字列でも処理ができます。

.liquid

{{ "-19.86" | abs }}

19.86

##at_most
数値を最大値に制限します。

at_mostで指定した値よりも、入力値が大きいときにat_mostで指定した数字を返し、指定した値以下のときは入力値をそのまま返します。

例を見てみましょう。

入力値4に対して、at_mostフィルタで最大値を5、3を設定しています。

最大値を5に設定したとき、入力値4よりも大きいため、そのまま4が返されます。

最大値を3に設定したとき、入力値4よりも小さいため、at_mostで設定した3が返されます。

.liquid

{{ 4 | at_most: 5 }}
{{ 4 | at_most: 3 }}

4
3

つまり、最大値を設定して、入力値が最大値を超えていたら、最大値を返すフィルタです。

##at_least
数値を最小値に制限します。

at_leastで指定した値よりも、入力値が小さいときにat_leastで指定した値を返し、指定した値以上のときは入力値をそのまま返します。

.liquid

{{ 4 | at_least: 5 }}
{{ 4 | at_least: 3 }}

5
4

at_mostと似たような処理の仕方をしていることがわかりますね。

at_leastフィルタと、先程のat_mostフィルタを用いることで、値の最小値や最大値を設定して返すことができます。

##ceil
入力値を繰り上げて、整数を返します。

.liquid

{{ 4.6 | ceil }}
{{ 4.3 | ceil }}

5
5

##divided_by

divided_byで設定した値（下記例だと10）で入力値を除算した値を返します。

.liquid

<!-- product.price = 200 -->
{{ product.price | divided_by: 10 }}

20

入力値か、divided_byで指定した値のどちらかに小数があれば、少数点以下を表示できます。

.liquid

{{ 50 | divided_by: 10 }}
{{ 50 | divided_by: 10.0 }}
{{ 50.0 | divided_by: 10 }}
{{ 50.0 | divided_by: 10.0 }}

5
5.0
5.0
5.0

##floor

入力値の少数を切り捨て、整数を返します。

.liquid

{{ 4.6 | floor }}
{{ 4.3 | floor }}

4
4

##minus

入力値からminusで設定した値を引き算します。

.liquid

<!-- product.price = 200 -->
{{ product.price | minus: 15 }}

185

##plus

入力値からplusで設定した値を足し算します。

.liquid

<!-- product.price = 200 -->
{{ product.price | plus: 15 }}

215

##round

入力値を整数または任意の小数部の桁数にします。

roundに値を設定しない時は、四捨五入した整数を返します。

round: 2のように値を設定すると、小数部の桁数を少数第二位までに四捨五入した値を返します。

.liquid

{{ 4.6 | round }}
{{ 4.3 | round }}
{{ 4.5612 | round: 2 }}

5
4
4.56

##times

入力値をtimesで設定した値で乗算します。

.liquid

<!-- product.price = 200 -->
{{ product.price | times: 1.15 }}

230

##moudulo

入力値を、moduloで設定した値で割り、その余りを返します。

下記の例では、12を5で割ると2が余るので、2が出力されます。

.liquid

{{ 12 | modulo:5 }}

2

#終わりに
今回の記事はここまでになります。

お疲れさまでした。

Shopify アプリのご紹介

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