1~
2**バイブコーディング**とは、プログラマーが自然言語の指示でAIエージェントを導き、人工知能に実際のコードを書かせる新しいソフトウェア開発パラダイムです。この用語は、Andrej Karpathy（OpenAI共同創業者、元Tesla AI責任者）が2025年2月の有名なツイートで作りました：_「バイブコーディングと呼んでいる新しいコーディングの形がある。完全にバイブに身を任せ、指数関数的成長を受け入れ、コードの存在すら忘れるんだ。」_
3~
4この記事では、**Claude Code**をAIエージェントとして、**Supabase**をバックエンド（データベース、認証、API）として、**Vercel**をデプロイに使い、これらのサービスの**無料ティア**のみを活用して、完全に動作するデモを構築する方法を見ていきます。
5~
6## 1. バイブコーディングとは何か、なぜ革命的なのか
7~
8バイブコーディングはソフトウェア開発における根本的なパラダイムシフトを表しています。コードを1行ずつ書く代わりに、開発者は：
9~
101. 自然言語で欲しいものを**記述**する。
112. **AIエージェント**が完全なコードを生成する。
123. **開発者**がレビュー、テスト、イテレーションを行う。
13~
14### なぜ機能するのか
15~
16- **スピード**: 数日かかるプロジェクトが数時間で構築できる。
17- **アクセシビリティ**: 専門家でない開発者でも動作する製品を構築できる。
18- **迅速なイテレーション**: アイデアをテストし、より速くピボットできる。
19- **プロダクトへの集中**: _how_（どう作るか）ではなく_what_（何を作るか）に集中できる。
20~
21```mermaid
22flowchart LR
23    A[アイデア] --> B[自然言語プロンプト]
24    B --> C[Claude Codeがコードを生成]
25    C --> D[レビューとテスト]
26    D --> E[イテレーション]
27    E --> B
28    D --> F[Vercelにデプロイ]
29```
30~
31### バイブコーディングを使うべきとき
32~
33バイブコーディングは以下に最適です：
34~
35- **デモとMVP**: アイデアを検証するためのプロトタイプを素早く構築する。
36- **ハッカソン**: わずか数時間で動作する製品を作る。
37- **サイドプロジェクト**: 数週間を投資せずに新しい技術を探索する。
38- **概念実証**: ステークホルダーや投資家に技術的実現可能性を実証する。
39~
40> **注意:** バイブコーディングはデモやプロトタイプには優れています。高いセキュリティとスケーラビリティが求められるプロダクション品質のアプリケーションには、生成されたコードの徹底的なレビューが依然として不可欠です。
41~
42## 2. 技術スタック：Claude Code + Supabase + Vercel
43~
44### Claude Code
45~
46Claude CodeはAnthropicのAIコーディングエージェントです。ターミナルで直接動作し、以下が可能です：
47~
48- コードベース全体を読み取り理解する。
49- ファイルの作成、変更、削除を行う。
50- ターミナルコマンドを実行する。
51- APIや外部サービスとやり取りする。
52- Gitでバージョン管理を行う。
53- エラーやバグを自律的にイテレーションして修正する。
54~
55```bash
56# Install Claude Code
57npm install -g @anthropic-ai/claude-code
58~
59# Start in a project directory
60cd my-project
61claude
62```
63~
64### Supabase（無料ティア）
65~
66SupabaseはオープンソースのFirebase代替で、以下を提供します：
67~
68- **PostgreSQLデータベース**: 完全なリレーショナルデータベース。
69- **認証**: メール、Google、GitHubなどでのログイン。
70- **RESTおよびリアルタイムAPI**: スキーマから自動生成。
71- **ストレージ**: ファイルや画像の保存。
72- **Edge Functions**: サーバーレス関数。
73~
74無料ティアの内容：
75~
76| リソース | 無料枠 |
77|----------|-----------|
78| データベース | 500 MB |
79| ストレージ | 1 GB |
80| 帯域幅 | 5 GB |
81| Edge Function呼び出し | 50万回/月 |
82| 認証ユーザー | 無制限 |
83| プロジェクト | アクティブ2件 |
84~
85### Vercel（無料ティア）
86~
87VercelはNext.jsアプリケーションに最適なデプロイプラットフォームです：
88~
89- GitHubからの**自動デプロイ**。
90- すべてのブランチとPRの**プレビューデプロイ**。
91- 最適なパフォーマンスのための**グローバルCDN**。
92- **サーバーレスファンクション**が含まれる。
93- 無料の**基本アナリティクス**。
94~
95無料ティアの内容：
96~
97| リソース | 無料枠 |
98|----------|-----------|
99| 帯域幅 | 100 GB/月 |
100| サーバーレスファンクション実行 | 100 GB時間/月 |
101| ビルド | 6,000分/月 |
102| プロジェクト | 無制限 |
103| デプロイ | 無制限 |
104~
105## 3. 初期セットアップ：環境の準備
106~
107### 前提条件
108~
109始める前に、以下を確認してください：
110~
111- **Node.js 18+**がインストールされていること。
112- **Git**が設定されていること。
113- **GitHub**アカウントがあること。
114- **Supabase**アカウント（[supabase.com](https://supabase.com)で無料）。
115- **Vercel**アカウント（[vercel.com](https://vercel.com)で無料）。
116- **Claude Code**がインストールされていること（`npm install -g @anthropic-ai/claude-code`）。
117~
118### ステップ1：プロジェクトの作成
119~
120ターミナルを開き、Claude Codeを起動します：
121~
122```bash
123mkdir my-demo-app && cd my-demo-app
124claude
125```
126~
127これで、Claude Codeに自然言語で指示を出し始めることができます：
128~
129```
130You: Create a Next.js 15 project with App Router, TypeScript, Tailwind CSS,
131and shadcn/ui. Also initialize a Git repository.
132```
133~
134Claude Codeは自動的に以下を実行します：
135~
136```bash
137npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir
138npx shadcn@latest init
139git init && git add . && git commit -m "Initial commit"
140```
141~
142### ステップ2：Supabaseの設定
143~
1441. [supabase.com](https://supabase.com)にアクセスして新しいプロジェクトを作成します。
1452. Settings > APIから**Project URL**と**anonキー**をメモします。
1463. Claude Codeを起動したターミナルに戻ります：
147~
148```
149You: Add Supabase to the project. Create a .env.local file with the variables
150NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Configure the
151Supabase client with SSR support for Next.js App Router.
152```
153~
154Claude Codeが完全な設定を作成します：
155~
156```typescript
157// src/lib/supabase/client.ts
158import { createBrowserClient } from '@supabase/ssr';
159~
160export function createClient() {
161  return createBrowserClient(
162    process.env.NEXT_PUBLIC_SUPABASE_URL!,
163    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
164  );
165}
166```
167~
168```typescript
169// src/lib/supabase/server.ts
170import { createServerClient } from '@supabase/ssr';
171import { cookies } from 'next/headers';
172~
173export async function createClient() {
174  const cookieStore = await cookies();
175~
176  return createServerClient(
177    process.env.NEXT_PUBLIC_SUPABASE_URL!,
178    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
179    {
180      cookies: {
181        getAll() {
182          return cookieStore.getAll();
183        },
184        setAll(cookiesToSet) {
185          cookiesToSet.forEach(({ name, value, options }) =>
186            cookieStore.set(name, value, options)
187          );
188        },
189      },
190    }
191  );
192}
193```
194~
195## 4. デモの構築：タスク管理アプリ
196~
197具体的なデモを構築しましょう：認証、完全なCRUD、モダンなインターフェースを備えた**タスク管理アプリ**です。
198~
199### データベーススキーマの定義
200~
201Claude Codeにスキーマ作成の指示を出します：
202~
203```
204You: Create a SQL migration for Supabase with the following tables:
205~
2061. profiles: id (uuid, FK to auth.users), username (text), avatar_url (text),
207   created_at
2082. projects: id (uuid), name (text), description (text), owner_id (uuid, FK
209   to profiles), created_at
2103. tasks: id (uuid), title (text), description (text), status (enum:
211   todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid,
212   FK to projects), assigned_to (uuid, FK to profiles), due_date (timestamp),
213   created_at, updated_at
214~
215Enable Row Level Security on all tables and create appropriate policies.
216```
217~
218Claude Codeが完全なマイグレーションを生成します：
219~
220```sql
221-- Create enum types
222CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
223CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');
224~
225-- Profiles table
226CREATE TABLE profiles (
227  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
228  username TEXT UNIQUE,
229  avatar_url TEXT,
230  created_at TIMESTAMPTZ DEFAULT NOW()
231);
232~
233-- Projects table
234CREATE TABLE projects (
235  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
236  name TEXT NOT NULL,
237  description TEXT,
238  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
239  created_at TIMESTAMPTZ DEFAULT NOW()
240);
241~
242-- Tasks table
243CREATE TABLE tasks (
244  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
245  title TEXT NOT NULL,
246  description TEXT,
247  status task_status DEFAULT 'todo',
248  priority task_priority DEFAULT 'medium',
249  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
250  assigned_to UUID REFERENCES profiles(id),
251  due_date TIMESTAMPTZ,
252  created_at TIMESTAMPTZ DEFAULT NOW(),
253  updated_at TIMESTAMPTZ DEFAULT NOW()
254);
255~
256-- Enable RLS
257ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
258ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
259ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;
260~
261-- Profiles policies
262CREATE POLICY "Users can view own profile"
263  ON profiles FOR SELECT USING (auth.uid() = id);
264CREATE POLICY "Users can update own profile"
265  ON profiles FOR UPDATE USING (auth.uid() = id);
266~
267-- Projects policies
268CREATE POLICY "Users can view own projects"
269  ON projects FOR SELECT USING (auth.uid() = owner_id);
270CREATE POLICY "Users can create projects"
271  ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);
272CREATE POLICY "Users can update own projects"
273  ON projects FOR UPDATE USING (auth.uid() = owner_id);
274CREATE POLICY "Users can delete own projects"
275  ON projects FOR DELETE USING (auth.uid() = owner_id);
276~
277-- Tasks policies
278CREATE POLICY "Users can view tasks in their projects"
279  ON tasks FOR SELECT USING (
280    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
281  );
282CREATE POLICY "Users can create tasks in their projects"
283  ON tasks FOR INSERT WITH CHECK (
284    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
285  );
286CREATE POLICY "Users can update tasks in their projects"
287  ON tasks FOR UPDATE USING (
288    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
289  );
290CREATE POLICY "Users can delete tasks in their projects"
291  ON tasks FOR DELETE USING (
292    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
293  );
294```
295~
296このマイグレーションはSupabaseダッシュボード（SQLエディタ）から直接実行するか、CLIで実行できます。
297~
298### TypeScript型の生成
299~
300```
301You: Generate TypeScript types from the Supabase database and save them to src/types/database.ts
302```
303~
304```bash
305npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts
306```
307~
308### ユーザーインターフェースの構築
309~
310ここがバイブコーディングの最も強力な部分です。Claude Codeに高レベルな指示を出します：
311~
312```
313You: Create a dashboard page for the task management app with:
314~
3151. Sidebar with navigation between projects
3162. Kanban view with 3 columns (Todo, In Progress, Done) with drag & drop
3173. Modal to create/edit tasks
3184. Header with user avatar and logout
3195. Modern design with shadcn/ui and Tailwind
320~
321Use data from Supabase with React Server Components where possible
322and Client Components only where interactivity is needed.
323```
324~
325Claude Codeがインターフェース全体をコンポーネントごとに構築します。
326~
327### 認証の追加
328~
329```
330You: Add a complete authentication system with:
331~
3321. Login page with email/password and GitHub login
3332. Registration page
3343. Middleware to protect authenticated routes
3354. Automatic redirect for unauthenticated users
3365. Automatic profile creation after registration
337```
338~
339Claude CodeがNext.jsのミドルウェアと認証ページを設定します：
340~
341```typescript
342// src/middleware.ts
343import { createServerClient } from '@supabase/ssr';
344import { NextResponse, type NextRequest } from 'next/server';
345~
346export async function middleware(request: NextRequest) {
347  let supabaseResponse = NextResponse.next({ request });
348~
349  const supabase = createServerClient(
350    process.env.NEXT_PUBLIC_SUPABASE_URL!,
351    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
352    {
353      cookies: {
354        getAll() {
355          return request.cookies.getAll();
356        },
357        setAll(cookiesToSet) {
358          cookiesToSet.forEach(({ name, value }) =>
359            request.cookies.set(name, value)
360          );
361          supabaseResponse = NextResponse.next({ request });
362          cookiesToSet.forEach(({ name, value, options }) =>
363            supabaseResponse.cookies.set(name, value, options)
364          );
365        },
366      },
367    }
368  );
369~
370  const { data: { user } } = await supabase.auth.getUser();
371~
372  if (!user && !request.nextUrl.pathname.startsWith('/auth')) {
373    const url = request.nextUrl.clone();
374    url.pathname = '/auth/login';
375    return NextResponse.redirect(url);
376  }
377~
378  return supabaseResponse;
379}
380~
381export const config = {
382  matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],
383};
384```
385~
386## 5. 高度なバイブコーディングパターン
387~
388### イテレーティブプロンプティング
389~
390効果的なバイブコーディングの秘訣は**イテレーション**です。すべてを1つのプロンプトで記述しようとしないでください。段階的に進めましょう：
391~
392```
393Step 1: "Create the base layout with header and sidebar"
394Step 2: "Add the project list in the sidebar with a button to create new ones"
395Step 3: "Create the Kanban view in the main area"
396Step 4: "Add drag & drop between columns"
397Step 5: "Implement the modal to create new tasks"
398Step 6: "Add toast notifications for user feedback"
399```
400~
401> **ヒント:** プロンプトが具体的でコンテキストに沿っているほど、結果は良くなります。Claude Codeはコードベース全体にアクセスできるため、新しい機能を一貫性を持って統合できます。
402~
403### エラーハンドリング
404~
405何かがうまくいかない場合（そしてそれは必ず起きます）、単純にこう言えます：
406~
407```
408You: I'm getting this error in the console: "TypeError: Cannot read property
409'map' of undefined" in the TaskList component. Fix it.
410```
411~
412Claude Codeがコードを分析し、問題を特定し、修正します。
413~
414### AIによるリファクタリング
415~
416```
417You: The Dashboard component has become too large. Split it into smaller,
418reusable components while maintaining the same functionality.
419```
420~
421### テスト
422~
423```
424You: Add tests with Vitest for utility functions and Playwright tests for
425the authentication and task creation flow.
426```
427~
428## 6. Vercelへのデプロイ：コードから世界へ
429~
430### ステップ1：GitHubへプッシュ
431~
432```
433You: Create an appropriate .gitignore, commit everything, and push to a new
434GitHub repository called "my-demo-app".
435```
436~
437```bash
438git add .
439git commit -m "feat: complete task management demo"
440gh repo create my-demo-app --public --push --source=.
441```
442~
443### ステップ2：Vercelの接続
444~
4451. [vercel.com](https://vercel.com)にアクセスし、「Add New Project」をクリックします。
4462. 先ほど作成したGitHubリポジトリをインポートします。
4473. 環境変数を追加します：
448   - `NEXT_PUBLIC_SUPABASE_URL`
449   - `NEXT_PUBLIC_SUPABASE_ANON_KEY`
4504. 「Deploy」をクリックします。
451~
452```mermaid
453flowchart LR
454    A[GitHub Push] --> B[Vercelビルド]
455    B --> C[自動デプロイ]
456    C --> D[公開URL]
457    D --> E[グローバルCDN]
458```
459~
460### ステップ3：カスタムドメインの設定（オプション）
461~
462Vercelは`my-demo-app.vercel.app`のような無料URLを提供します。カスタムドメインの場合：
463~
464```
465You: Add the configuration for a custom domain in vercel.json
466```
467~
468### プレビューデプロイ
469~
470GitHubでプルリクエストを開くたびに、Vercelは自動的にユニークなURLを持つ**プレビューデプロイ**を作成します。マージ前に変更を確認するのに最適です。
471~
472## 7. デモの最適化
473~
474### パフォーマンス
475~
476```
477You: Optimize the app's performance:
4781. Add loading states with Suspense and skeletons
4792. Implement caching with Next.js unstable_cache
4803. Optimize images with next/image
4814. Add SEO metadata for each page
482```
483~
484### Supabaseでのリアルタイム
485~
486デモで常に印象的な機能は**リアルタイム**です：
487~
488```
489You: Add realtime synchronization for tasks using Supabase Realtime.
490When a user updates a task, all other users should see the change
491in real time without refreshing.
492```
493~
494```typescript
495'use client';
496~
497import { useEffect, useState } from 'react';
498import { createClient } from '@/lib/supabase/client';
499import type { Task } from '@/types/database';
500~
501export function useRealtimeTasks(projectId: string) {
502  const [tasks, setTasks] = useState<Task[]>([]);
503  const supabase = createClient();
504~
505  useEffect(() => {
506    const channel = supabase
507      .channel('tasks-changes')
508      .on(
509        'postgres_changes',
510        {
511          event: '*',
512          schema: 'public',
513          table: 'tasks',
514          filter: `project_id=eq.${projectId}`,
515        },
516        (payload) => {
517          if (payload.eventType === 'INSERT') {
518            setTasks((prev) => [...prev, payload.new as Task]);
519          } else if (payload.eventType === 'UPDATE') {
520            setTasks((prev) =>
521              prev.map((t) =>
522                t.id === payload.new.id ? (payload.new as Task) : t
523              )
524            );
525          } else if (payload.eventType === 'DELETE') {
526            setTasks((prev) =>
527              prev.filter((t) => t.id !== payload.old.id)
528            );
529          }
530        }
531      )
532      .subscribe();
533~
534    return () => {
535      supabase.removeChannel(channel);
536    };
537  }, [projectId, supabase]);
538~
539  return tasks;
540}
541```
542~
543### ダークモード
544~
545```
546You: Add dark mode support with a toggle in the header.
547Use Tailwind dark classes and save the preference in localStorage.
548```
549~
550## 8. 効果的なバイブコーディングのベストプラクティス
551~
552### 1. プロンプトは具体的に
553~
554```
555❌ 「きれいなページを作って」
556✅ 「紫から青のグラデーションのヒーローセクション、アイコン付き3枚のカードの
557   機能セクション、オレンジ色のCTAボタンを持つランディングページを作成して」
558```
559~
560### 2. コンテキストを提供する
561~
562```
563❌ 「認証を追加して」
564✅ 「Supabase Authで認証を追加して。プロジェクトはNext.js 15 App Router
565   とTypeScriptを使用。メール/パスワードログインとGitHubのOAuthが欲しい。
566   @supabase/ssrのSSRパターンを使って」
567```
568~
569### 3. 小さなステップでイテレーションする
570~
571すべてを1つのプロンプトで構築しようとしないでください。段階的に進めましょう：
572~
5731. ベースレイアウト
5742. 一度に1つの機能
5753. スタイリングと仕上げ
5764. エラーハンドリング
5775. テスト
578~
579### 4. 生成されたコードをレビューする
580~
581バイブコーディングはコードを読まないということではありません。常にレビューしてください：
582~
583- **セキュリティ**: RLSポリシー、入力バリデーション、データサニタイズ。
584- **パフォーマンス**: N+1クエリ、不必要なクライアントサイドコンポーネント。
585- **ベストプラクティス**: プロジェクト構造、命名規則。
586~
587### 5. Gitを戦略的に使う
588~
589```
590You: Commit the changes with a descriptive message after each completed feature.
591```
592~
593これにより、何か問題が発生した場合にロールバックできます。
594~
595## 9. コスト：本当にすべて無料なのか？
596~
597各サービスのコスト内訳は以下の通りです：
598~
599| サービス | 無料プラン | 有料になるタイミング |
600|---------|-----------|-------------|
601| **Claude Code** | Anthropicプラン（月額20ドルから）またはAPIキーが必要 | 即時だが、価値は絶大 |
602| **Supabase** | 充実した無料ティア（2プロジェクト、500MB DB） | 無料ティアの制限を超えた場合 |
603| **Vercel** | 個人プロジェクト向け無料ティア | チームまたは商用利用の場合 |
604| **GitHub** | パブリック・プライベートリポジトリ無料 | エンタープライズ機能 |
605~
606> **注意:** Claude CodeはサブスクリプションまたはAPIクレジットが必要ですが、開発スピードに対するROIは驚異的です。デモやMVPの場合、総コストは約20ドルの範囲です。
607~
608### 無料のAI代替手段
609~
610コストを完全にゼロに抑えたい場合は、以下が使えます：
611~
612- **Cursor**（制限付き無料ティア）。
613- **GitHub Copilot**（学生とオープンソース向けに無料）。
614- **Codeium/Windsurf**（充実した無料ティア）。
615~
616## 10. デモからプロダクトへ：次のステップ
617~
618デモが公開されたら、次のように進めましょう：
619~
620```mermaid
621flowchart TD
622    A[ライブデモ] --> B{ユーザーフィードバック}
623    B --> C[プロダクトのイテレーション]
624    C --> D[プロダクト・マーケット・フィット]
625    D --> E[スケーリング]
626    E --> F[Supabase Proプラン]
627    E --> G[Vercel Proプラン]
628    E --> H[カスタムドメイン]
629```
630~
6311. **フィードバックを収集する**: デモを潜在的なユーザーと共有し、意見を集める。
6322. **迅速にイテレーションする**: バイブコーディングを使って要望された変更を実装する。
6333. **指標をモニタリングする**: Vercel AnalyticsとSupabaseダッシュボードが重要なデータを提供する。
6344. **必要に応じてスケールする**: 需要が検証されたときにのみ有料プランにアップグレードする。
635~
636~
637## 結論
638~
639Claude Code、Supabase、Vercelを使ったバイブコーディングは、記録的な速さでデモやMVPを構築するための強力な組み合わせです。以前は数週間の開発がかかっていたものが、驚くほど高い品質レベルで、わずか数時間で達成できるようになりました。
640~
641重要なのは、正しいマインドセットでバイブコーディングに取り組むことです。「コードが書けない」ということではなく、AIツールで**自分の能力を増幅する**ということです。基盤となる技術（React、SQL、認証、デプロイ）について知れば知るほど、AIエージェントを望む結果に導く効果が高まります。
642~
643ソフトウェア開発の未来はここにあり、始めるためのコストはかつてないほど低くなっています。デモを作成し、実際のユーザーで検証し、次の偉大なプロダクトを構築してください。
644~
645> **初めてのデモのチェックリスト：**
646>
647> - [x] Claude Codeのインストールと設定完了
648> - [x] データベーススキーマ付きのSupabaseプロジェクト作成完了
649> - [x] shadcn/ui付きのNext.jsプロジェクト初期化完了
650> - [x] 認証設定完了
651> - [x] 完全なCRUD実装完了
652> - [x] モダンでレスポンシブなUI
653> - [x] Vercelへのデプロイ完了
654> - [x] フィードバック用の共有可能なURL準備完了
655~