【イラスト付き】ホテル業と同じ!? Webアプリの「裏と表」を知ろう～ホテルマンでもできるバイブコーディング編 Vol.1～
― ホテリエちゃんのバイブコーディング入門記 ―
💬 導入
ある日の午後。
ホテリエちゃんは、ホテルのDXチームのミーティング後にコーギーマネージャーへ話しかけました。
💭 ホテリエちゃん
「ねえマネージャー、AIと一緒に“バイブコーディング”っていうのを始めてみたいんですけど……」
🐾 コーギーマネージャー
「お、ついに興味が出てきたね。いいじゃないか！」
💭 ホテリエちゃん
「でも、そもそもWebアプリって“どう動いてるか”が全然わからなくて…。
Bubbleでページは作れるけど、裏で何が起きてるのかイメージできないんです。」
🐾 コーギーマネージャー
「なるほどね。じゃあ今日は、“ホテルの仕事”にたとえて説明しようか。」
🍽️ ホテル業で考える「Webアプリの三層構造」
🐾「Webアプリって、ホテルの仕組みとそっくりなんだよ。」
ホテルでの役割Webアプリでの役割例
フロント（接客）
→フロントエンド（画面・ボタン・フォームなど）
厨房（調理場）
→バックエンド（データ処理や計算）
倉庫（在庫管理）
→データベース（DB）（情報を保存する場所）
💭 ホテリエちゃん
「わ！ たしかに“フロント”が見える部分で、“厨房”が裏側ですね！」
🐾 コーギーマネージャー
「そうそう。
お客様（＝ユーザー）はフロントで注文するだけ。
でも、厨房がなければ料理は出せない。
そして、倉庫に材料（＝データ）がないと、そもそも作れない。」
💭 ホテリエちゃん
「ってことは、アプリも“見える部分だけ”を作っても動かないんですね。」
🐾 コーギーマネージャー
「その通り。
Webアプリを作るってことは、**フロント（画面）＋厨房（処理）＋倉庫（データ）**を組み合わせることなんだ。」
🌐 「URL」と「HTTP」はホテルの住所と注文票
🐾「ついでにもうひとつ、通信の仕組みもホテルで例えるとわかりやすいよ。」
URL
→Web上の住所→ホテルの所在地
HTTPリクエスト
→「データください」「送ります」などのやり取り
→ルームサービスの注文票
レスポンス
→サーバーからの返信→届いた料理
💭 ホテリエちゃん
「へぇ…！ つまり、アプリが動くたびに“厨房への注文”が飛んでるんですね！」
🐾 コーギーマネージャー
「そう。“押した瞬間に画面が動く”裏では、
ちゃんと注文票（リクエスト）が飛んで、厨房（サーバー）が作業して、料理（レスポンス）が返ってくるんだ。」
💡 今日の学びまとめ
学んだこと内容
✅ Webアプリは「フロント＋バック＋DB」で成り立っているホテルでいうと「フロント・厨房・倉庫」
✅ URLやHTTPは注文票のような通信の仕組みボタンを押すたびに“やり取り”が行われている
✅ バイブコーディングではこの構造をAIに説明できることが大切「どう動かしたいか」を伝える練習が第一歩
🧭 次回予告
第2話：「Bubbleで“動く仕組み”を作ろう！」
💬ホテリエちゃん：「これが動くアプリの正体なんですね！
でも、コードが書けない私に作れるんですか？」
🐾コーギーマネージャー：「大丈夫。ノーコードのBubbleなら、
頭の中の“厨房”をドラッグ＆ドロップで作れるんだよ。
