v0とは？
v0は、Vercelが提供するAI駆動型のUI生成ツールです。
自然言語のプロンプトからReactやNextのコードを自動生成でき、開発者はテキストや画像を使って素早くUIを作成できます。
実際に使ってみる
1. Vercelアカウントの作成
v0 を利用するには、Vercel のアカウントが必要です。既にアカウントを持っている場合は、サインインしてください。
2. Figmaと連携
v0 ではテキストや画像の入力からコードを生成できます。1週間前に確認したときは、Figmaを使うにはプレミアムプランが必要でしたが、今回触ってみるとフリープランでもFigmaとの連携ができたので早速試してみます。
サインインをするとFigmaに飛ぶので、アクセスを許可します。
作成したいデザインにフォーカスを当て「Share」ボタンをクリックし、「Copy link」を押してURLを取得します。今回はチャット画面で試してみます。
3. コード生成
v0に戻り、URLを貼り付け、「Next」をクリックします。
Figmaがインポートされ、使用しているカラーなど正しく認識されています。「Confirm」を押すとコードが生成され始めます。
あっという間にコードが自動生成されました！「Preview」ボタンで画面を確認できます。
送信ボタンがなかったため、追加でチャットをし編集してもらいました。
4. コードの確認と修正
Add to Codebaseボタンを押し、表示されたポップアップ内のコマンドラインをコピーします。こちらは後ほど使用します。
次に、生成したコードをローカル環境で確認するために、Cursorを起動します。
Cursorとは？
AIアシスト機能が搭載されたコードエディタで、コードの補完・修正・リファクタリングを AI がサポートしてくれます。VS Codeはオープンソースになっており、Cursorはそのエディタをforkして作られています。
先ほどコピーしたものをターミナルに貼り付けると、プロジェクトが作成されます。
% npx shadcn@latest add "https://v0.dev/chat/b/b_iWjcHmQigVj?token=..."
✔ Creating a new Next.js project.
✔ What is your project named? … v0_futekoi_app
✔ Writing components.json.
✔ Created 2 files:
- tailwind.config.js
- chat.tsx
v0は shadcn/ui というUIライブラリでコンポーネントが出力されます。先ほどのように shadcu の add コマンドを使うと、プロジェクトにコンポーネントと依存関係を追加することができます。 https://ui.shadcn.com/docs/cli
chat.tsx のファイル構成が間違っていたり、送信ボタンを押しても画面に反映されなかったため、Cursor の Composer 機能を使って修正をしていきます。 Composer は 「Command + I 」で開かれます。関連するファイルを選択し、プロンプトを入力します。
localhost:3000/chat で表示でき、メッセージも送信されるようになりました！
