【完全保存版】Claude Codeでゼロから爆速開発する「バイブコーディング」実践プレイブック

【従来の学習モデル】
[ 3ヶ月の文法学習 ] ──> [ 2ヶ月のフレームワーク ] ──> [ モチベーション枯渇 / リリースゼロ ]

【バイブコーディングのモデル】
[ 課題発見 & 要件定義 ] ──> [ Claude Code CLI ] ──> [ 3時間で本番ローンチ ] ──> [ 収益化 ]

 ┌────────────────────────────────────────────────────────┐
 │ 1. プランニング（Planning）                            │
 │    画面遷移、データモデル、ユーザー体験の要件を言語化  │
 └───────────────────────────┬────────────────────────────┘
                             │
 ┌───────────────────────────▼────────────────────────────┐
 │ 2. コードベース探索（Codebase Exploration）            │
 │    Claudeに既存ファイル、スキーマ、共通関数を読ませる  │
 └───────────────────────────┬────────────────────────────┘
                             │
 ┌───────────────────────────▼────────────────────────────┐
 │ 3. 仕様定義（Spec Definition）                         │
 │    Markdownのチェックリスト形式で最小限のタスクに分割  │
 └───────────────────────────┬────────────────────────────┘
                             │
 ┌───────────────────────────▼────────────────────────────┐
 │ 4. 実装 & TDD検証（Implementation & TDD）              │
 │    ファイルを生成し、即座に `tsc --noEmit` やテスト実行│
 └───────────────────────────┬────────────────────────────┘
                             │
 ┌───────────────────────────▼────────────────────────────┐
 │ 5. 人間によるフィードバック & 監査（Audit）            │
 │    ブラウザで挙動確認、エッジケースの検証              │
 └────────────────────────────────────────────────────────┘

node -v
npm -v

npm install -g @anthropic-ai/claude-code

claude

以下のコマンドをターミナルで実行して、Next.jsプロジェクト「vibe-saas」を新規作成してください：

npx create-next-app@latest vibe-saas \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --import-alias "@/*" \
  --use-npm \
  --no-turbopack

作成完了後、ディレクトリ内に移動し、以下を追加インストールしてください：
- lucide-react（アイコン用）
- clsx, tailwind-merge（クラス名結合用）

続いて、shadcn/uiを初期化してください：
npx shadcn@latest init -d

さらに、基本となるButton, Toast, Cardコンポーネントを追加してください：
npx shadcn@latest add button sonner card

完了したら、`npm run build` を実行して、ビルドエラーが一切ないことを確認してください。

vibe-saas/
├── components.json          # shadcn/ui 設定ファイル
├── next.config.ts           # Next.js 設定
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── src/
    ├── app/
    │   ├── globals.css      # Tailwind スタイル & テーマ
    │   ├── layout.tsx       # ルートレイアウト（Toaster配置）
    │   └── page.tsx         # 動作検証用ページ
    ├── components/
    │   └── ui/              # shadcn UI コンポーネント群
    │       ├── button.tsx
    │       ├── card.tsx
    │       └── sonner.tsx
    └── lib/
        └── utils.ts         # cn() ヘルパー関数

`src/app/page.tsx` を以下の要件で更新してください：
1. 画面中央に shadcn/ui の Card を配置し、タイトルを「Vibe SaaS パイプライン稼働中」とする。
2. Lucideの「Rocket」アイコンが入ったButtonを配置する。
3. ボタンをクリックした時、Sonnerのトースト通知「パイプライン正常稼働！機能開発の準備が整いました」を表示させる。
4. `src/app/layout.tsx` に `<Toaster />` がマウントされていることを確認する。

完了後、`npm run build` を実行して型エラーがないことを証明してください。

Gitの状態を確認してください。未初期化の場合は以下を実行してください：
git init
git add -A
git commit -m "chore: initial scaffold with Next.js, shadcn, and sonner"

