v0.dev de : KNN KandaNewsNetwork 4knn.tv

ブイオー？　ブイゼロ？

https://v0.dev/

v0は、Vercelが提供するAI駆動のUI生成ツールで、テキスト入力だけでWebページのUIデザインとコードを自動生成。

デザインやプログラミングの知識がなくても、プロレベルのWebサイトやアプリを簡単に作成できるという。

v0はshadcn/uiとTailwind CSSを用いてReactコードを自動生成します。

これにより、デザイン性の高いUIを簡単に実装でき、見た目にもこだわったアプリケーションを作成することが可能です。

Reactを使った開発において、デザインの自由度が高まります。

https://miralab.co.jp/media/v0/

早速ためしてみた…。

■ライドシェアのユーザーとドライバーの日時と場所のマッチングのUIをデザインしてください

https://v0.dev/chat/K5QSI0QIQai

たったの一行の命令で、デザインプロトタイプが完成！

７３行のプログラミング

import { useState } from ‘react’
import { Calendar } from “@/components/ui/calendar”
import { Input } from “@/components/ui/input”
import { Button } from “@/components/ui/button”
import { Avatar, AvatarFallback, AvatarImage } from “@/components/ui/avatar”
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from “@/components/ui/card”
import { MapPin, Calendar as CalendarIcon, Clock, Star } from “lucide-react”

export default function Component() {
const [date, setDate] = useState<Date | undefined>(new Date())

const drivers = [
{ id: 1, name: “田中太郎”, rating: 4.8, car: “トヨタプリウス”, plate: “品川 500 あ 1234” },
{ id: 2, name: “佐藤花子”, rating: 4.9, car: “ホンダフィット”, plate: “横浜 300 い 5678” },
{ id: 3, name: “鈴木一郎”, rating: 4.7, car: “日産リーフ”, plate: “川崎 700 う 9012″ },
]

return (
<div className=”max-w-4xl mx-auto p-4″>
<h1 className=”text-2xl font-bold mb-4″>ライドシェアマッチング</h1>

<div className=”grid grid-cols-1 md:grid-cols-2 gap-4 mb-6″>
<div>
<h2 className=”text-lg font-semibold mb-2″>日時を選択</h2>
<Calendar
mode=”single”
selected={date}
onSelect={setDate}
className=”rounded-md border”
/>
</div>

<div>
<h2 className=”text-lg font-semibold mb-2″>場所を入力</h2>
<div className=”space-y-2″>
<Input placeholder=”出発地” />
<Input placeholder=”目的地” />
</div>
</div>
</div>

<h2 className=”text-lg font-semibold mb-2″>利用可能なドライバー</h2>
<div className=”space-y-4″>
{drivers.map((driver) => (
<Card key={driver.id}>
<CardHeader>
<div className=”flex items-center space-x-4″>
<Avatar>
<AvatarImage src={`/placeholder-user.jpg`} alt={driver.name} />
<AvatarFallback>{driver.name[0]}</AvatarFallback>
</Avatar>
<div>
<CardTitle>{driver.name}</CardTitle>
<CardDescription>
<div className=”flex items-center”>
<Star className=”w-4 h-4 text-yellow-400 mr-1″ />
{driver.rating}
</div>
</CardDescription>
</div>
</div>
</CardHeader>
<CardContent>
<p className=”text-sm text-gray-600″>{driver.car} – {driver.plate}</p>
</CardContent>
<CardFooter>
<Button className=”w-full”>予約する</Button>
</CardFooter>
</Card>
))}
</div>
</div>
)
}