Claude Codeでデモを作る：SupabaseとVercelでバイブコーディング

バイブコーディングとは、プログラマーが自然言語の指示でAIエージェントを導き、人工知能に実際のコードを書かせる新しいソフトウェア開発パラダイムです。この用語は、Andrej Karpathy（OpenAI共同創業者、元Tesla AI責任者）が2025年2月の有名なツイートで作りました：「バイブコーディングと呼んでいる新しいコーディングの形がある。完全にバイブに身を任せ、指数関数的成長を受け入れ、コードの存在すら忘れるんだ。」

この記事では、Claude CodeをAIエージェントとして、Supabaseをバックエンド（データベース、認証、API）として、Vercelをデプロイに使い、これらのサービスの無料ティアのみを活用して、完全に動作するデモを構築する方法を見ていきます。

1. バイブコーディングとは何か、なぜ革命的なのか

バイブコーディングはソフトウェア開発における根本的なパラダイムシフトを表しています。コードを1行ずつ書く代わりに、開発者は：

1. 自然言語で欲しいものを記述する。
2. AIエージェントが完全なコードを生成する。
3. 開発者がレビュー、テスト、イテレーションを行う。

なぜ機能するのか

• スピード: 数日かかるプロジェクトが数時間で構築できる。
• アクセシビリティ: 専門家でない開発者でも動作する製品を構築できる。
• 迅速なイテレーション: アイデアをテストし、より速くピボットできる。
• プロダクトへの集中: how（どう作るか）ではなく_what_（何を作るか）に集中できる。

バイブコーディングを使うべきとき

バイブコーディングは以下に最適です：

• デモとMVP: アイデアを検証するためのプロトタイプを素早く構築する。
• ハッカソン: わずか数時間で動作する製品を作る。
• サイドプロジェクト: 数週間を投資せずに新しい技術を探索する。
• 概念実証: ステークホルダーや投資家に技術的実現可能性を実証する。

注意: バイブコーディングはデモやプロトタイプには優れています。高いセキュリティとスケーラビリティが求められるプロダクション品質のアプリケーションには、生成されたコードの徹底的なレビューが依然として不可欠です。

2. 技術スタック：Claude Code + Supabase + Vercel

Claude Code

Claude CodeはAnthropicのAIコーディングエージェントです。ターミナルで直接動作し、以下が可能です：

• コードベース全体を読み取り理解する。
• ファイルの作成、変更、削除を行う。
• ターミナルコマンドを実行する。
• APIや外部サービスとやり取りする。
• Gitでバージョン管理を行う。
• エラーやバグを自律的にイテレーションして修正する。

# Install Claude Code
npm install -g @anthropic-ai/claude-code

# Start in a project directory
cd my-project
claude

Supabase（無料ティア）

SupabaseはオープンソースのFirebase代替で、以下を提供します：

• PostgreSQLデータベース: 完全なリレーショナルデータベース。
• 認証: メール、Google、GitHubなどでのログイン。
• RESTおよびリアルタイムAPI: スキーマから自動生成。
• ストレージ: ファイルや画像の保存。
• Edge Functions: サーバーレス関数。

無料ティアの内容：

| リソース | 無料枠 | |----------|-----------| | データベース | 500 MB | | ストレージ | 1 GB | | 帯域幅 | 5 GB | | Edge Function呼び出し | 50万回/月 | | 認証ユーザー | 無制限 | | プロジェクト | アクティブ2件 |

Vercel（無料ティア）

VercelはNext.jsアプリケーションに最適なデプロイプラットフォームです：

• GitHubからの自動デプロイ。
• すべてのブランチとPRのプレビューデプロイ。
• 最適なパフォーマンスのためのグローバルCDN。
• サーバーレスファンクションが含まれる。
• 無料の基本アナリティクス。

無料ティアの内容：

| リソース | 無料枠 | |----------|-----------| | 帯域幅 | 100 GB/月 | | サーバーレスファンクション実行 | 100 GB時間/月 | | ビルド | 6,000分/月 | | プロジェクト | 無制限 | | デプロイ | 無制限 |

3. 初期セットアップ：環境の準備

前提条件

始める前に、以下を確認してください：

• **Node.js 18+**がインストールされていること。
• Gitが設定されていること。
• GitHubアカウントがあること。
• Supabaseアカウント（supabase.comで無料）。
• Vercelアカウント（vercel.comで無料）。
• Claude Codeがインストールされていること（npm install -g @anthropic-ai/claude-code）。

