Vibe Codingとは？自然言語でAppを作るのは速いが、PrototypeとProductionは別物

Coding Agentに：

Login、Category、Search付きTo-do Appを作って。
UIはSimpleにして、動いたらDeployして。

と頼むだけで、かなり短時間に動くWeb Appが出ることがあります。

自然言語でOutcomeを説明し、AIに大量のCode生成・変更を任せる開発スタイルはVibe Codingと呼ばれます。

最大の魅力はSpeedですが、一つ誤解があります。

画面が動く = Softwareが完成した

ではありません。

PrototypeとProductionは目的が違う

**Prototype（試作）**は、Idea、UI、Flow、User需要を早く確認します。

Vibe Codingはここで非常に強力です。

**Production（本番環境）**ではさらに：

• Permission
• Data Consistency
• Error Handling
• Backup
• Monitoring
• Security
• Migration
• Scaling
• Dependency Update

が必要です。

これらは美しいTop Page Demoから見えません。

危険なのは「何を確認すべきか知らない」こと

Agentが：

const isAdmin = localStorage.getItem('role') === 'admin';

と生成したとします。

初心者には「Admin Checkがある」と見えますが、Browser内の値だけならUserが変更できる可能性があります。

AIが必ず間違えるのではなく、見た目が自然な設計の危険性をUserが判断できないことが問題です。

Vibe Codingが向くもの

• 個人Tool
• Landing Page
• Prototype
• Low-risk Internal Workflow
• Data Visualization Demo
• 一時的Script

など、Speedと学習が長期保守より重要な場合です。

Riskが上がる境界

Authentication、Payment、Personal Data、Medical Data、Company Secret、Production Database、File Upload、Arbitrary Code Executionに触れたら、「触って動いた」だけでは検証不足です。

Coding Agentとの関係

Lesson 048はAgentのCapabilityを説明しました。

Vibe CodingはむしろHumanがその能力をどう使うかです。

Codeを全く見ない使い方と、AIに大量実装させながらDiffやArchitectureをReviewする使い方ではRiskが違います。

初心者でも最低4点を見る

1. Git Diff

Lesson 027のGitで、どのFileが変わり、何が削除され、どんなDependencyが追加されたか確認します。

2. Test

AgentにTest追加だけでなく、実際に実行させます。

3. Secret

API KeyをFrontendへHard-codeしたりRepositoryへCommitしたりしません。

4. Database Migration

Schema変更やData削除にはBackupとRollback Planが必要です。

強いWorkflowはHumanを消さない

Human：Requirement / Boundary / Acceptance Criteria
AI：大量実装
Automated Test：機械的検証
Human：重要設計とRiskをReview

すべて手書きする必要はありませんが、お金、Data、Trustを失うBoundaryは理解する必要があります。

ひとことで

Vibe CodingはIdeaからPrototypeまでを劇的に速くします。しかしAccount、Money、Secret、長期Dataを扱うProductionでは、Test、Version Control、Security Review、Engineering判断がまだ必要です。