GitHub CLI (`gh`) を使用して、プライベートリポジトリ「vibe-saas」を作成し、mainブランチにプッシュしてください。

npm install -g vercel@latest

Vercel CLIを使用して、このプロジェクトをVercelにリンクおよび本番デプロイしてください：
vercel --prod --yes

`screenshots/reference-ui.png` のレイアウトを分析してください。独自CSSは書かず、既存のTailwind CSSとshadcn/uiで再構築します：

1. レイアウト構造: モバイルとデスクトップのFlex/Grid構成を分解してください。
2. カラー & 深度: slate-900の背景、zinc-800のボーダー、violet-500のアクセントカラーなど、Tailwindのカラーパレットに対応させてください。
3. タイポグラフィ: フォントの太さ（font-semibold等）、字間（tracking-tight）を忠実に再現してください。
4. コンポーネント抽出: 表示されているUI要素をshadcnのButton, Card, Badgeにマッピングしてください。

上記に基づき、`src/components/landing/HeroSection.tsx` を新規作成してください。
モバイルファーストで完全レスポンシブ対応にしてください。

# Supabase Transaction Pooler URL
DATABASE_URL="postgresql://postgres.xxxx:[YOUR-PASSWORD]@aws-0-ap-northeast-1.pooler.supabase.com:6543/postgres?sslmode=require"

# Discord Webhook（通知用）
DISCORD_WEBHOOK_URL="https://discord.com/api/webhooks/xxxx/yyyy"

# 管理画面用パスキー
ADMIN_SECRET_KEY="your-ultra-secure-passkey-here"

vercel env add DATABASE_URL production
vercel env add DISCORD_WEBHOOK_URL production
vercel env add ADMIN_SECRET_KEY production

npm install drizzle-orm postgres
npm install -D drizzle-kit tsx dotenv

import { pgTable, uuid, text, timestamp, varchar } from "drizzle-orm/pg-core";

export const inquiries = pgTable("inquiries", {
  id: uuid("id").defaultRandom().primaryKey(),
  name: varchar("name", { length: 255 }).notNull(),
  email: varchar("email", { length: 255 }).notNull(),
  company: varchar("company", { length: 255 }),
  message: text("message").notNull(),
  status: varchar("status", { length: 50 }).default("unread").notNull(),
  createdAt: timestamp("created_at", { withTimezone: true })
    .defaultNow()
    .notNull(),
});

export type Inquiry = typeof inquiries.$inferSelect;
export type NewInquiry = typeof inquiries.$inferInsert;

import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";
import * as schema from "./schema";

const connectionString = process.env.DATABASE_URL;
if (!connectionString) {
  throw new Error("DATABASE_URLが設定されていません。");
}

// サーバーレス環境でのコネクション枯渇を防ぐ設定
const client = postgres(connectionString, { prepare: false });
export const db = drizzle(client, { schema });

npx drizzle-kit push

"use server";

import { z } from "zod";
import { db } from "@/db";
import { inquiries } from "@/db/schema";

const InquirySchema = z.object({
  name: z.string().min(2, "お名前は2文字以上で入力してください。"),
  email: z.string().email("有効なメールアドレスを入力してください。"),
  company: z.string().optional().default(""),
  message: z.string().min(10, "お問い合わせ内容は10文字以上で入力してください。"),
});