ステップ1：プロジェクトの作成

ターミナルを開き、Claude Codeを起動します：

mkdir my-demo-app && cd my-demo-app
claude

これで、Claude Codeに自然言語で指示を出し始めることができます：

You: Create a Next.js 15 project with App Router, TypeScript, Tailwind CSS,
and shadcn/ui. Also initialize a Git repository.

Claude Codeは自動的に以下を実行します：

npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir
npx shadcn@latest init
git init && git add . && git commit -m "Initial commit"

ステップ2：Supabaseの設定

1. supabase.comにアクセスして新しいプロジェクトを作成します。
2. Settings > APIからProject URLとanonキーをメモします。
3. Claude Codeを起動したターミナルに戻ります：

You: Add Supabase to the project. Create a .env.local file with the variables
NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Configure the
Supabase client with SSR support for Next.js App Router.

Claude Codeが完全な設定を作成します：

// src/lib/supabase/client.ts
import { createBrowserClient } from '@supabase/ssr';

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  );
}

// src/lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';

export async function createClient() {
  const cookieStore = await cookies();

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            cookieStore.set(name, value, options)
          );
        },
      },
    }
  );
}

4. デモの構築：タスク管理アプリ

具体的なデモを構築しましょう：認証、完全なCRUD、モダンなインターフェースを備えたタスク管理アプリです。

データベーススキーマの定義

Claude Codeにスキーマ作成の指示を出します：

You: Create a SQL migration for Supabase with the following tables:

1. profiles: id (uuid, FK to auth.users), username (text), avatar_url (text),
   created_at
2. projects: id (uuid), name (text), description (text), owner_id (uuid, FK
   to profiles), created_at
3. tasks: id (uuid), title (text), description (text), status (enum:
   todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid,
   FK to projects), assigned_to (uuid, FK to profiles), due_date (timestamp),
   created_at, updated_at

Enable Row Level Security on all tables and create appropriate policies.

Claude Codeが完全なマイグレーションを生成します：

-- Create enum types
CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');

-- Profiles table
CREATE TABLE profiles (
  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
  username TEXT UNIQUE,
  avatar_url TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Projects table
CREATE TABLE projects (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  description TEXT,
  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Tasks table
CREATE TABLE tasks (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT,
  status task_status DEFAULT 'todo',
  priority task_priority DEFAULT 'medium',
  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
  assigned_to UUID REFERENCES profiles(id),
  due_date TIMESTAMPTZ,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Enable RLS
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;

-- Profiles policies
CREATE POLICY "Users can view own profile"
  ON profiles FOR SELECT USING (auth.uid() = id);
CREATE POLICY "Users can update own profile"
  ON profiles FOR UPDATE USING (auth.uid() = id);

-- Projects policies
CREATE POLICY "Users can view own projects"
  ON projects FOR SELECT USING (auth.uid() = owner_id);
CREATE POLICY "Users can create projects"
  ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);
CREATE POLICY "Users can update own projects"
  ON projects FOR UPDATE USING (auth.uid() = owner_id);
CREATE POLICY "Users can delete own projects"
  ON projects FOR DELETE USING (auth.uid() = owner_id);

-- Tasks policies
CREATE POLICY "Users can view tasks in their projects"
  ON tasks FOR SELECT USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can create tasks in their projects"
  ON tasks FOR INSERT WITH CHECK (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can update tasks in their projects"
  ON tasks FOR UPDATE USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can delete tasks in their projects"
  ON tasks FOR DELETE USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );

このマイグレーションはSupabaseダッシュボード（SQLエディタ）から直接実行するか、CLIで実行できます。

TypeScript型の生成

You: Generate TypeScript types from the Supabase database and save them to src/types/database.ts

npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts

ユーザーインターフェースの構築

ここがバイブコーディングの最も強力な部分です。Claude Codeに高レベルな指示を出します：

You: Create a dashboard page for the task management app with:

1. Sidebar with navigation between projects
2. Kanban view with 3 columns (Todo, In Progress, Done) with drag & drop
3. Modal to create/edit tasks
4. Header with user avatar and logout
5. Modern design with shadcn/ui and Tailwind

Use data from Supabase with React Server Components where possible
and Client Components only where interactivity is needed.

Claude Codeがインターフェース全体をコンポーネントごとに構築します。

認証の追加

You: Add a complete authentication system with:

1. Login page with email/password and GitHub login
2. Registration page
3. Middleware to protect authenticated routes
4. Automatic redirect for unauthenticated users
5. Automatic profile creation after registration

Claude CodeがNext.jsのミドルウェアと認証ページを設定します：

// src/middleware.ts
import { createServerClient } from '@supabase/ssr';
import { NextResponse, type NextRequest } from 'next/server';

export async function middleware(request: NextRequest) {
  let supabaseResponse = NextResponse.next({ request });

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) =>
            request.cookies.set(name, value)
          );
          supabaseResponse = NextResponse.next({ request });
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          );
        },
      },
    }
  );

  const { data: { user } } = await supabase.auth.getUser();

  if (!user && !request.nextUrl.pathname.startsWith('/auth')) {
    const url = request.nextUrl.clone();
    url.pathname = '/auth/login';
    return NextResponse.redirect(url);
  }

  return supabaseResponse;
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],
};

