【現場で使える Bubble #6】ローコードでも変数を持ちたい！ Custom state の実践的な使い方
こんにちは、もふすけと申します
皆さん "Custom state" 機能ってご存知ですか？あまり目立たない所にあるのですが。。
今回は以下、ひっそりと存在していた機能…
.png)
.png)
.png)
...この隠された機能 “Custom state” について、紹介いたします。
また、今回も「現場で使える」という題の通り、ある程度 Bubble に慣れた人向けの内容にはなります。
基本的な内容は省きつつ紹介いたしますのでご注意ください。
この記事で必要な前知識
- 【Bubble 入門 #5】はじめてのデータベース！Bubble ではどう使う？
- 【Bubble 入門 #6】Repeating Group でデータベースの中身を繰り返し表示しよう！
- 【Bubble 入門 #7】はじめての Workflow ♪ データの新規登録／削除機能を簡単に実装しよう
state とは "状態" という意味ですが、
Bubble では既に色んな ”状態保持” の仕組みが搭載されている状況、という事は皆さんもご存知だと思います。
- エレメントごとの Data source
- エレメントごとの visible 状態
- Input ごとの値
- Database
そんな中で、上記以外の手段で状態を保持したいとなった時に “Custom state” の出番となります。
プログラミング経験者の皆さんであれば 自由に扱える”変数” というものをご存知かと思いますが、意味的にはそれと大変近く、ゆえに汎用性も高い機能ということになります。
（汎用性が高いということは「使わなくてもいいのに使いまくる」と収拾がつかなくなりやすい、という性質がありますので、乱用は控える意識を持っておきましょう。）
無数に用途がある中で、この記事では２つだけ、活用例を紹介いたします。
もくじ
- 計算状態の保持のために使う Custom state
- Repeating Group のチェックボックスのために使う Custom state
- 最後に
1. 計算状態の保持のために使うCustom state
サンプルとして、BMIの測定器を作ってみます。デスクワークこそ健康第一ですので。
では手始めに、あっさりとフォームの見た目だけを作ります。
.png)
ここで１つ、
以上のようなフォームがあった時『「計算」ボタンの中では何をすればいいか』を考えてみてください…。
(こういう時、手を動かす前に出来るだけ具体的にプロセスを想像すると、実装力がよく鍛えられます)
...。
まず考えられるのは、
“Custom state (=変数)”を用意して、そこに計算結果を代入する
だと思います。
まずはこれを実践してみましょう。
.png)
.png)
.png)
Custom stateが出来たので、代入アクションをワークフローに記述していきます
.png)
.png)
さて、BMIを出すわけなので、数値ごとにランク付けし「25未満なら健康！」といった評価をしてあげないといけません。
こういう時、本当は Option sets で定数データを作成して対応する所ですが、
今回は即席という事で、ラベルを１つ用意し、その中の Conditional で全て表現するようにしましょう。
.png)
これにてBMI計算機（最小構成）は完成！
まずは１つ目の使い道、「計算結果を保持するため」に使うパターンでした。
もし余力があれば「適正体重」も計算したり、拡張してみてください。
2. Repeating Group のチェックボックスのために使う Custom state
「１行ごとにチェックボックスがあるリスト」を Bubble で作ろうとすると、恐らく否応なしに Custom state を使う事になります。
これは結構「知らないと出来ないようなやり方」で、なおかつ独特なやり方にはなるのですが、Bubble でアプリを作るにあたって結構必要になるテクニックです。
困った時に読んで頂いても良いのですが、念の為頭に入れておくと実力になるかと思います。....
...
まず、前項で作成したBMI計算ツールを改造し、「計算ログを保存する」という機能を追加します。
とりいそぎ保存場所が欲しいので Data type ”BMI Calculated Log” を作成します (DBの取り扱いについてはこちら記事をご参照ください)
.png)
BMIの「計算」ボタンを押すたびに、この Data type に Thing を保存するように保存アクションを追加します。
.png)
次に、画面上に Repeating Group を置いて、保存された履歴を表示しましょう。
.png)
履歴を保存する仕組みは出来上がりました。
ここで、１つ新しい課題として
「各行にチェックボックスを置き、チェックした履歴を一括削除できる仕組みを作ってほしい」
という要望を受けたとしましょう。
まずは、UIの追加です。
- Repeating Group の中にチェックボックスを配置（これは各行に生成される）
- Repeating Group の外側に「一括削除」ボタンを配置
を行います。
.png)
このとき、「一括削除」ボタンを押した時のワークフローで、何をすれば各行のチェック状態をまとめて取得できるでしょうか？
良い機会ですので、少し考えてみてください！
…
答え合わせです。
現実的な手段としては
「Pluginを駆使してループ処理を行う」か
「Custom state で "各行のチェック状態" を ”Repeating Group の外側に” 保持しておく」かのどちらかになると思います。
どちらもメリット・デメリットがありますが、
前者「ループ処理を行う」は特に裏側の処理を理解していないと危険な方法...というのが正直な所ですので、今回は後者「custom stateを使うやり方」で進めます。
まず、”Repeating Group の外側に” Custom stateを作成します
.png)
.png)
“selected_logs” という名前の Custom state が出来ました。
この時、"This state is a list" チェックを入れて複数格納できるようにしてくださいね！
そして各チェックボックスの「チェック状態が変化するたび」イベントを２つ用意し、
１つはチェック状態になったときにその Custom state に自身の行の ”log” thing を追加する処理、
もう１つは、チェックが外れた際に削除する処理を実装します。
.png)
.png)
これで
Custom state “selected_logs” には常にチェックされた行の “BMI Calculated Log” thingが全て格納される仕組みになりました。
あとは「削除」ボタン押下時に Delete a list アクションを実行すれば完成です！
.png)
以上です！
3. 最後に
ローコードでも "ある程度の規模" や "複雑な実装" を取り扱おうとすると、コードで組む以上に難しいテクニックが要求される事になります。Custom state はその導入となる機能であり、自由度が一気に広がりますので、使い方に気をつけなければなりません。
しかしながら、ローコードは通常のコーディングよりも"実装上の制限"が明確なので「構造化をある程度強要される環境でのプログラミング」と捉える事ができます。ですので、設計力さえ伴っていれば、スパゲッティなプロセスになりづらい（きれいな状態を保てる）というメリットも大きくあります。
ちょっと脱線してしまいましたが、ローコードでもコーディングでも、結局は”設計力”が品質に大きな影響を与えます。
これについては「【現場で使える Bubble #3】共通化の心構えと実践」で少し詳しく語ってますので、良ければご参照ください。
今回は「計算結果の保持」「 Repeating Group の状態管理 」の２つだけを紹介しましたが、
「Reusable Element の内部から外側に”状況を伝達するため”に使う Custom state」というのも、主な使い道です。これについては長くなるのでまた機会があれば。
ブログだけで発信できる技術内容には限りがありますので、もし派生的なローコードの活用方法に興味があれば弊社にお越しください！
ではまた！
この記事を書いた人
もふすけ (阿部)
かつて薄暗い部屋でGPUとお話する鬱々とした日々を送り、なんやかんやあって社会に揉まれ続け、「まぁまぁ天職かな〜」とか言いながらBiz Freakという船でテックリードをやってるオタクくん。犬派。
