バイブコーディングのプロジェクトをゼロから立ち上げる方法

バイブコーディングとは、作りたいものを自然言語で記述し、AIエージェントにコードを書かせるアプローチです。しかし、このワークフローが機能するのは、正しいセットアップがある場合だけです。エージェントにローカルファイルへのアクセス権を与えるIDE、自分のAPIキーによるモデル接続、そしてすべての変更を追跡するバージョン管理が必要です。これらが揃っていなければ、チャットウィンドウからコードをコピーするか、ロールバックできない変更を受け入れることになります。

ターミナルはフィードバックループを閉じるために不可欠です。プロジェクトを実行し、エラーや成功を確認し、その出力をエージェントにフィードバックします。Gitはセーフティネットとして不可欠です。検証済みの変更はすべてコミットし、失敗した実験はいつでも元に戻せます。この4つのツール（AI IDE、APIキー、ターミナル、Git）が、バイブコーディングワークフローの基盤を形成します。

ステップ1：自然言語でプロジェクトをスキャフォールドする

空のフォルダから始めます。AI IDEでそのフォルダを開き、作りたいプロジェクトを記述します。プロジェクトの種類、技術スタック、フォルダ構造を具体的に指定してください。例えば「TypeScriptを使ったReactアプリを作成。src/フォルダにcomponents/とutils/のサブディレクトリを置き、見出しを表示する基本的なApp.tsxを含める」といった具合です。エージェントが初期ファイル、依存関係、設定を生成します。

これはバイブコーディングで最も達成感のあるパートです。一つの記述からプロジェクトが形になるのを見ることができます。しかし、ここで規律が最も重要になります。スキャフォールドの上に何かを積み上げる前に、必ずdiffをレビューしてください。フォルダ構造が妥当か、依存関係が適切か、設定ファイルが記述したスタックに合っているかを確認します。

スキャフォールドに問題がある場合（依存関係が多すぎる、予期しないフォルダ構成、見覚えのない設定など）、それを却下してプロンプトを改善してください。土台を直すのは今のうちです。その上に3つの機能が積み重なった後に作り直すのは、はるかに大変です。クリーンなスキャフォールドがプロジェクト全体のトーンを決定します。

ステップ2：機能を自然言語で記述する

ステップ3：diffをレビューする — 多くのチュートリアルが省略するステップ

多くのバイブコーディングのチュートリアルでは、プロンプトの方法と結果の実行方法を解説します。しかし、中間のステップであるdiffのレビューを省略しています。このステップこそが、うまくいくバイブコーディングと、脆弱で理解されていないコードを生み出すバイブコーディングを分けるものです。レビューしなければ、コーディングしているのではなく、ただ祈っているだけです。

エージェントが処理を終えたら、何も受け入れる前にインラインdiffを確認してください。どのファイルが変更されたか、それが依頼した内容と一致しているかを確認します。追加された行を1行ずつ読みます。ロジックが正しいか、変数名が妥当か、依頼していない依存関係やパターンをエージェントが持ち込んでいないかをチェックします。削除にも特に注意してください。エージェントは不要と判断したコードを削除することがありますが、実際には必要なコードかもしれません。

diff全体を一括で受け入れるか却下する必要はありません。ほとんどのAI IDEでは、個々のハンク（変更ブロック）を個別に受け入れたり却下したりできます。この機能を活用してください。正しく見える部分を受け入れ、そうでない部分を却下し、却下した箇所についてより具体的な指示で再プロンプトします。このハンクレベルの制御こそが、バイブコーディングをデモだけでなく実際のプロジェクトで実用的にするものです。

ステップ4：ターミナルのフィードバックで実行、テスト、反復する

diffを受け入れた後、ターミナルでプロジェクトを実行します。これが真のチェックポイントです。diffは正しく見えるかもしれませんが、コードが実際にコンパイルされるか、レンダリングされるか、テストに合格するかはターミナルが教えてくれます。開発サーバーを起動するか、テストスイートを実行するか、ビルドをトリガーするか、プロジェクトに適した方法で確認してください。

エラーが表示されても、手動で修正しないでください。ターミナルのエラー出力をコピーし、次のプロンプトとしてエージェントに貼り付けます。エージェントはスタックトレース、コンパイラエラー、テスト失敗を読み取り、その情報を使って修正を繰り返します。このターミナルからエージェントへのフィードバックループは、バイブコーディングで最も強力なパターンの一つです。何が問題だったかについて、具体的で曖昧さのないコンテキストをエージェントに提供するからです。

ターミナルがクリーンになるまで反復してください。各サイクル（プロンプト、diff、受け入れ、実行、確認）は数時間ではなく数分で完了するはずです。同じ問題で3〜4回以上反復している場合は、一歩引いてプロンプトを見直してください。問題の原因は通常、エージェントの能力不足ではなく、コンテキストの不足です。

ステップ5：バイブコーディングプロジェクトのGitワークフロー

検証済みの変更ごとにコミットしてください。これがバイブコーディングにおける最も重要なGitの習慣です。各コミットは、diffでレビューしターミナルでテストした1つの機能または修正を表すべきです。複数のエージェントセッションを1つのコミットにまとめないでください。後で何かが壊れた場合、原因となった正確な変更を特定してリバートできるようにしておく必要があります。

変更の内容を明確に記述したコミットメッセージを書いてください。バイブコーディングで生成されたコミットに「[vibe]」や「[agent]」といったタグを付ける開発者もいます。これは必須ではありませんが、Git履歴が透明になり、共同作業者がエージェント支援による変更を把握しやすくなります。メッセージ自体は「エージェント生成コード」だけでなく、何が変わったか、なぜ変わったかを記述すべきです。

実験的なバイブコーディング（確信のない機能を試す場合）には、ブランチを使いましょう。フィーチャーブランチを作成し、エージェントに自由に作業させ、レビューとテストを行い、自信が持てた時点でmainにマージします。実験が失敗した場合は、mainの履歴を汚すことなくブランチを削除できます。このブランチ戦略により、既に動いているものを壊すリスクなしに自由に探索できます。

CodeWingerの位置づけ

このチュートリアルのすべてのステップは、CodeWingerの機能に直接対応しています。ワークフローはCodeWingerでも他のAI IDEでも同じですが、各ステップが実際にどのように見えるかを紹介します。

• 空のフォルダをプロジェクトとして開く — CodeWingerは最初からエージェントにローカルファイルへのフルアクセスを提供します
• BYOKのAPIキーを入力する — Anthropic、OpenAI、その他の対応プロバイダーにサブスクリプションなしで接続できます
• スキャフォールドを自然言語で記述する — エージェントがプロジェクトディレクトリにファイル、フォルダ、設定を作成します
• ハンクレベルの受け入れ/却下でインラインdiffをレビューする — コードベースに取り込む前にすべての変更を確認できます
• 内蔵ターミナルで実行・テストし、次のプロンプトのためにエラーをキャプチャする
• 検証済みの各変更後に統合Gitパネルからステージングとコミットを行う

まとめ

バイブコーディングは魔法でも無謀でもありません。これは構造化されたワークフローです。自然言語でスキャフォールドを作り、機能を一つずつ記述し、すべてのdiffをレビューし、ターミナルでテストし、Gitでコミットする。各ステップには目的があり、いずれか一つでも省略すれば（特にdiffレビュー）、強力なワークフローがリスクに変わります。手順に従い、習慣として身につければ、バイブコーディングはコードベースの制御を失うことなく機能を素早くリリースする信頼性の高い方法になります。

よくある質問