バイブコーディングのやり方 — 初心者がClaude Code/Cursorで今日からアプリを作る手順

バイブコーディング（Vibe Coding）とは、AIにやりたいことを自然言語で伝え、コードの生成・修正・実行をAIに委ねる開発手法です。2025年にAndrej Karpathy（OpenAI共同創設者）が名付けたこの概念は、「コードを一行一行書く」から「意図を伝えてAIと協働する」へのパラダイムシフトを表しています。

従来のプログラミングでは、言語の文法・フレームワークのAPI・設計パターンを習得してからコードを書く必要がありました。バイブコーディングでは、これらの知識がなくても「こういうアプリが欲しい」と伝えるだけでAIが実装を担当します。

ただし「コードを読む力」は依然として重要です。AIが生成したコードの品質を評価し、意図通りかを判断するのは人間の役割。バイブコーディングは「プログラミングの民主化」ではなく、「開発プロセスの再設計」です。

バイブコーディングを始めるために必要なツールは3つだけです。

①Claude Code（推奨）またはCursor: Claude Codeはターミナルベースで自律的にファイル操作・ビルド・テストまで実行します。Cursorはエディタ統合型で、GUIに慣れた人に向いています。どちらもAIに自然言語で指示を出すスタイルは同じです。

②Node.js + npm: Webアプリ開発にはNode.js 18以上が必要。公式サイトまたはnvm経由でインストールしてください。Pythonでバックエンドを作る場合はPython 3.10以上も準備します。

③Gitの基本知識: バージョン管理はAI開発でも必須。最低限 `git init`, `git add`, `git commit` の操作ができれば十分です。Claude Codeを使う場合、Git操作もAIが実行するため、概念の理解さえあれば問題ありません。

月額費用はClaude Pro（20ドル）が最低ライン。本格的に取り組むならClaude Code MAX（100〜200ドル）が推奨です。

それでは実際に、バイブコーディングでWebアプリを作ってみましょう。題材は「読書記録アプリ」です。

Step 1 — プロジェクト初期化: ターミナルで `npx create-next-app@latest book-tracker --typescript --tailwind` を実行。Claude Codeを起動して「shadcn/uiもセットアップして」と伝えるだけでUI基盤が完成します。

Step 2 — メイン画面の構築: 「本のタイトル・著者・読了日を入力できるフォームと、一覧表示のカードUIを作って。shadcn/uiのCard, Input, Buttonを使って」と指示。AIがコンポーネントの生成からスタイリングまで実行します。

Step 3 — データの永続化: 「ローカルストレージに保存して。useEffectで初期読み込みも実装して」と追加指示。状態管理とデータ永続化が自動生成されます。

Step 4 — 機能追加: 「読了状態のフィルター機能と、評価（星5段階）の機能を追加して」。既存コードを壊さずに機能が追加されます。

Step 5 — デプロイ: 「Vercelにデプロイして」で完了。URLが発行され、スマホからもアクセス可能になります。

所要時間は約1時間。プログラミング経験ゼロでも、動くWebアプリが完成します。

バイブコーディングの成否はプロンプト（指示文）の質で決まります。以下の5つのコツを押さえてください。

①具体的に書く: 「カッコいいUI」→「ダークテーマ、角丸16px、グラデーション背景（#1a1a2e → #16213e）のカードUI」。抽象的な指示ほどAIの出力はブレます。

②既存パターンを参照させる: 「既存のUserCardコンポーネントと同じデザインパターンで」。Claude Codeは既存コードを分析して一貫性のある実装を生成します。

③制約条件を明示する: 「Tailwind CSSのみ使用、インラインスタイル禁止、1コンポーネント50行以下」。制約があるほうがAIは正確に動きます。

④段階的に指示する: 一度に全部作らせず、「まずデータ構造を定義して」→「次にUIを作って」→「最後にロジックを繋いで」と分割。各段階で出力を確認してから次に進みます。

⑤失敗したら文脈を伝え直す: 意図と違う出力が出たら「そうじゃなくて、〇〇のような動作にして。具体的には△△のとき□□する」と、期待する振る舞いを具体的に伝え直します。

バイブコーディング初心者が陥りやすい失敗パターンと、その対策を紹介します。

失敗①: 一度に大きな機能を作らせる: AIに「SNSアプリを全部作って」と丸投げすると、中途半端な実装が大量に生成されます。対策: 機能を最小単位に分解し、1つずつ実装・確認する。

失敗②: 生成されたコードを確認しない: AIのコードにはバグやセキュリティの問題が含まれることがあります。対策: 各ステップでビルド確認（`npm run build`）とブラウザでの動作確認を必ず行う。

失敗③: エラーが出ても原因を考えない: エラーをそのままAIに投げて「直して」を繰り返すと、根本原因を見逃して修正が膨らみます。対策: エラーメッセージを自分でも読み、「このエラーの原因を分析して、修正案を3つ提示して」と構造的に依頼する。

失敗④: CLAUDE.mdを作らない: プロジェクトのルールが定義されないと、AIが毎回異なるスタイルでコードを生成します。対策: プロジェクト開始時にCLAUDE.mdを作成し、技術スタック・命名規則・ディレクトリ構成を明記する。

失敗⑤: バージョン管理をしない: AIが既存コードを壊すことがあります。対策: こまめにGitコミットし、いつでも前の状態に戻せるようにする。