🚀 動画内のオリジナル資料とガイド
公式サイト: http://www.dapanda.club
関連コード・資料: サイト内のSTUDYセクションで共有しています
━━━━━━━━━━━━━━━━━━━━━━
バイブコーディングは、AIにコードを代わりに書いてもらうスタイルです。便利な反面、落とし穴も多くあります。
AIがつくったコードが「どこで実行され、何を信じてはいけないのか」を私たちが知らないと、
そこに潜むセキュリティホールやコスト爆弾をそのまま抱え込むことになります。
シークレットキーが画面にそのまま埋め込まれていたり、知らないうちに費用が積み上がっていても、
「コードはちゃんと動くし、見た目もきれいだ」で済ませてしまうのです。
そこで今日は、フロントエンドとバックエンドの「境界」を押さえます。
この概念さえ押さえておけば、AIにより正確な指示が出せるようになり、より大きなリスクを事前にふるい落とせます。
━━━━━━━━━━━━━━━━━━━━━━
📌 この動画で扱う内容
✔️ フロント/バックエンドを分ける本当の基準 — 「見えるか見えないか」ではなく「制御・信頼できるか」
✔️ よくある二分法の落とし穴と、境界で起きる3大リスク（APIキー漏えい · 権限バイパス · 隠れコスト）
✔️ 境界を分ける3つの視点（制御権の主体 · 再検証のタイミング · 物理的な防衛線）
✔️ 実戦の4レイヤー（フロントエンド → エッジ/サーバーレス → BaaS+ミドルウェア → バックエンド）
✔️ BaaS（Supabase・Firebase）とは何か、何を借りて使うのか
✔️ データプレーン vs コントロールプレーン、そしてバイブコーディングの標準「ハイブリッドアーキテクチャ」
✔️ Node.js・Pythonを「なぜ」インストールしなければならないのか
🧠 一行まとめ
フロントとバックエンドは「見えるか見えないか」ではなく「制御・信頼できるか」で分かれ、
すべての事故はその境界で起きます — だからBaaSで借りて使い、判断が必要なところだけ自分で制御します。
⏱ タイムスタンプ
00:00 イントロ — バイブコーディングの落とし穴（セキュリティホール・コスト爆弾）、なぜ境界を知るべきか
01:44 よくある定義：「見えるもの vs 見えないもの」
02:22 二分法の落とし穴 — 事故は枠の中ではなく「境界」で起きる（APIキー・権限・隠れコスト）
04:22 境界を分ける3つの視点（制御権の主体 · 再検証のタイミング · 物理的な防衛線）
06:33 補完された定義 — 制御可能性 × 信頼可能性
07:55 実戦4レイヤー ① フロントエンド（信頼できない最前線）
08:44 ② エッジ・サーバーレス（不要なトラフィックをふるい落とす門番）
09:14 ③ BaaS + ミドルウェア（標準の統制区域 · 再検証が働く場所）
09:54 ④ バックエンド（Python・重い計算・AIモデル推論）
10:56 BaaSとは？「倉庫」のたとえ — 認証・DB・ストレージ・リアルタイム同期・セキュリティルール
15:22 1枚でわかるまとめ表 + Node.js・Pythonをなぜインストールするのか
17:06 クロージング
🔗 前回 / 関連動画
◀ 前回: [Vibe Coding 2] CLI · IDE
▶ 次回: [Vibe Coding 4] Git · GitHub
📂 全体再生リスト: Dapanda - Vibe Coding シリーズ（0〜20回）
💬 フィードバック歓迎
YouTubeも編集もまだ不慣れです。足りない部分や、扱ってほしいテーマ、
間違った説明があれば、コメントで教えてください。次の動画ではさらに良い形に磨いてお届けします。🙏