Bubbleで見てきた仕組みは、コードではどう書かれているの？～ホテルマンでもできるバイブコーディング編 Vol.4～
前書き
前回、ホテリエちゃんは
「データは画面にあるだけでは意味がなく、
倉庫（データベース）に保存されて初めて“本物”になる」
という感覚を掴みました。
正直、バイブコーディングよりもノーコードでじっくりアプリの仕組みを理解したいという方はここで一度立ち止まって、Bubbleを触って業務用アプリなどを作成し、運用してみることをお勧めします。
最低限理解して、早くバイブコーディングを始めたいという方は先に進んで、アプリ自体の仕組みがわからなくなってきたら、Bubbleに戻って自分の作りたいアプリの挙動を試作してみるのも良いと思います。
一番大切なのはBubbleをアプリの設計を学ぶ道具としてつかってみることですね！これほど実践的な教材であり、あわよくば本番運用も可能なツールはありませんね。
💭 ホテリエちゃん
「マネージャー……
Bubbleだと、ボタンをつなげたり、
Create a new thing を選ぶだけで動きましたよね。
でも、エンジニアさんが書いてる“コード”って、
あれを全部文字で書いてるってことですか？」
🐾 コーギーマネージャー
「そうだよ。
でも安心して。
考え方は、もう全部知ってる。」
💭
「えっ？」
🧠 Bubbleでやっていたことを分解してみよう
🐾 コーギーマネージャー
「まず、Bubbleで何をやってきたか整理しよう。」
画面に入力欄を置いた
ボタンを押した
データベースに保存した
保存したデータを表示した
🐾
「コードでも、やっていることは一字一句同じなんだ。」
💭 ホテリエちゃん
「同じ……？」
🏨 ホテル構造 × コードの対応表
🐾 コーギーマネージャー
「ホテルの例えで、コードに翻訳してみよう。」
フロント（画面）
→ HTML / 画面コンポーネント厨房（ワークフロー）
→ 処理の流れ（関数・イベント）倉庫（データベース）
→ DB・テーブル
🐾
「Bubbleは、
これを一枚の画面で見せてくれていただけなんだ。」
💭 ホテリエちゃん
「……つまり、Bubbleは
“全部見える厨房”だったんですね。」
🐾
「いい表現だ。」
🍳 『ボタンを押したら保存する』をコードで考える
🐾 コーギーマネージャー
「Bubbleでやったこれ、覚えてる？」
ボタンが押されたら → Create a new thing → 名前と日付を保存
🐾
「コードだと、頭の中ではこうなる。」
ボタンがクリックされた
入力された名前を取得
入力された日付を取得
データベースに1件追加
💭 ホテリエちゃん
「……あれ？もう“日本語”として理解できてます。」
🐾
「それが重要なんだ。コードを書く前に必要なのは、
処理を言葉で説明できることなんだよ。」
🧠 「書ける」と「分かる」は別物
💭 ホテリエちゃん
「でも、JavaScriptとかSQLとか、文法は全然知らないです……。」
🐾 コーギーマネージャー
「大丈夫。実務で困るのは、文法を知らないことより
何を書けばいいか分からないことだ。」
💭
「……たしかに。」
🐾
「Bubbleを触ってきた君は、もう違う。
どのタイミングで
何を取り出して
どこに保存するか
この設計図は、もう頭の中にある。」
💡 ホテリエちゃんの大きな気づき
💭 ホテリエちゃん
「……ということは。
Bubbleって
“ノーコードで楽をするツール”じゃなくて、
“アプリの設計を学ぶ道具”なんですね。」
🐾 コーギーマネージャー
「その通り。だから僕は、いきなりコードを書かせない。」
💭
「Bubbleでフロント・厨房・倉庫を体で覚えてから、コードに行く。」
🐾
「それが、一番遠回りに見えて、一番近道なんだ。」
🧠 なぜホテルマンに向いているのか
🐾 コーギーマネージャー
「ちなみに……
この考え方、誰に一番向いてると思う？」
💭 ホテリエちゃん
「……ホテルマン、ですか？」
🐾
「正解。
ホテルの仕事は常にこうだろ？」
受付で情報を受け取る
裏で処理する
記録を残す
次の人が使えるようにする
🐾
「Webアプリと、
構造がそっくりなんだ。」
💭
「だから、
スッと理解できたんですね……。」
🧭 次回予告
第5話
「じゃあ結局、バイブコーディングを始めるときに最初に覚える“コード”は何がいいの？」
💬 ホテリエちゃん
「仕組みは分かってきました。
でも……次に何を学べばいいんでしょう？」
🐾 コーギーマネージャー
「よし。
次は“バイブコーディング”に進む前に、
最低限知っておくべきコードの正体を教えよう。」
