【 Bubble】Custom Stateの概要と使い方

# はじめに
BubbleではエレメントにCustom Stateという一時的な変数の入れ物を、エレメントに設定することができます。Custom Stateを利用することで、アプリケーションの実装の幅がより広がります。本記事ではCustom Stateの概要と簡単な使い方を紹介します。

# 目次
[１．Custom Stateとは](#１custom-stateとは)
[２．Custome Stateを使う際の注意点](#２custome-stateを使う際の注意点)
[３．Custom Stateの使い方](#３custom-stateの使い方)
[４．Custom Stateの謎（誰か教えてください）](#３custom-stateの謎誰か教えてください)
[４．おわりに](#５おわりに)

# 参照サイト
主に以下のBubble公式サイトを参照しつつ、実際に使用してみた私の所感を追記しています。

https://manual.bubble.io/help-guides/data/temporary-data/custom-states

# １．Custom Stateとは
Custom Stateとは、ページ内のエレメントやページ自体に保存できる変数のことです。Custom Stateには一時的な値（データ）を保存することができ、ページがリロードされると値はリセットされます。
そのため、データベースへの保存は不要だが、一時的に保持したい値がある場合に便利な機能となっています。

その他Custom Stateの特徴をまとめると以下の通りです。
- Custom Stateの値はページがリロードされるまでの間のみ保持され、リロードされるとデフォルト値に戻ります
- Custome Stateの値はユーザーからは確認出来ませんが、必要な場合、動的な式内で確認することができます（英語の訳し方が分かりませんでしたが、少し詳しい人が見ようと思えば見れるということだと思います）
- Custom Stateはクライアント側に保存されるため、データベースへの読み書きよりも高速な処理が可能です
- テキストや数値、日付などの基本的なデータ型に加え、カスタムデータ型やリストを保持することも可能です
- Custome Stateはエレメントに紐づけられ、必要な数だけいくつでも設定することが可能です。また、ページ自体にCustome Stateを作成することも可能です

# ２．Custome Stateを使う際の注意点
:::note warn
上述の内容とも重複しますが、Custome Stateの値は確認しようと思えばユーザーからも確認できてしまうため、センシティブなデータ（個人情報やセキュリティに関わる情報など）は保存しないようにと、Bubble公式サイトにて注意が促されています。
:::
![Screenshot 2025-01-23 at 20.28.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3975001/5b88fbcd-14e7-d9d6-90c9-b09e5dfa0eec.png)

# ３．Custom Stateの使い方
以下より、Custom Stateの使い方を簡単に紹介します。今回は、ボタンを押すことで日付の表示が切り替わる仕組みを作成します。

## 前提
日付を表示するために、以下のようにエレメントを配置しています。エレメントの構造は画像内左のエレメントツリーを参照ください。
エレメントの配置に大きな意味はないため、日付を表示するTextエレメントと何らかのクリック可能なエレメントが２つ配置されていれば問題ありません。
![Screenshot 2025-01-23 at 21.02.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3975001/2cbc60f8-4172-8b4b-032a-ec90aa07eb6d.png)


## ①Cutom Stateの設定
今回はTextエレメントにCustom Stateを設定します。（Textエレメントが入っているGroupエレメントやページ自体に設定しても問題ありません）
Textエレメントを選択し、右上のinspectorマークをクリックし、[Add a new custom state]を選択します。
![Screenshot 2025-01-23 at 21.03.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3975001/f44c161f-94fd-b464-d54f-7701fbb82887.png)


[State name]に、今回は、「flexible date」と入力します。[State type]で「date」を選択したのちに、[CREATE]をクリックします。
![Screenshot 2025-01-23 at 20.44.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3975001/a21b81ce-4b37-7119-0732-d8ea845ec8c6.png)

[CREATE]をクリックすると、以下の画像の通り[Default value]という入力欄が表示されますが、ここでは動的に値を設定することができないため、ここは空欄のままにします。（次の手順で、デフォルト値には本日の日付が設定できるようにします。）
![Screenshot 2025-01-23 at 21.04.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3975001/56d68acf-7c56-3818-b46d-9aadf0f49aeb.png)

## ②ページ読み込み時にCustom Stateに値が設定されるようイベントを作成する
Workflow画面に移動し、[Page is loaded]を選択して、画面が読み込まれた際のイベントを作成します。
![Screenshot 2025-01-23 at 20.49.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3975001/4ac98207-bec9-c3d4-6fd8-6059d2ea8e73.png)

作成されたイベントで、[Element Actions]を選択し、[Set state]を選択します。
![Screenshot 2025-01-23 at 20.51.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3975001/c9ad598e-1d16-17e3-af3b-bcbc05677db1.png)

表示されたポップアップ内の[Element]でCustom Stateを設定したエレメント（今回はTextエレメント）を選択し、[Custom state]で「flexible date」を選択します。
![Screenshot 2025-01-23 at 21.05.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3975001/4c32236a-a819-5699-4f1b-9b86e101893a.png)


また、[Value]には、動的な値として以下の式を入力します。
```
Current date/time
```
![Screenshot 2025-01-23 at 21.06.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3975001/485bb691-d72f-632b-6d83-e886ab740516.png)

## ③Custom Stateの値をTextエレメントで表示する
Design画面に戻り、Textエレメントをクリックして、Custome Stateの値が表示できるように以下の式を入力します。（冒頭のエレメント名は、Custom Stateを設定しているエレメントを選択ください）
```
Text date's flexble date:formated as m月d日
```
![Screenshot 2025-01-23 at 21.09.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3975001/c8ca829a-ab2f-6564-c023-22191e202845.png)

ここでプレビューを確認すると、以下の画像のように本日の日付が表示されます。
![Screenshot 2025-01-23 at 21.22.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3975001/15387250-d083-e966-2382-9ab6adfb59bf.png)

## ④Custom Stateを更新するイベントを作成する
日付を１つ戻す際に押すエレメント（今回はIconエレメント）を右クリックし、「Start/Edit workflow」を選択します。
![Screenshot 2025-01-23 at 21.26.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3975001/5e7f8922-533d-3672-a5b2-c01195f4a3e7.png)

アクション欄で[Element Actions]を選択し、[Set state]を選択します。
![Screenshot 2025-01-23 at 21.28.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3975001/073c7d78-8449-df8a-e3ef-e21b8870d058.png)

②と同様の手順で、[Element]及び[Custom State]を選択します。
![Screenshot 2025-01-23 at 21.31.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3975001/b4ceece2-1786-1b49-1b5c-fc174e416a01.png)

[Value]に以下の式を入力します。
```
Text date's flexble date+ days:-1
```
![Screenshot 2025-01-23 at 21.33.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3975001/a7038d0b-bced-b094-2ed4-9f8b6086a40c.png)

同様の手順で、日付を１つ進める際に押すエレメントにもイベントを設定し、[Value]に以下の式を入力します。
```
Text date's flexble date+ days:1
```
![Screenshot 2025-01-23 at 21.35.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3975001/f007161f-65ec-c56f-f5e7-de2d32c645cc.png)

# 完成イメージ
以上の操作を完了しプレビューを表示すると、アイコンをクリックすることでCustome Stateの値が更新され、日付を変更することができます。
![Screenshot 2025-01-23 at 21.40.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3975001/20999a37-ca20-df8a-e49e-2c8ac3d42e35.png)
![Screenshot 2025-01-23 at 21.40.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3975001/1a4f33b1-a7db-570b-8ace-553c49852ea7.png)
※画像のためイメージが伝わりづらくすみません

# ３．Custom Stateの謎（誰か教えてください）
ここからは余談になりますが、Cutom Stateはリストも扱うことが可能ですが、オブジェクトのリストを扱うことはできないように思われます。
オブジェクトのリストの作成は可能かもしれませんが、リストの中の特定のオブジェクトの特定の変数を更新するというような処理が、デフォルトでは用意されていない気がしており、解決方法をご存知の方がいたら教えていただきたいです。
（現状はデータベースを直接更新していく方法しかないのかなと思っています）

# ５．おわりに
本記事の不明点や誤っている箇所、他の解説リクエストなどありましたらコメント頂けますと幸いです。