spinny:~/writing $ vim create-demo-claude-code-vibecoding.md
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```mermaid22flowchart LR23 A[アイデア] --> B[自然言語プロンプト]24 B --> C[Claude Codeがコードを生成]25 C --> D[レビューとテスト]26 D --> E[イテレーション]27 E --> B28 D --> F[Vercelにデプロイ]29```30~31### バイブコーディングを使うべきとき32~33バイブコーディングは以下に最適です:34~35- **デモとMVP**: アイデアを検証するためのプロトタイプを素早く構築する。36- **ハッカソン**: わずか数時間で動作する製品を作る。37- **サイドプロジェクト**: 数週間を投資せずに新しい技術を探索する。38- **概念実証**: ステークホルダーや投資家に技術的実現可能性を実証する。39~40> **注意:** バイブコーディングはデモやプロトタイプには優れています。高いセキュリティとスケーラビリティが求められるプロダクション品質のアプリケーションには、生成されたコードの徹底的なレビューが依然として不可欠です。41~42## 2. 技術スタック:Claude Code + Supabase + Vercel43~44### Claude Code45~46Claude CodeはAnthropicのAIコーディングエージェントです。ターミナルで直接動作し、以下が可能です:47~48- コードベース全体を読み取り理解する。49- ファイルの作成、変更、削除を行う。50- ターミナルコマンドを実行する。51- APIや外部サービスとやり取りする。52- Gitでバージョン管理を行う。53- エラーやバグを自律的にイテレーションして修正する。54~55```bash56# Install Claude Code57npm install -g @anthropic-ai/claude-code58~59# Start in a project directory60cd my-project61claude62```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```bash123mkdir my-demo-app && cd my-demo-app124claude125```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```bash137npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir138npx shadcn@latest init139git 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 variables150NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Configure the151Supabase client with SSR support for Next.js App Router.152```153~154Claude Codeが完全な設定を作成します:155~156```typescript157// src/lib/supabase/client.ts158import { 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```typescript169// src/lib/supabase/server.ts170import { 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_at2082. projects: id (uuid), name (text), description (text), owner_id (uuid, FK209 to profiles), created_at2103. 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_at214~215Enable Row Level Security on all tables and create appropriate policies.216```217~218Claude Codeが完全なマイグレーションを生成します:219~220```sql221-- Create enum types222CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');223CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');224~225-- Profiles table226CREATE 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 table234CREATE 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 table243CREATE 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 RLS257ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;258ALTER TABLE projects ENABLE ROW LEVEL SECURITY;259ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;260~261-- Profiles policies262CREATE 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 policies268CREATE 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 policies278CREATE 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.ts302```303~304```bash305npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts306```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 projects3162. Kanban view with 3 columns (Todo, In Progress, Done) with drag & drop3173. Modal to create/edit tasks3184. Header with user avatar and logout3195. Modern design with shadcn/ui and Tailwind320~321Use data from Supabase with React Server Components where possible322and 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 login3332. Registration page3343. Middleware to protect authenticated routes3354. Automatic redirect for unauthenticated users3365. Automatic profile creation after registration337```338~339Claude CodeがNext.jsのミドルウェアと認証ページを設定します:340~341```typescript342// src/middleware.ts343import { 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 property409'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 for425the 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 new434GitHub repository called "my-demo-app".435```436~437```bash438git 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```mermaid453flowchart LR454 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.json466```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 skeletons4792. Implement caching with Next.js unstable_cache4803. Optimize images with next/image4814. Add SEO metadata for each page482```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 change491in real time without refreshing.492```493~494```typescript495'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 = supabase507 .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) : t523 )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 Router565 と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```mermaid621flowchart TD622 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] モダンでレスポンシブなUI653> - [x] Vercelへのデプロイ完了654> - [x] フィードバック用の共有可能なURL準備完了655~
NORMAL · create-demo-claude-code-vibecoding.md [readonly]655 lines · :q to close