1.1 バイブコーディングとは何か

「バイブコーディング（Vibe Coding）」とは、AIに自然言語で指示を出し、コードを生成させながら開発を進める手法です。

従来のプログラミングでは、開発者が一行一行コードを書いていました。しかしバイブコーディングでは、「こういう機能を作って」「このエラーを直して」と日本語で指示を出すだけで、AIがコードを書いてくれます。

従来の開発 vs バイブコーディング

従来

プログラミング言語を学ぶ → 文法を覚える → コードを書く → エラーを調べる → 修正する

バイブコーディング

作りたいものを日本語で伝える → AIがコードを生成 → 動作確認 → 修正を指示

なぜ「Vibe」なのか

「Vibe（バイブ）」は「雰囲気」「感覚」という意味です。細かい文法や構文を気にせず、「こんな感じで」という雰囲気でAIに伝えれば、 AIが意図を汲み取ってコードにしてくれる。

この言葉は、Andrej Karpathy（テスラの元AI責任者）が提唱し、 2024年から急速に広まりました。

“I just see stuff, say stuff, run stuff, and copy paste stuff, and it mostly works.”
— Andrej Karpathy

バイブコーディングで作れるもの

✓Webアプリ（ToDoアプリ、ブログ、ECサイト）
✓モバイルアプリ（React Native、Flutter）
✓Chrome拡張機能
✓Discord / LINE / Slack Bot
✓APIサーバー
✓データ分析ツール
✓SaaS（月額課金サービス）

ポイント

バイブコーディングは「プログラミングを不要にする」ものではありません。「プログラミングの敷居を下げる」ものです。基本的な概念を理解していると、AIへの指示がより的確になり、結果としてより良いコードが生成されます。

1.2 AIと一緒に開発するワークフロー

バイブコーディングには、効率的に開発を進めるための「型」があります。この流れを押さえておくと、スムーズに開発できます。

Step 1

要件を明確にする

何を作りたいか、どんな機能が必要かを整理します。箇条書きで十分です。

Step 2

AIに全体像を伝える

最初に「こういうアプリを作りたい」と全体像を伝えます。AIはコンテキストを理解した上でコードを生成してくれます。

Step 3

小さく作って確認する

一気に全部を作ろうとせず、小さな機能から始めます。動作確認しながら進めるのがコツです。

Step 4

エラーはAIに丸投げ

エラーが出たら、エラーメッセージをそのままAIに貼り付けます。AIが原因と解決策を教えてくれます。

Step 5

繰り返し改善する

「ここをこう変えて」「この機能を追加して」と対話しながら完成度を上げていきます。

プロンプトの例

ToDoアプリを作りたいです。

機能：
- タスクの追加
- タスクの完了チェック
- タスクの削除
- ローカルストレージに保存

技術スタック：
- Next.js 14（App Router）
- TypeScript
- Tailwind CSS

まずは基本的なUIを作ってください。

1.3 よくある失敗と対処法

バイブコーディングには、初心者が陥りやすい「罠」があります。事前に知っておくことで、無駄な時間を使わずに済みます。

失敗1: 指示が曖昧すぎる

「いい感じのアプリを作って」

「タスク管理アプリを作って。追加・完了・削除ができて、データは保存される」

対処法: 具体的な機能を箇条書きで伝える

失敗2: 一度に全部を作ろうとする

「ECサイトを全部作って」

「まず商品一覧ページを作って」→「次にカート機能を追加して」

対処法: 小さく分割して、動作確認しながら進める

失敗3: エラーを自分で解決しようとする

（エラーメッセージを見て自分で調べる）

（エラーメッセージをそのままAIに貼る）

対処法: AIはエラー解決が得意。丸投げでOK

第1章: Vibe Codingとは