Shopify Liquidで変数に初期値を設定する

「RuffRuff 予約販売」は在庫切れや新商品販売前、入荷待ちなどタイミングで発生する機会損失の削減をサポートします。
ノーコードかつ３ステップで簡単にセットアップでき、日本語に対応しています。
無制限で予約商品を登録および無制限で予約注文を受け付けることが可能です。

引用元: RuffRuff 予約販売

Tsun Inc.の小笠原です！
Shopifyアプリ開発をしていく中で、テーマ拡張機能を開発する際にLiquidを書くことがよくあります。
今回はLiquidを書く上でかかせない変数を扱う際に、変数の初期値を設定する方法をご紹介します。

対象読者

• Liquidに関する基礎的な知識がある方

Shopify Liquidの変数とは

Shopify Liquidではassignタグを使うことで変数を生成することができます。
変数の用途としては、他のプログラミング言語と同様です。
JavaScript経験者の方にはvarやletにあたるものと考えてもらうとわかりやすいと思います。

Liquidオブジェクトと同名の変数を生成した場合、上書きされてしまうので、Liquidオブジェクトと同名の変数は生成しないように気をつけましょう。

assignの基本的な使い方は公式のリファレンスを参照してください。 https://shopify.dev/docs/api/liquid/tags/assign

変数に初期値を設定するメリット

変数を扱う際に初期値を設定しなくても基本的に問題はありませんが、なにかしらの値が設定されていることが明確になることはコードを書く上でとてもメリットがあります。
例えば、LiquidオブジェクトやJSONのnullableな数値を扱いたい場合、値がnilでないことを確認した上で、比較をする必要がありますが、初期値を設定しておけば、nilでないことの確認が不要になり、コードをシンプルにすることができます。

変数に初期値を設定する方法

defaultフィルターを使います。
使い方はシンプルで、初期値を設定したい変数に対して、初期値と一緒にフィルターを使用するだけです。
empty、false、nilの値に対して初期値を設定することができます。 https://shopify.dev/docs/api/liquid/filters/default

文字列の初期値を設定する

defaultフィルターの基本的な使い方です。

{%- liquid
  assign your_message = your_json.message | default: 'default message'
-%}

数値の初期値を設定する

数値の初期値を設定する場合、強制的に数値型に変換させておくと安心です。
Liquidには数値型に変換するフィルターはありませんが、0を足すことで数値型に変換することが可能です。 (1をかける等でも同様)

{%- liquid
  assign your_price = your_json.price | default: 1000 | plus: 0
-%}

ブーリアンの初期値を設定する

ブーリアンの場合は注意が必要です。
defaultフィルターは変数がfalseの場合に初期値が設定される挙動のため、初期値をtrueに設定すると変数の値がfalseであっても必ずtrueになってしまいます。
そのため、初期値にtrueを設定する場合は、allow_falseオプションを設定します。
https://shopify.dev/docs/api/liquid/filters/default#default-allow_false

{%- liquid
  assign has_product = your_json.has_product | default: true, allow_false: true
-%}

まとめ

今回はShopifyのLiquidで変数に初期値を設定する方法とそのメリットをご紹介しました。
小ネタですが、Liquidを書いているときによく使うと思いますので、お役に立ったら嬉しいです。

クローズ

Tsun Inc.ではShopifyを使ったストア構築やアプリ開発を行っています。
もし、ストア構築やアプリ開発をしたい方は、Tsun Inc.へお問い合わせください。