Bubble入門：データ・ページ・ワークフローの関係を小さな例で理解する

3つの要素を一言で言うと

Bubble の公式マニュアルでは、データベースは「データタイプ」と「フィールド」で組み立てられると説明されています。データタイプは「何を保存するか(ユーザー、商品、記事など)」、フィールドは「その中の個別の情報(名前、価格、公開日など)」です。そして、保存された1件1件の記録を「thing」と呼びます(Data types and fields)。

ワークフローは、きっかけとなる「イベント」と、その後に順番に実行される「アクション」の組です。マニュアルの例では、登録ボタンが押されたら、ユーザー登録・メール送信・別ページへの移動を行う、という形で説明されています(Workflows)。

ページは、ボタンや入力欄、一覧表示といった「見えるもの(エレメント)」を置く場所です。ワークフローはどのエレメントの操作で動くのかを指定して作ります。

Excelに例えるなら、データタイプは「表の種類」、フィールドは「列」、thingは「行」です。ワークフローは「ボタンを押したら行を追加するマクロ」、ページは「入力フォームと表の見た目」にあたります。完全に同じではありませんが、最初の理解にはこれで十分です。

メモ登録アプリの対応図

説明用の例として、次の構成を考えます。

• データタイプ:Memo
• フィールド:title(text)、body(text)
• ページ:タイトル入力欄、本文入力欄、「保存」ボタン、メモ一覧(Repeating group)

【ページ】                          【ワークフロー】                   【データ】
タイトル入力欄 ─┐
                ├─(値を参照)─┐
本文入力欄   ───┘            │
                              ▼
「保存」ボタン ──クリック──▶ イベント:Button 保存 is clicked
                              │
                              ▼
                      アクション:Create a new thing
                      (type = Memo)
                        title = タイトル入力欄の値 ──────▶ Memo の title
                        body  = 本文入力欄の値  ────────▶ Memo の body
                                                           (1件の thing が増える)
                                                                │
メモ一覧(Repeating group)                                      │
 Type of content = Memo  ◀──── Data source: Do a search for Memos ┘
 各行:Current cell's Memo の title / body を表示

流れは次の3段です。

1. きっかけ(ページ → ワークフロー):保存ボタンのクリックがイベントになります。
2. 書き込み(ワークフロー → データ):「Create a new thing」が Memo の新しい1件を作ります。マニュアルでは、このアクションは「特定のデータタイプの新しい記録を作り、任意でフィールドに情報を保存する」と説明され、フィールドの値は入力エレメントの値を参照して入れられます(Creating, saving and deleting data)。
3. 読み出し(データ → ページ):Repeating group は「Type of content」で表示するデータタイプを決め、「Data source」で表示する一覧の取得元を決めます。取得元には Do a search for の検索結果などを使えます(Repeating group element)。各行の中では Current cell's で、その行のメモを参照します(Displaying data)。

ポイントは、ワークフローは書く側、Repeating group は読む側で、両者は直接つながっておらず、データベースを介して間接的につながっていることです。

用語の読み替え表

英語UIの用語を、初心者向けに日常語へ置き換えた表です。右端の列は、メモアプリでの具体例です(読み替えは編集上の説明で、公式の定義そのものではありません)。

• Data type、読み替え：保存する物の種類、メモアプリでの例：Memo
• Field、読み替え：項目(列)、メモアプリでの例：title、body
• Thing、読み替え：保存された1件、メモアプリでの例：「買い物リスト」というメモ1件
• Element、読み替え：画面の部品、メモアプリでの例：入力欄、ボタン、一覧
• Event、読み替え：動き出すきっかけ、メモアプリでの例：保存ボタンがクリックされた
• Action、読み替え：きっかけの後にする作業、メモアプリでの例：Create a new thing
• Dynamic expression、読み替え：その場で値を取ってくる式、メモアプリでの例：タイトル入力欄の値
• Type of content、読み替え：一覧に出す物の種類、メモアプリでの例：Memo
• Data source、読み替え：一覧の取得元、メモアプリでの例：Do a search for Memos
• Current cell's、読み替え：今処理中の行の、メモアプリでの例：その行の title

自動で付くフィールドもあります。公式には、すべてのデータタイプに Unique ID、Date created、Date modified、Slug が最初から備わるとされています。Memo に「作成日時」の列を自分で作る必要はありません。

「どこを直すか」の判断表

実際に作り始めると、「動かない」ときにどの要素を疑うかで迷います。この表で当たりを付けられます。

• ボタンを押しても何も起きない、まず疑う要素：ワークフロー、確認すること：そのボタンをイベントにしたワークフローがあるか。条件(only when)が付いていないか
• 保存されるが、タイトルが空になる、まず疑う要素：ワークフローの参照、確認すること：title に入れる値が、正しい入力欄の値になっているか
• 保存されているはずなのに一覧に出ない、まず疑う要素：ページ(一覧)、確認すること：Type of content が Memo か。Data source が設定されているか
• 一覧に別の物が出る、型が合わないと言われる、まず疑う要素：ページ(一覧)、確認すること：Type of content と Data source の型が一致しているか
• 項目を増やしたい(例:期限日)、まず疑う要素：データ、確認すること：Memo にフィールドを追加し、入力欄とワークフローにも反映したか

Repeating group は、元データが変わると一覧が自動で更新されます(Repeating group element)。データベース側に1件増えているかどうかは、エディタの Data タブにある App data で確認できます(Data tab)。

AIに設計を点検させる依頼文

AIは、構成の抜け漏れチェックには使えます。ただし、AIが書く操作手順は Bubble の画面更新とずれることがあるので、最終確認は自分のエディタで行ってください。個人情報や社内の実データは入れず、説明用の項目名だけで頼みます。

Bubbleでメモ登録アプリを作ります。次の設計に、
データ・ページ・ワークフローの対応で抜けや矛盾がないか点検してください。

- データタイプ:Memo(title: text, body: text)
- ページ:タイトル入力欄、本文入力欄、保存ボタン、
  Repeating group(Type of content = Memo)
- ワークフロー:保存ボタンがクリックされたら
  Create a new thing(Memo)で title と body を保存

知りたいこと:
1. 各要素が何を担当しているか、初心者向けの言葉で
2. 「期限日」を足すとき、変更が必要な箇所の一覧
3. 動かないときの確認順序

注意:Bubbleの現在の画面名が自信のない箇所は、
「要確認」と書いてください。

返ってきた答えは、次の観点で人が確かめます。

• データタイプやフィールドの名前が、自分の設計と一致しているか
• 「期限日」追加で、データ・入力欄・ワークフロー・一覧の4か所が挙がっているか
• 画面名やボタン名が、手元のエディタに実在するか

自分のアプリに当てはめる

メモ以外のアプリでも、次の3行を埋めれば同じ形で整理できます。

1. 保存したい物は何か(データタイプ)と、その項目は何か(フィールド)
2. 利用者がどの操作で保存するか(ページの部品と、イベント)
3. 保存した物をどこでどう見せるか(Type of content と Data source)

この3行が書ければ、画面の作り込みに入る前に、全体の見取り図が手元にできます。まずは Memo 1つ、フィールド2つの小さな構成で試し、データタブで1件増える様子を確かめるところから始めてください。

確認した範囲

この記事は2026年10月27日時点で公開されていた Bubble の公式マニュアルの記述を確認してまとめています。画面の名称やアクションの位置はアップデートで変わる可能性があります。また、掲載した構成は説明用の例で、実際の動作確認は行っていません。