export async function submitInquiry(formData: {
  name: string;
  email: string;
  company?: string;
  message: string;
}) {
  try {
    const validated = InquirySchema.parse(formData);

    const [saved] = await db.insert(inquiries).values({
      name: validated.name,
      email: validated.email,
      company: validated.company || null,
      message: validated.message,
    }).returning();

    // Discord Webhook への通知
    if (process.env.DISCORD_WEBHOOK_URL) {
      await fetch(process.env.DISCORD_WEBHOOK_URL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          username: "リード獲得通知Bot",
          embeds: [{
            title: "🚀 新しいお問い合わせが届きました！",
            color: 0x8b5cf6,
            fields: [
              { name: "お名前", value: validated.name, inline: true },
              { name: "メールアドレス", value: validated.email, inline: true },
              { name: "会社名", value: validated.company || "未記入", inline: true },
              { name: "内容", value: validated.message },
            ],
            footer: { text: `ID: ${saved.id}` },
            timestamp: new Date().toISOString(),
          }],
        }),
      }).catch((err) => console.error("Discord通知失敗:", err));
    }

    return { success: true, message: "お問い合わせを受け付けました。24時間以内にご連絡いたします。" };
  } catch (error) {
    if (error instanceof z.ZodError) {
      return { success: false, message: error.issues[0].message };
    }
    return { success: false, message: "予期せぬエラーが発生しました。" };
  }
}

# SYSTEM DIRECTIVE: VIBE SAAS REPOSITORY CONSTITUTION

あなたは、このプロダクションNext.jsアプリケーションを担当するリードフルスタックエンジニアです。
妥協のないクリーンかつ厳格に型付けされたコードを記述してください。
TODOコメントでの放置や、手抜き実装は一切禁止します。

## 1. 固定技術スタック（逸脱禁止）
- Framework: Next.js 15+ (App Router, Server Actions, React 19)
- Language: TypeScript (Strict Mode)
- Styling: Tailwind CSS (ユーティリティクラスのみ。カスタムCSSファイル禁止)
- UI Components: shadcn/ui + Lucide React
- Database: Supabase PostgreSQL (Transaction Pooler 6543ポート, prepare: false)
- ORM: Drizzle ORM
- Validation: Zod (すべてのServer Actionと外部入力で必須)
- Testing: Vitest

## 2. 絶対禁止事項（即時リジェクト対象）
1. 他のUIライブラリ（Chakra UI, MUI, Mantine等）を追加インストールすることの禁止。
2. TypeScriptにおける `any` 型、および型ガードのない `unknown` の使用禁止。
3. 型エラーをごまかすための `// @ts-ignore` や `// @ts-nocheck` の使用禁止。
4. チャット内で人間の明示的な許可なく `.env.local` を書き換えることの禁止。
5. 秘密鍵や環境変数をターミナルに出力する行為の禁止。
6. 後述の検証ゲートを通過せずにタスク完了を宣言することの禁止。

## 3. タスク完了前の必須検証コマンド
タスク完了をユーザーに報告する前に、必ず以下を実行して自己診断してください：

1. 型チェック:
   `npx tsc --noEmit` （エラー0件であること）
2. ビルドテスト:
   `npm run build` （正常終了すること）

エラーが発生した場合、人間に修正方法を尋ねず、自律的に原因を突き止めて修正してください。

【4週間の収益化ロードマップ】
┌──────────────┐      ┌──────────────┐      ┌──────────────┐      ┌──────────────┐
│    第1週     │      │    第2週     │      │    第3週     │      │    第4週     │
│ 骨格構築 &   │ ───> │ LP構築 &     │ ───> │ コア機能実装 │ ───> │ 告知 & 初回  │
│ 即日デプロイ │      │ 見込み客獲得 │      │ & 決済リンク │      │ 収益獲得     │
└──────────────┘      └──────────────┘      └──────────────┘      └──────────────┘

以下の機能を実装したいと考えています：
「[機能の概要、例：CSVファイルのドラッグ＆ドロップによるインポートとプレビュー機能]」

コードを書く前に、以下を実行してください：
1. `package.json` と `src/db/schema.ts` をスキャンし、既存の技術的制約を洗い出してください。
2. 設計上の懸念点やエッジケースを3つ指摘してください。
3. `docs/specs/[機能名].md` にステップ・バイ・ステップの実装仕様書を作成してください。
4. 各タスクは「修正ファイル数2個以内」「検証コマンド明記」のチェックボックス形式にしてください。
仕様書を作成し、私の承認を待ってください。

