teccon forum

Vibe Coding ガイド

10 min read

Vibe Coding ガイド

概要

Vibe Codingは、最先端のAIエージェントを活用してアプリケーション開発プロセスを革新的に効率化する開発手法です。この先進的なアプローチにより、開発者の生産性が飛躍的に向上し、コード品質が大幅に改善されると同時に、従来の開発ワークフローがインテリジェントな自動化によって根本から変革されます。

このガイドでは、Vibe Codingの核となる基本原則と、Model Context Protocol（MCP）を活用した実践的な開発フローについて、わかりやすく体系的に解説します。

準備

以下の簡潔なステップでVibe Codingの導入を始めましょう：

# SaaSボイラープレートのリポジトリをクローン
git clone https://github.com/ixartz/SaaS-Boilerplate.git saas-demo
 
# 一貫した開発環境を確保するための設定ファイルをコピー
rsync -auvzR .github .gitignore .vscode .editorconfig ./saas-demo
 
# プロジェクトディレクトリに移動
cd saas-demo

体系的な計画アプローチ

Vibe Codingの成功には、綿密かつ構造化された計画が不可欠です。専用のフォーマット（.idea/*.yaml、.github/prompts/*.mdc）を活用して詳細な開発計画を作成し、プロジェクト全体の道筋を明確化しましょう。

全体に適用するルール

まずはカスタムインストラクションを設定しましょう。

.github/custom-instructions.mdを参照

さらに、Agentの動作を最適化するために、以下のルールを遵守してください：

Use only the vscode tasks of this project to run, build and test the application.

Avoid using `npm`, `npx`, `pnpm`, `ng` and other direct commands and try to use the provided vscode tasks instead.

Do not use commands like `cd /path/to/project/` since we are already in the project directory.

Avoid using commands that would require permissions or interactions from the user.

After changes are done, make sure to start the app via `npm: build` task from the tasks.json file to test if it compiles correctly.

.github/prompts/agent_behavior.mdを参照

技術選定

プロジェクトの特性に合わせて慎重に選定された技術スタックは、アプリケーションの将来的な拡張性、パフォーマンス、そして長期的な保守性を大きく左右します。技術選定の詳細なガイドラインとベストプラクティスについては、.idea/tech_stack.mdを参照

開発規約

プロジェクト全体で一貫したコーディング規約、命名規則、およびアーキテクチャパターンを確立することは、開発環境の統一性を保ち、チーム間のシームレスなコラボレーションを実現する基盤となります。

.idea/project_rules.mdを参照

実装戦略

プロジェクトの効率性を最大化し、継続的な進捗を確保するために、優先度に基づいた実装タスクの体系化が重要です：

  • 論理的かつ段階的なステップで実装を構造化する
  • 各実装フェーズを計画的にAIエージェントに提供し、最適な支援を引き出す

以下の推奨実装シーケンスに従うことで、効率的な開発フローを実現できます：

  1. ユーザーインターフェース（UI）設計: 直感的なレイアウトとコンポーネント構造の構築
  2. 認証システム: セキュアなユーザー認証とアクセス制御の実装
  3. 決済処理: シームレスな決済フローと支払い統合の開発
  4. 共通UIコンポーネント: ナビゲーションバー、クッキー同意ダイアログなどの標準要素の実装
  5. コアビジネスロジック: アプリケーションの中核となる機能とデータ処理の開発
  6. 包括的ドキュメント: 開発者向けおよびエンドユーザー向けの詳細な説明資料の作成
  7. セキュリティ強化: 脆弱性対策とコンプライアンス要件への対応
  8. テスト体制の確立: 自動化テストと品質保証プロセスの導入
  9. パフォーマンス最適化: アプリケーション全体の応答性と効率性の向上

詳細な実装計画と各フェーズの具体的なタスクについては、.idea/implementation_plan.mdを参照

設計の統合

  • フロー設計: ユーザー体験を最ｊｊ適化するための直感的なユーザージャーニーとデータフローの綿密な設計
  • フロントエンドアーキテクチャ: スケーラブルなコンポーネント構成、効率的な状態管理、一貫性のあるスタイリングアプローチの体系的な構築
  • バックエンドシステム: 堅牢なAPIエンドポイント、最適化されたデータベーススキーマ、セキュアなサービス統合の戦略的な設計

.idea/app_flow.md, .idea/frontend_guide.md, .idea/backend_guide.mdを参照

Agent UIの基本操作

Vibe Codingの実践において以下の基本操作をマスターすることは、AIエージェントとの効果的な協働を実現するために不可欠です。

― Agent UIの起動と操作:

  • モードを選択:　[ Agent,Editor,Ask ]

  • モデルを選択: [ gpt-4o, gpt-4o-mini, gpt-3.5-turbo, claude-4 ]

  • プロンプトの入力と実行:

    • プロンプトを入力: 開発タスクや質問を明確に記述
    • 実行: エージェントに指示を送信し、結果を待つ
    • 結果の確認: エージェントからの応答を受け取り、必要に応じてフィードバックを提供
    • 結果の適用: エージェントが提案したコードや修正をプロジェクトに統合
    • 結果の修正: 必要に応じて、エージェントの提案を手動で調整し、最適な結果を得る
    • 再実行: エージェントの応答に基づいて、追加の指示を与えたり、修正を加えたりして再度実行

実践的開発テクニック

MCP

Model Context Protocol（MCP）は、AIエージェントとの効果的なコミュニケーションを実現するための重要なフレームワークです。MCPを活用することで、開発者はエージェントに対して明確かつ具体的な指示を提供し、期待される結果を得ることができます。

MCPの基本的な使用方法は以下の通りです：

  • エージェントの提案を活用:
    • MCPサーバーの起動: “Select Tool”アイコンをクリックし、MCPサーバーを選択して起動
    • 直接実行: MCPの機能を直接指定して実行することで、エージェントの提案を即座に適用
      • #<tool_name>

効率的なGit操作マスター

MCPは多くのタスクを自動化できますが、主要なGit操作をマスターすることで開発が加速し、より精密な制御が可能になります。以下のGitコマンドはVibe Codingワークフローでとくに重要です：

ブランチ管理とエージェント提案の最適ハンドリング

# すべてのブランチを表示
git branch -a
#   main
# * impl/01 
#   remotes/origin/HEAD -> origin/main
 
# 現在の変更をステージングしてコミット
git add -A
git commit -m 'implement: 01'
 
# 次の実装フェーズ用の新しいブランチを作成して切り替え
git checkout -b impl/02
 
# 不要なエージェント提案の効果的な処理方法：
 
# オプション1：最新のコミットに完全に戻す
git reset --hard HEAD   # または git revert <COMMIT_ID>
 
# オプション2：ステージングした変更を保持しながら作業エリアを復元
git checkout -- .  # または git restore .
 
# オプション3：特定のファイルのみを選択的にリセット
git checkout -- path/to/file
 
# オプション4：未追跡ファイルをクリーンアップ
git clean -fd

効果的なプロンプト戦略

AIエージェントとの最適な協働を実現するための高度なプロンプト戦略：

  • 明確な目標設定: 具体的な成果物と期待する品質基準を明示する
  • 段階的な指示: 複雑なタスクを論理的なステップに分解して伝える
  • コンテキスト提供: 関連する背景情報や制約条件を十分に説明する
  • フィードバックループ: 初期結果に対して具体的な修正指示を提供し、反復的に改善する
  • ベストプラクティス参照: 業界標準やプロジェクト固有の規約に沿った実装を要求する

参考:

このガイドは、AI支援型ソフトウェア開発におけるベストプラクティスと最新技術を反映するために定期的に更新されています。最新の知見を継続的に取り入れ、Vibe Codingの実践者がより効果的な開発体験を得られるよう努めています。

Graph View