V0使ってみた

概要

V0というAI生成ツール使ってみました。

V0とは

Vercelが開発したAIツールで、テキストを入力することでWebページのUIデザインやコードを自動的に生成することができます。
React(Tailwind)を生成され、リアルタイムプレビューで即座に確認ができます。

デモ

今回は簡単なカンバンアプリを試しに作成してみました。

生成されたものの修正や要素の追加などもできます。
プロファイルごとにタスクを管理できるようにしたいと入力したら、プロファイルの作成、切り替え、削除もできるコードが生成されました。割と大雑把なプロンプトでもいい感じに生成してくれそうです。

CLIでの取り込み

Next.jsプロジェクトにコンポーネントとして取り込むこともできます。

まず、Next.jsのプロジェクト作成をします。

npx create-next-app@latest my-app --typescript --tailwind --eslint

以下のコマンドでV0のセットアップをします。

npx v0@latest init

最後に生成したコンポーネントを取り込みます。
画面右上のコンソールアイコンのボタンを押すとコマンドがコピーできます。

あとは、src/app/page.tsxでimportしてコンポーネントを配置したら表示できます。

まとめ

なんとなくのイメージを入力するだけでも最低限必要な要素が入ったものが生成されるところは便利だなと感じました。
デザイナーでなくてもある程度のものならプロンプトで指示するだけですぐ形にできるのはいいですね。