【Shopify】Math filtersの種類と使い方を解説

悩む人

・Math filtersってどんなものがあるの？
・種類と使い方を知りたい！

こんな疑問と要望にお応えします。

Shopifyには、テーマカスタマイズで使え、出力値を加工できるフィルターが様々用意されています。

今回はShopifyで使える数値を加工するフィルター、Math filtersの種類と使い方を解説していきます。

本記事を参考にすれば、数値の出力を自在に操れるようになり、テーマカスタマイズの幅も広がりますよ。

本記事は公式リファレンスを参照に記述しています。

Math filtersとは

Math filtersは、Shopifyで数値の出力値を加工できるフィルターのことです。

Math filtersは複数のフィルターを同時に使うことができ、その場合は左から右にフィルターが適用されていきます。

例えば、以下のように記述した場合は、「minus（引き算）」が初めに行われ、「times（掛け算）」の後に、「devided_by（割り算）」が行われる仕組みになっています。

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

ここでの注意点は、数学のように掛け算や割り算が先に行われるのではなく、左から順にMath fitltersが適応されていくという点です。

トマトソース

いつもの癖で掛け算や割り算が先に行われるからと考えて、適当な順番に記述すると思った出力値が得られないので気を付けましょう！

Math filtersの種類

Shopifyで使えるMath filtersは以下の11種類です。

それぞれ解説していきます。

Math filtersの使い方

abs

absは数字の絶対値を返却します。

absの記述例と出力結果は以下の通りです。

{{ -20 | abs }}

//出力：
20

トマトソース

ちなみに、absフィルターは数字のみ記述している文字列であれば、文字列にも適用できます。

{{ "-12.26" | abs }}

//出力：
12.26

at_most

at_leastは数字の最小値の制限を行います。

at_leastの記述例と出力結果は以下の通りです。

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

//出力：
4
3

at_least

at_mostは数字の最大値の制限を行います。

at_mostの記述例と出力結果は以下の通りです。

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

//出力：
5
4

ceil

ceilは一番近い数値に繰り上げを行います。

ceilの記述例と出力結果は以下の通りです。

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

//出力：
5
5

ここでの注意点は、近い数字に「繰り上げる」ということです。

トマトソース

上記の例からも分かるように、4.3の場合は4になるのではなく5になることに注意してください。

divided_by

divided_byは、出力値を指定した数で割ります。

割り算の結果は、一番近い数値に繰り下げられて出力されます。

divided_byの記述例と出力結果は以下の通りです。

<!-- product.priceが2000の場合 -->
{{ product.price | divided_by: 10 }}

//出力：
200

floor

floorは、一番近い数値に繰り下げを行います。

floorの記述例と出力結果は以下の通りです。

{{ 5.6 | floor }}
{{ 5.3 | floor }}

//出力：
5
5

トマトソース

floorは上記の例の通り、四捨五入ではなく全て繰り下げられるという点に注意しておきましょう。

minus

minusは、出力値から指定した数値を引きます。

minusの記述例と出力結果は以下の通りです。

<!-- product.priceが2000の場合 -->
{{ product.price | minus: 200 }}

//出力：
1800

plus

plusは、出力値から指定した数値を足します。

plusの記述例と出力結果は以下の通りです。

<!-- product.priceが2000の場合 -->
{{ product.price | plus: 300 }}

//出力：
2300

round

roundは、数値を四捨五入します。

roundの記述例と出力結果は以下の通りです。

{{ 5.6 | round }}
{{ 5.3 | round }}

//出力：
6
5

トマトソース

ちなみに、roundではどの小数点位置で四捨五入するかの指定もできます。

その場合は以下のように記述します。

{{ 数値 | round: 小数点の位置 }}

例))
{{ 3.5612 | round: 2 }}

//出力：
3.56

上記の例だと、小数点第2位を指定して1が四捨五入されています。

times

timesは、出力値に指定した数値を掛けます。

timesの記述例と出力結果は以下の通りです。

<!-- product.priceが2000の場合 -->
{{ product.price | times: 1.1 }}

//出力：
2200

modulo

moduloは、出力値を指定した数値で割り、その余りを算出します。

moduloの記述例と出力結果は以下の通りです。

<!-- product.priceが2000の場合 -->
{{ 15 | modulo:4 }}

//出力：
3

まとめ

今回はShopifyテーマカスタマイズで使用できるMath filtersについて解説してきました。

Math filtersは全部で11種類と意外と数も多いですが、割と使う機会も多いです。

そこまで難しいフィルターでもないので、すぐ使えるようになるのでぜひマスターしておきたいところですね。

Math filtersを忘れた、なんて時はぜひ本記事に戻ってきて、自分が使いたいフィルターを思い出していただければと思います。

関連記事 URL filtersの種類と使い方を解説①

関連記事 Color filtersの種類と使い方を解説

関連記事 ストア通貨の設定とMoney filtersの使い方を解説