HubSpot カスタムモジュールで、ブール値と IF分(+UNLESS文)を使用してみた

HubSpotでページを編集していると、ページ編集画面の左側に
コンテンツタブスタイルタブが表示されていますよね。
ユーザーが入力するテキストや画像、チェックボックスなんかを設定できる場所です。

今回は、ジュールフィールドの中でシンプルだけど高頻度で使用される、
ブール値フィールドIF文(とおまけにUNLESS文 を試してみました!

🧩 ブール値とは?

カスタムモジュールでブール値フィールドを追加すると、コンテンツタブにチェックボックスとして表示されます。
ユーザーがチェックを入れるかどうかで、値が true または false になります。

では、これをHubLでどう使うか見てみましょう。

👀サンプル:ifunless の使い方

IF文の基本の書き方は、{% if 条件文 %}条件を満たした際のコンテンツ{% endif %} です。
 {% endif %}は、終わりの印なので忘れないようにします。

{% if module.checkbox == 'true' %}
1)チェックされてる時だけ表示 ✅
{% endif %}

ページ編集画面でチェックしていると、中に表示されている文言が表示されます。
HubSpotでは 'true''false'文字列として扱われるため、クォーテーションで囲む必要があります。

{% if module.checkbox == 'false' %}
2)チェックされてない時だけ表示 ❌
{% endif %}

ページ編集でチェックしていると、中に表示されている文言が表示されなくなりました。
チェックボックスを空にすると、中に設定した文言が表示されるようになります。

{% if module.checkbox %}
3)チェックされてたら表示 ✅
{% endif %}

デフォルト値はtrueなので、ページ編集でチェックしていると 中に表示されている文言が表示されます。

{% if module.checkbox == 't' %}
4)非推奨:チェックされてたら表示 ✅
{% endif %}

前述の通り、デフォルト値はtrueなので、
ページ編集でチェックしていると 中に表示されている文言が表示されますが
どんなツールでも正しくコードを書くのがベストプラクティスだと思います。

{% unless module.checkbox %}
5)チェックされてない時だけ表示 ❌
{% endunless %}

逆に 特定の場合だけ除外する場合、UNLESS文を使用して除外条件を指定する方が便利です!

📌 今日のメモ

ブール値がチェックされた状態は"true"、チェックが外された状態は"false" を指定します。
また、デフォルトのブール値は true
 falseを指定しない限りはチェックされていることが前提になるので、スペルミスに気を付ける。

▍テスト時に、チェックをしているとき
Screenshot 2025-05-11 at 21.05.29

▍テスト時に、チェックを外しているとき
Screenshot 2025-05-11 at 21.07.57

📣  次回予告

次回は、スタイルタブでユーザーがページ編集画面で 色などのデザインを調整できるようにする方法を紹介予定です✨