読者が抱える課題
AIエディタ（Cursor等）を活用してコードを生成しながら開発を進める「バイブコーディング」は高速な開発を実現しますが、適切な設計やプロンプト管理を行わない場合、コンポーネントの肥大化やコンテキストの破綻、デプロイ時のビルドエラーが多発します。
この記事では、バイブコーディングを用いて個人開発を進める際の実践的なワークフロー、設計手順、Cursorルール設定、デプロイまでの流れを解説します。
この記事で分かること
- バイブコーディングを破綻させないための事前設計とプロジェクト構造
- Cursorの
.cursorrulesを活用したAI指示の標準化 - 要件定義から実装、テスト、Vercelへのデプロイまでの具体的な手順
- 開発時によくあるトラブルと対処法
対象読者・前提条件
- CursorなどのAI支援エディタを利用して個人開発を行いたいエンジニア
- Next.js (App Router) / TypeScript / Tailwind CSS の基本知識がある方
1. 事前準備とプロンプト方針の定義
バイブコーディングでは、AIに一括で全コードを作成させず、コンポーネント単位や機能単位で段階的にコード生成を行うことが重要です。
プロジェクトルールの設定 (.cursorrules)
ルートディレクトに .cursorrules（または .cursor/rules 内のルールファイル）を作成し、AIの出力コードの整合性を保ちます。
{
"instruction": "You are an expert in Next.js App Router, TypeScript, and Tailwind CSS.",
"rules": [
"Use TypeScript with strict type definitions.",
"Use functional components and React Server Components where appropriate.",
"Do not use 'any' type.",
"Keep components small and split them into separate files in the 'components' directory.",
"Use Tailwind CSS for styling."
]
}
2. 段階的実装の手順
Step 1: ディレクトリ構造の生成
まず骨組みとなるディレクトリ構造を生成させます。
プロンプト例:
Next.js (App Router) でタスク管理アプリを作成します。以下の要件を満たす最小限のディレクトリ構造を定義してください。
- タスク一覧表示、追加、削除機能
- TypeScript対応
- UIコンポーネントとデータ処理の分離
Step 2: 型定義とデータモデルの作成
AIにデータ型を先に定義させ、仕様のブレを防ぎます。
// src/types/task.ts
export interface Task {
id: string;
title: string;
isCompleted: boolean;
createdAt: string;
}
export type CreateTaskInput = Omit<Task, 'id' | 'createdAt'>;
Step 3: コンポーネントの実装
単一責任の原則に基づき、小分けにしてコードを作成させます。
// src/components/TaskItem.tsx
import React from 'react';
import { Task } from '@/types/task';
type TaskItemProps = {
task: Task;
onToggle: (id: string) => void;
onDelete: (id: string) => void;
};
export const TaskItem: React.FC<TaskItemProps> = ({ task, onToggle, onDelete }) => {
return (
<div className="flex items-center justify-between p-3 border-b border-gray-200">
<div className="flex items-center gap-2">
<input
type="checkbox"
checked={task.isCompleted}
onChange={() => onToggle(task.id)}
className="h-4 w-4"
/>
<span className={task.isCompleted ? 'line-through text-gray-400' : ''}>
{task.title}
</span>
</div>
<button
onClick={() => onDelete(task.id)}
className="text-red-500 hover:text-red-700 text-sm"
>
削除
</button>
</div>
);
};
3. デプロイとCLIによる構築手順
GitHubリポジトリ連携とビルド確認
ローカルでビルドエラーが出ないことを事前に確認します。
# 型チェックとリンターの実行
npm run lint
# 生産用ビルドの確認
npm run build
Vercel CLIを使用したデプロイ手順
# Vercel CLIのインストール（未導入の場合）
npm install -g vercel
# ログイン
vercel login
# プレビュー環境へのデプロイ
vercel
# 本番環境（Production）へのデプロイ
vercel --prod
4. トラブル例と対処方法
| トラブル現象 | 原因 | 対処方法 |
|---|---|---|
| AIが古い記法（Pages Router等）を出力する | コンテキスト不足 |
.cursorrules に App Router 使用の明記を徹底する |
| ビルド時に TypeScript 型エラーが発生する | AIが一時的に any や不整合な型を生成した |
tsconfig.json の strict: true を有効にし、エラー箇所を直接AIに渡して修正依頼する |
| ハイドレーションエラーが発生する | Client/Server コンポーネントの境界や Date.now() 等の不一致 |
'use client' ディレクティブの配置を見直し、レンダリング結果の不一致を解消する |
5. 個人開発チェックリスト
-
.cursorrulesをルートに配置し、使用技術やコーディング規約を定義したか - 型定義（TypeScript）を実装前に作成させたか
- コンポーネント単位でコード生成と手動レビューを行っているか
-
機密情報（APIキー等）が
.env.localに分離され、.gitignoreに含まれているか -
npm run buildがエラーなく通ることを確認したか - デプロイ先（Vercel等）の環境変数が設定されているか
まとめ
バイブコーディングは、すべてをAIに任せるのではなく、「全体の型定義と構造設計」を人間が指示し、個別のコード生成をAIに委ねることで最大の効果を発揮します。適切なルール設定と確認フローを導入して開発を進めてみてください。
※利用するライブラリやツールチェーンの最新仕様については、各公式ドキュメント（Next.js, Vercel等）をご確認ください。