5. 高度なバイブコーディングパターン

イテレーティブプロンプティング

効果的なバイブコーディングの秘訣はイテレーションです。すべてを1つのプロンプトで記述しようとしないでください。段階的に進めましょう：

Step 1: "Create the base layout with header and sidebar"
Step 2: "Add the project list in the sidebar with a button to create new ones"
Step 3: "Create the Kanban view in the main area"
Step 4: "Add drag & drop between columns"
Step 5: "Implement the modal to create new tasks"
Step 6: "Add toast notifications for user feedback"

ヒント: プロンプトが具体的でコンテキストに沿っているほど、結果は良くなります。Claude Codeはコードベース全体にアクセスできるため、新しい機能を一貫性を持って統合できます。

エラーハンドリング

何かがうまくいかない場合（そしてそれは必ず起きます）、単純にこう言えます：

You: I'm getting this error in the console: "TypeError: Cannot read property
'map' of undefined" in the TaskList component. Fix it.

Claude Codeがコードを分析し、問題を特定し、修正します。

AIによるリファクタリング

You: The Dashboard component has become too large. Split it into smaller,
reusable components while maintaining the same functionality.

テスト

You: Add tests with Vitest for utility functions and Playwright tests for
the authentication and task creation flow.

6. Vercelへのデプロイ：コードから世界へ

ステップ1：GitHubへプッシュ

You: Create an appropriate .gitignore, commit everything, and push to a new
GitHub repository called "my-demo-app".

git add .
git commit -m "feat: complete task management demo"
gh repo create my-demo-app --public --push --source=.

ステップ2：Vercelの接続

1. vercel.comにアクセスし、「Add New Project」をクリックします。
2. 先ほど作成したGitHubリポジトリをインポートします。
3. 環境変数を追加します：
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. 「Deploy」をクリックします。

ステップ3：カスタムドメインの設定（オプション）

Vercelはmy-demo-app.vercel.appのような無料URLを提供します。カスタムドメインの場合：

You: Add the configuration for a custom domain in vercel.json

プレビューデプロイ

GitHubでプルリクエストを開くたびに、Vercelは自動的にユニークなURLを持つプレビューデプロイを作成します。マージ前に変更を確認するのに最適です。

7. デモの最適化

パフォーマンス

You: Optimize the app's performance:
1. Add loading states with Suspense and skeletons
2. Implement caching with Next.js unstable_cache
3. Optimize images with next/image
4. Add SEO metadata for each page

Supabaseでのリアルタイム

デモで常に印象的な機能はリアルタイムです：

You: Add realtime synchronization for tasks using Supabase Realtime.
When a user updates a task, all other users should see the change
in real time without refreshing.

'use client';

import { useEffect, useState } from 'react';
import { createClient } from '@/lib/supabase/client';
import type { Task } from '@/types/database';

