アプリ内の厨房？Bubbleでアプリの“動く仕組み”を作ってみよう～ホテルマンでもできるバイブコーディング編 Vol.2～

💬 導入

前回、ホテリエちゃんは「Webアプリはホテルのようにフロント・厨房・倉庫でできている」と学びました。
今日はその“厨房”を自分の手で動かしてみようと、コーギーマネージャーに教わっています。

💭 ホテリエちゃん

「マネージャー、Bubbleを開いてみたんですけど……
画面がいっぱいあってどこから触ればいいのか、さっぱりです！
それにバイブコーディングするんじゃないんですか？」

🐾 コーギーマネージャー

「最初はそう感じるよ。でもBubbleは“アプリの考え方”を覚えるのに最高の教材なんだ。まずはバイブコーディングする前にBubbleでWebアプリケーションを動かすことを体験してもらいたいんだ。」

💭 ホテリエちゃん

「教材？Bubbleをアプリケーションの構造を理解するために使うってことですか？」

🐾 コーギーマネージャー

「うん。Bubbleはノーコードの練習台。
コードがなくても、アプリの仕組み──つまり“どう動くか”を体感できるんだ。」

🧩 Bubbleで作る“動くロジック”

🐾「じゃあ、まずは超簡単な予約システムを作ってみようか。」

🧠 ステップ1：デザイン（見た目）を作ってみよう

• ボタンを配置

• テキストを配置

• インプットを配置

「見た目のフロント」を作る段階です。

🧠 ステップ2：ワークフロー（動き）を作ってみよう

• ボタンが押されたら → 予約完了の文字が出てくるようにしてみよう

1.予約完了のメッセージを隠す

2.ボタンを押すと、予約完了のテキストが出てくるように設定しよう
左の鉛筆アイコンの下のアイコンをクリックするとワークフローを編集することができます。またボタンの編集タブのAdd Workflowで開くこともできます。

「厨房のレシピ」を書く段階です。
ボタンを押すことで厨房に注文が届くようになり、料理が出てくるようになるイメージです。

3.右上の▶ボタンでPreviewで試してみよう。

💭 ホテリエちゃん

「なるほど…！“見た目”と“動き”を分けて考えるんですね！」

🐾 コーギーマネージャー

「その通り。しかもBubbleでは、ボタンの動きを“ワークフロー”として視覚的に書ける。
つまり、“コードを書かずにコードを考える練習”ができるんだ。」

💭 ホテリエちゃん

「・・・でも、これって予約完了って出てますけど、、予約できてるんですか？」

🐾 コーギーマネージャー

「いいところに気付いたね。実は予約できていないんだ。データベースっていう倉庫がないと入力したデータを保存できないんだよ。次はちょっと難しいけどデータベースについて学んでみよう。」

🧭 次回予告

第3話：「アプリ内の倉庫？データベースについて学んでみよう！」
💬ホテリエちゃん：「Bubbleで“動く仕組み”ワークフローについてはわかったけど、コードってどんな風に書かれてるんだろう？」
🐾コーギーマネージャー：「よし、次はアプリ内の倉庫のデータベースについて学んでみよう！」