アプリ内の倉庫？データベースについて学んでみよう！～ホテルマンでもできるバイブコーディング編 Vol.3～

前回、ホテリエちゃんは
「見た目（フロント）」と「動き（厨房）」を分けて考えることで、
Webアプリがどう動いているのかを体感しました。

しかし——
画面に表示された「予約完了！」の文字は、
あくまで“演出”でしかなかったのです。

💭 ホテリエちゃん
「マネージャー……
予約完了って表示は出るけど、
この予約って、どこにも残ってないですよね？」

🐾 コーギーマネージャー
「その通り。
今のアプリには“倉庫”がないんだ。」

💭 ホテリエちゃん
「倉庫……？」

🐾 コーギーマネージャー
「ホテルで言えば、
フロントで受けた予約情報を
帳票やシステムに保管しておく場所だね。

アプリの世界では、それをデータベースって呼ぶ。」

🏨 ホテルで例える「データベース」

🐾 コーギーマネージャー
「整理してみよう。

• フロント：画面（InputやButton）

• 厨房：ワークフロー（動き・処理）

• 倉庫：データベース（情報の保管場所）

今まで作ったのは、
“注文を受けて、料理を出す”ところまで。

でも——
食材を保管する冷蔵庫がなかったんだ。」

💭 ホテリエちゃん
「なるほど……
だから、画面を閉じたら何も残らない見せかけだけの予約完了だったんですね。」

🧩 Bubbleのデータベースをのぞいてみよう

🐾 コーギーマネージャー
「じゃあ、Bubbleの“倉庫”を見てみよう。」

Bubbleの左メニューから
Data → Data types を開く。

🐾
「ここで作るのが、倉庫の“棚”だ。」

💭 ホテリエちゃん
「棚？」

🐾
「うん。
たとえば“Reservation（予約）”という棚を作る。

その棚の中に——

• 名前（text）

• 日付（date）

みたいな**項目（フィールド）**を並べる。」

💭 ホテリエちゃん
「ホテルの予約台帳みたいですね……！Field typeって何ですか？」

🐾
「Field typeは入力する内容がテキスト（text）なのか、日付（date）なのかアプリケーションに理解してもらうことができるんだ」

🧠 データベースに“保存する”という考え方

🐾 コーギーマネージャー
「ここが大事なポイントだ。

さっき作ったワークフローは
“文字を表示する”だけだったよね？」

💭 ホテリエちゃん
「はい。」

🐾
「次はこう考える。

ボタンが押されたら → 倉庫に予約情報を保存する」

💭 ホテリエちゃん
「厨房が、倉庫に納品する感じですね。」

🐾
「いい例えだ。」

Bubbleでは
Create a new thing
というアクションを使う。

これは——
『新しい予約を1件、倉庫に追加する』
という意味なんだ。

💡 ホテリエちゃんの気づき

💭 ホテリエちゃん
「……あっ。ということは、

• 入力欄は“仮の情報”

• ワークフローで保存して

• 初めて“本当のデータ”になる

ってことですか？」

🐾 コーギーマネージャー
「その理解で完璧だ。」

💭
「今まで、
“画面に出ている＝データ”
だと思ってました……。」

🐾
「多くの人が、そこを勘違いする。

でもこの感覚が分かると、
どんなWebアプリも読み解けるようになる。」

🧠 Bubbleは「コードを書く前の思考訓練」

🐾 コーギーマネージャー
「ここまで来ると分かるだろう？

Bubbleは

• フロント

• 厨房

• 倉庫

を分解して考える練習装置なんだ。」

💭 ホテリエちゃん
「だから最初にBubbleなんですね……。」

🐾
「いきなりコードを書くと、
全部が一気に出てきて混乱する。

でもBubbleなら
構造だけを先に体に入れられる。」

💭 ホテリエちゃん
「……でも、マネージャー。

Bubbleでは箱やボタンで作ってますけど、
本当のコードでは
これってどう書かれてるんですか？」

🐾 コーギーマネージャー
「いい質問だ。」

🧭 次回予告

第4話

「Bubbleで見てきた仕組みは、コードではどう書かれているの？」

💬 ホテリエちゃん
「データベース、ワークフロー、画面構造……
これ全部、コードだとどう表現されるんだろう？」

🐾 コーギーマネージャー
「よし。
次は“Bubbleの裏側”を、コードの視点で覗いてみよう。」