export function useRealtimeTasks(projectId: string) {
  const [tasks, setTasks] = useState<Task[]>([]);
  const supabase = createClient();

  useEffect(() => {
    const channel = supabase
      .channel('tasks-changes')
      .on(
        'postgres_changes',
        {
          event: '*',
          schema: 'public',
          table: 'tasks',
          filter: `project_id=eq.${projectId}`,
        },
        (payload) => {
          if (payload.eventType === 'INSERT') {
            setTasks((prev) => [...prev, payload.new as Task]);
          } else if (payload.eventType === 'UPDATE') {
            setTasks((prev) =>
              prev.map((t) =>
                t.id === payload.new.id ? (payload.new as Task) : t
              )
            );
          } else if (payload.eventType === 'DELETE') {
            setTasks((prev) =>
              prev.filter((t) => t.id !== payload.old.id)
            );
          }
        }
      )
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, [projectId, supabase]);

  return tasks;
}

ダークモード

You: Add dark mode support with a toggle in the header.
Use Tailwind dark classes and save the preference in localStorage.

8. 効果的なバイブコーディングのベストプラクティス

1. プロンプトは具体的に

❌ 「きれいなページを作って」
✅ 「紫から青のグラデーションのヒーローセクション、アイコン付き3枚のカードの
   機能セクション、オレンジ色のCTAボタンを持つランディングページを作成して」

2. コンテキストを提供する

❌ 「認証を追加して」
✅ 「Supabase Authで認証を追加して。プロジェクトはNext.js 15 App Router
   とTypeScriptを使用。メール/パスワードログインとGitHubのOAuthが欲しい。
   @supabase/ssrのSSRパターンを使って」

3. 小さなステップでイテレーションする

すべてを1つのプロンプトで構築しようとしないでください。段階的に進めましょう：

1. ベースレイアウト
2. 一度に1つの機能
3. スタイリングと仕上げ
4. エラーハンドリング
5. テスト

4. 生成されたコードをレビューする

バイブコーディングはコードを読まないということではありません。常にレビューしてください：

• セキュリティ: RLSポリシー、入力バリデーション、データサニタイズ。
• パフォーマンス: N+1クエリ、不必要なクライアントサイドコンポーネント。
• ベストプラクティス: プロジェクト構造、命名規則。

5. Gitを戦略的に使う

You: Commit the changes with a descriptive message after each completed feature.

これにより、何か問題が発生した場合にロールバックできます。

9. コスト：本当にすべて無料なのか？

各サービスのコスト内訳は以下の通りです：

| サービス | 無料プラン | 有料になるタイミング | |---------|-----------|-------------| | Claude Code | Anthropicプラン（月額20ドルから）またはAPIキーが必要 | 即時だが、価値は絶大 | | Supabase | 充実した無料ティア（2プロジェクト、500MB DB） | 無料ティアの制限を超えた場合 | | Vercel | 個人プロジェクト向け無料ティア | チームまたは商用利用の場合 | | GitHub | パブリック・プライベートリポジトリ無料 | エンタープライズ機能 |

注意: Claude CodeはサブスクリプションまたはAPIクレジットが必要ですが、開発スピードに対するROIは驚異的です。デモやMVPの場合、総コストは約20ドルの範囲です。

無料のAI代替手段

コストを完全にゼロに抑えたい場合は、以下が使えます：

• Cursor（制限付き無料ティア）。
• GitHub Copilot（学生とオープンソース向けに無料）。
• Codeium/Windsurf（充実した無料ティア）。

10. デモからプロダクトへ：次のステップ

デモが公開されたら、次のように進めましょう：

1. フィードバックを収集する: デモを潜在的なユーザーと共有し、意見を集める。
2. 迅速にイテレーションする: バイブコーディングを使って要望された変更を実装する。
3. 指標をモニタリングする: Vercel AnalyticsとSupabaseダッシュボードが重要なデータを提供する。
4. 必要に応じてスケールする: 需要が検証されたときにのみ有料プランにアップグレードする。

結論

Claude Code、Supabase、Vercelを使ったバイブコーディングは、記録的な速さでデモやMVPを構築するための強力な組み合わせです。以前は数週間の開発がかかっていたものが、驚くほど高い品質レベルで、わずか数時間で達成できるようになりました。

重要なのは、正しいマインドセットでバイブコーディングに取り組むことです。「コードが書けない」ということではなく、AIツールで自分の能力を増幅するということです。基盤となる技術（React、SQL、認証、デプロイ）について知れば知るほど、AIエージェントを望む結果に導く効果が高まります。

ソフトウェア開発の未来はここにあり、始めるためのコストはかつてないほど低くなっています。デモを作成し、実際のユーザーで検証し、次の偉大なプロダクトを構築してください。

初めてのデモのチェックリスト：

• [x] Claude Codeのインストールと設定完了
• [x] データベーススキーマ付きのSupabaseプロジェクト作成完了
• [x] shadcn/ui付きのNext.jsプロジェクト初期化完了
• [x] 認証設定完了
• [x] 完全なCRUD実装完了
• [x] モダンでレスポンシブなUI
• [x] Vercelへのデプロイ完了
• [x] フィードバック用の共有可能なURL準備完了