v0活用事例：プロトタイプ開発を爆速化してみた｜Vercelの生成UIで変わるフロントエンドの未来

顧客情報一覧テーブルと、検索フォーム、フィルターUIを含んだCRM画面を作成してください。

import { Card } from "@/components/ui/card";<br><br>export default function CRM() {<br>  return (<br>    <Card className="p-4"><br>      <h2 className="text-lg font-bold mb-2">顧客リスト</h2><br>      <input className="border p-2 mb-4" placeholder="名前で検索" /><br>      <table className="w-full"><br>        <thead><tr><th>氏名</th><th>会社</th></tr></thead><br>        <tbody><tr><td>山田 太郎</td><td>ABC株式会社</td></tr></tbody><br>      </table><br>    </Card><br>  );<br>}

import { Card, CardContent, CardHeader } from "@/components/ui/card";

export default function Dashboard() {
  return (
    <div className="grid gap-4">
      <div className="grid grid-cols-3 gap-4">
        <Card><CardHeader>Total Users</CardHeader><CardContent>1,203</CardContent></Card>
        <Card><CardHeader>Active</CardHeader><CardContent>987</CardContent></Card>
        <Card><CardHeader>New Signups</CardHeader><CardContent>43</CardContent></Card>
      </div>
      <div className="mt-6">
        <input className="border p-2 mb-4 w-full" placeholder="検索..." />
        <table className="w-full">
          <thead><tr><th>名前</th><th>会社</th><th>アクション</th></tr></thead>
          <tbody>
            <tr><td>佐藤 花子</td><td>XYZ Inc.</td><td><button>詳細</button></td></tr>
            <tr><td>鈴木 一郎</td><td>TechLab</td><td><button>詳細</button></td></tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}

import { useEffect, useState } from "react";
import { Card, CardContent, CardHeader } from "@/components/ui/card";

export default function Dashboard() {
  const [metrics, setMetrics] = useState({ users: 0, active: 0, signups: 0 });

  useEffect(() => {
    fetch("/api/metrics")
      .then((res) => res.json())
      .then((data) => setMetrics(data));
  }, []);

  return (
    <div className="grid grid-cols-3 gap-4">
      <Card><CardHeader>Total Users</CardHeader><CardContent>{metrics.users}</CardContent></Card>
      <Card><CardHeader>Active</CardHeader><CardContent>{metrics.active}</CardContent></Card>
      <Card><CardHeader>New Signups</CardHeader><CardContent>{metrics.signups}</CardContent></Card>
    </div>
  );
}

import { useState } from "react";

const customers = [
  { name: "佐藤 花子", company: "XYZ Inc." },
  { name: "鈴木 一郎", company: "TechLab" },
  { name: "高橋 健", company: "CodeWorks" }
];

export default function CustomerList() {
  const [keyword, setKeyword] = useState("");
  const filtered = customers.filter((c) => c.name.includes(keyword));

  return (
    <div>
      <input
        type="text"
        placeholder="検索..."
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
        className="border p-2 w-full"
      />
      <table className="w-full mt-4">
        <thead><tr><th>名前</th><th>会社</th></tr></thead>
        <tbody>
          {filtered.map((c, i) => (
            <tr key={i}><td>{c.name}</td><td>{c.company}</td></tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

import { useState } from "react";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";

const users = [
  { name: "田中 未来", company: "Future Inc.", email: "mirai@example.com" },
  { name: "佐々木 誠", company: "DataEdge", email: "sasaki@example.com" }
];

export default function ModalExample() {
  const [selected, setSelected] = useState(null);

  return (
    <div>
      {users.map((user, i) => (
        <div key={i} className="flex justify-between mb-2">
          <span>{user.name}</span>
          <Dialog>
            <DialogTrigger asChild>
              <button onClick={() => setSelected(user)} className="text-blue-600">詳細</button>
            </DialogTrigger>
            <DialogContent>
              <h2 className="text-lg font-bold mb-2">{selected?.name}</h2>
              <p>会社: {selected?.company}</p>
              <p>メール: {selected?.email}</p>
            </DialogContent>
          </Dialog>
        </div>
      ))}
    </div>
  );
}

npx create-next-app@latest v0-example --typescript
cd v0-example

npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

npx shadcn-ui@latest add card
npx shadcn-ui@latest add dialog

// app/page.tsx または pages/index.tsx
import Dashboard from "@/components/Dashboard";

export default function Home() {
  return <Dashboard />;
}

npm run dev