「じゃあ結局、バイブコーディングを始めるときに最初に覚える“コード”は何がいいの？」～ホテルマンでもできるバイブコーディング編 Vol.5～
第4話で、ホテリエちゃんは気づきました。
Bubbleでやってきたことは、
すでに“アプリ設計そのもの”だったということに。
でも——
次の疑問が、自然と浮かんできます。
💭 ホテリエちゃん
「仕組みは、だいぶ分かってきました。
でもマネージャー……
世の中には
JavaScript、SQL、HTML、CSS……
いっぱいありすぎませんか？
結局、何から覚えればいいんですか？」
🐾 コーギーマネージャー
「いい質問だ。
そして、ほとんどの人がここで迷子になる。」
💭
「やっぱり……。」
🧭 「全部やらなきゃ」は、やらない理由になる
🐾 コーギーマネージャー
「先に結論を言おう。
全部覚える必要はない。」
💭 ホテリエちゃん
「えっ？」
🐾
「正確に言うと、
役割ごとに、最低限でいい。」
🏨 ホテル構造で整理する「3つのコード」
🐾 コーギーマネージャー
「Bubbleで使ってきた
“フロント・厨房・倉庫”で整理しよう。」
🧱 フロントの言語：HTML / CSS
🐾
「これは“画面の骨組みと見た目”。
どこに入力欄があるか
ボタンはどこか
文字は何色か
ホテルで言えば、
フロントカウンターの形や案内表示だ。」
💭 ホテリエちゃん
「これは……
見た目担当ですね。」
🐾
「そう。動きはしない。
でも、無いと始まらない。」
🍳 厨房の言語：JavaScript
🐾
「次が、一番大事。」
💭 ホテリエちゃん
「厨房……。」
🐾
「ボタンが押されたら何をするか
入力された値をどう扱うか
保存するか、表示するか」
🐾
「これを指示するのが、JavaScriptだ。」
💭
「Bubbleのワークフロー……！」
🐾
「そのまま置き換えていい。
Event（ボタンが押された）
処理（値を取る）
分岐（条件判断）
全部、厨房の仕事だ。」
🧊 倉庫の言語：SQL
※正確には “データ操作専用の宣言型言語”
🐾
「最後が、倉庫。」
💭 ホテリエちゃん
「データベースですね。」
🐾
「SQLは、倉庫番に話しかける言葉だ。」
この予約を入れて
今日の予約を全部出して
この人の予約だけ見せて
🐾
「Bubbleの
Create a new thing
Search for things
は、全部SQLの役割だ。アプリとして体裁を為すために必要なデータベースを構成することをAIに伝えるために学習した方が良い言語なんだ。」
💭
「……なるほど。少し理解できた気がします。」
🧠 重要なのは「順番」
💭 ホテリエちゃん
「じゃあ、
HTML → JavaScript → SQL
の順で勉強するんですか？」
🐾 コーギーマネージャー
「いいや。」
💭
「えっ？」
🐾
「JavaScript → SQL → HTMLだ。」
🎯 なぜ“厨房”からなのか
🐾 コーギーマネージャー
「理由はシンプル。
アプリの価値は
動くことだからだ。」
💭 ホテリエちゃん
「確かに……
見た目が綺麗でも、
予約できなきゃ意味ないですね。」
🐾
「その通り。
だから最初は——
ボタンが押された
データを取った
保存した
この流れが分かればいい。」
💡 ホテリエちゃん、核心に触れる
💭 ホテリエちゃん
「……じゃあ、
バイブコーディングって、
“雰囲気でコードを書く”んじゃなくて、
Bubbleで理解した処理を、
言語に翻訳する作業なんですね。」
🐾 コーギーマネージャー
「その理解は、もう初心者じゃない。」
💭
「いきなり真っ白なエディタを見るから怖かっただけで……」
🐾
「君はもう、何を書きたいか分かっている。」
🧠 ホテルマンが強い理由
🐾 コーギーマネージャー
「最後に、これだけ覚えておいて。」
フロントで情報を受ける
裏で処理する
記録を残す
次の人が使えるようにする
🐾
「これを毎日やっている人間が、アプリを理解できないわけがないよ。」
💭 ホテリエちゃん
「……私、“向いてない”って思ってました。」
🐾
「向いてるかどうかじゃないよ。もう、やってきたじゃないか。」
🧭 次回予告
第6話
「バイブコーディング実践！Antigravityで“現場アプリ”を一気に作ってみよう」
💬 ホテリエちゃん
「じゃあ次は……
本当に、コードを書いてみるんですね。」
🐾 コーギーマネージャー
「安心してね。Bubbleでやった“あれ”を、そのまま文字にするだけだよ。
普段はCodex CLIを使うんだけど、見た目がかなりわかりやすいAntigravityでやっていこう。」
