v0でログインフォームを作成する

はじめに

vercelのv0でログインフォームを作成してみようと思います。
v0は自然言語からReactで書かれたフロントエンドのUIを作成することができます。
ドキュメントはこちらです。

ログインフォームの作成

v0にログインするとプロンプトを入力する画面がでてきますので、作成したいプロンプトを入力します。

無料版だと「Public」で生成されるので注意してください。

「Submit」ボタンを押すと生成案として3つ出力されます。

右上の「Code」ボタンをおすとコードも見れます。

出力された案から微修正する場合は下部に入力して指示をだせます。

「Submit」して生成しなおします
左の「History」から過去の生成に戻ることも可能です

文章だけで説明が難しい場合は「Pick and Edit」ボタンで直接選択できます。

ホバーしてクリックすると選択できるようになります。
ボタンを赤色に変えてみます。

場所は変わってしまいましたが赤色になりました。

Next.jsに追加する

Next.jsのプロジェクトで下記を実行し初期設定をします。
こちらは後述のコマンドをうったときに下記を実行するようにエラーメッセージに表示いましたが、
ドキュメントでは代わりにshadcn/ui をインストールしてくださいと書かれていました。
おそらくどちらでも大丈夫だと思います。

npx v0@latest init

初期設定をするとcomponents.jsonが生成されます。

components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/app/globals.css",
    "baseColor": "gray",
    "cssVariables": false
  },
  "aliases": {
    "utils": "@/lib/utils",
    "components": "@/components"
  }
}

次にv0の「Code」ページのコマンドをコピーします。

対象のディレクトリで実行するとファイルが生成されます。
実行時にコンポーネントの名前も指定できます。
add以降は一意のidになります

生成すると下記のファイルが生成されます。

.
├─component
│      login.tsx
│
└─ui
        button.tsx
        card.tsx
        input.tsx
        label.tsx

/**
 * This code was generated by v0 by Vercel.
 * @see https://v0.dev/t/txpZJWTZrGJ
 */
import { CardTitle, CardDescription, CardHeader, CardContent, CardFooter, Card } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export function Login() {
  return (
    <Card key="1" className="mx-auto max-w-sm bg-green-500">
      <CardHeader className="space-y-2">
        <CardTitle className="text-2xl">Login</CardTitle>
        <CardDescription>Enter your credentials to access your account.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="id">ID</Label>
          <Input id="id" placeholder="ID" />
        </div>
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <Label htmlFor="password">Password</Label>
            <Link className="ml-auto inline-block" href="#">
              Forgot Password?
            </Link>
          </div>
          <Input id="password" placeholder="Password" type="password" />
        </div>
      </CardContent>
      <CardFooter className="flex">
        <Button className="bg-red-500">Sign In</Button>
      </CardFooter>
    </Card>
  )
}

ページで確認

作成されたコンポーネントを確認してみます。

/sample/page.tsx

import { Login } from "@/components/component/login"

const SamplePage: React.FC = () => {
    return <Login />
}
export default SamplePage

正常に表示されました!

おわりに

本記事を読んで頂きありがとうございました。
今回はvercelのv0を利用してログインフォームを作成してみました。
画像からも生成できたりするので、今後そちらもためそうと思います。
v0のトップ画面では他の人の生成物やプロンプトもあるので、よりよいプロンプトを見つけるのに役立ちそうです。
今後、このような生成AIをどんどん使っていきたいなと思うサービスでした。