`screenshots/target.png` のUIを分析し、`src/components/features/[コンポーネント名].tsx` に実装してください。
- Tailwind CSSと既存のshadcn/uiコンポーネントを使用してください。
- 字間（tracking-tight）、フォントの太さ、シャドウの質感を可能な限り再現してください。
- 375pxのスマホ表示から1440pxのPC表示まで完全対応させてください。
- 完了後、`npx tsc --noEmit` で型チェックを通してください。

`src/lib/[モジュール名].ts` を作成します。厳格なTDD手順で進めてください：
1. `tests/[モジュール名].test.ts` にVitestでテストコードを作成してください（正常系、境界値、異常系エラーハンドリングを網羅）。
2. `npx vitest run` を実行し、全テストが「RED（失敗）」することを確認してください。
3. `src/lib/[モジュール名].ts` にテストをパスする最小限の実装を行ってください。
4. 全テストが「GREEN（成功）」になるまで修正を繰り返してください。

このリポジトリの依存関係監査を実施してください：
1. `package.json` 内のパッケージが実際に `src/` 内でimportされているかgrep検索してください。
2. 未使用・重複している不要なパッケージをリストアップしてください。
3. それらを安全に `npm uninstall` するコマンドを提示し、実行してください。
4. 実行後、`npm run build` でビルドが通ることを証明してください。

`npx tsc --noEmit` を実行し、発生したすべての型エラーを修正してください：
- `any` や `// @ts-ignore` による誤魔化しは固く禁じます。
- 不明な外部APIレスポンスがある場合は、Zodスキーマを定義して型を推論してください。
- 修正完了後、再度 `npx tsc --noEmit` を実行し、エラーが0件になったログを提示してください。

`src/db/schema.ts` に以下の変更を加えます：
「[変更内容、例：inquiriesテーブルにphoneフィールド（varchar50、NULL許容）を追加]」

手順：
1. `src/db/schema.ts` を更新し、型推論のエクスポートを更新してください。
2. `npx drizzle-kit generate` でマイグレーションSQLを作成してください。
3. 破壊的な変更（DROP等）が含まれていないか確認してください。
4. `npx drizzle-kit push` でSupabaseに反映してください。

`src/app/page.tsx` の表示パフォーマンスを最適化してください：
1. すべての画像が `next/image` かつ適切な `sizes`、ファーストビュー画像には `priority` が設定されているか確認。
2. 不要に `"use client"` が指定されているコンポーネントを特定し、Server Componentに戻してクライアントJS容量を削減してください。
3. `npm run build` を実行し、ルートごとのJSバンドルサイズを報告してください。

あなたは敵対的なセキュリティQAエンジニアです。`src/app/actions/[アクション名].ts` をテストしてください。
`tests/adversarial.test.ts` を作成し、以下を送信してください：
1. SQLインジェクション文字列（例: `'); DROP TABLE inquiries;--`）
2. XSSペイロード（例: `<script>alert('xss')</script>`）
3. 10万文字の無意味な巨大文字列
4. 絵文字やUnicodeの特殊文字

すべての異常入力がZodによって適切に弾かれ、サーバーがクラッシュしないことを確認してください。

`src/components/` 配下の全コンポーネントのモバイル表示を監査してください：
1. 固定幅（`w-[500px]` 等）を検出し、レスポンシブ幅（`w-full max-w-lg` 等）に修正してください。
2. 360px画面で横スクロール（水平オーバーフロー）が発生しないか確認してください。
3. すべてのボタンとタップ要素が、最低でも高さ44px（タップ可能領域）を確保しているか確認してください。

本番リリースの準備を行います。以下の手順を実行してください：
1. `git status` で余計なログやデバッグファイルが残っていないか確認。
2. `npx tsc --noEmit` と `npm run build` を実行。失敗した場合は即座に中断。
3. 変更内容をステージングし、Conventional Commitsに則ったわかりやすいコミットメッセージを生成してコミット。
4. `git push origin main` を実行。
5. Vercelの本番デプロイが完了したことを確認し、公開URLを報告してください。