UI生成AI『v0』
v0はVercel Labs社が開発したウェブデザインに特化した生成AIツールです。
WebサイトやWebアプリはもちろんプレゼン用のスライドや図解資料など様々なものをチャット形式でアシスタントが生成してくれます。
Anthropicの『Artifacts』と似ていますが、v0の特徴はReactを利用した生成に特化しており、私の体感ですがArtifactsより見た目が綺麗なUIを作ってくれます。
ただこのReactがくせ者でhtmlファイルならひょいとブラウザで閲覧ができますが、TypeScriptファイルとなるとそうはいきません。（なのでそこまでは大きく話題にならないのかもしれません）
ということで今回はv0で生成したWebサイトを自分のPC（ローカル）に移すとどんな手順になるかを紹介したいと思います。
※私もReact勉強の身であることにご留意ください。
PCのOSはWindows11です。
v0を利用する
最初にv0でWebページを生成してもらいます。
v0の利用方法は色々な記事がありますのでこちらなどの方が参考になるかと思います。
ざっと紹介します。今回は『セミナーの応募フォーム』を生成してもらいます。
こんな感じで生成してくれました。ボタンの追加など要望も聞いてくれます。フォームはGoogleフォームなど色々なツールが存在しますが、こちらの方がおされな気がしますね。
※実際に利用するにはバックエンド側の処理が必要です
では今度はPC（ローカル）側の準備に移ります。
PCでの準備
最初にPCにNode.jsをインストールして下さい。（初めての方）
こちらに詳しく記載があります。
ではReactプロジェクトを作成します。
コマンドプロンプトまたはPowershellを起動して、フォルダ作成されても困らない場所にcdコマンドで移動して下さい。（右クリック"ターミナルで開く"が移動不要で楽です）
移動したら次のコマンドを実行してください。
npx create-next-app@latest
reactに入門するとViteを使えと言われ「npm create vite@latest」で作成しろと言われることが多いかと思いますが、v0は主にshadcnという外部コンポーネントを利用して作られておりViteだとちょっと面倒です。（公式の手順を見てもらえればわかると思います）
「今Viteで作っているアプリに追加したい」ではなく、ちょっと試してみたい方はNext.jsで作成することをお勧めします。
長くなりましたが、上記コマンドを実行すると色々聞かれるかと思います。
最初はプロジェクト（フォルダ）名なので適当に入力して下さい。
その後も色々聞かれます。私は以下を選択しました（青字が選択）。何を聞かれているかはこちらを参考にして下さい。
基本的にはデフォルトで6番目のimport aliasはYesにしました。こちらの方がimportのパスを気にしなくて済むかと思います。
(訂正)デフォルトの記号について聞いているので6番目はそのままNoで構わないと思います。
これが終わると入力した名前でフォルダができていると思います。こちらにコマンドで移動して下さい。
cd [作成したフォルダ名]
これで一度試しにプロジェクトを起動してみてください。
npm run dev
「～ http://localhost:3000 ～」と出てくると思いますのでCtrlを押しながらクリックして表示してみて下さい。エラーとならず"Next.js"と真ん中に表示されたページが出れば成功です。（成功したらCtrl+cで終了してください。）
ではこれからv0で生成したものを利用してみたいと思います。
shadcnコンポーネントの追加
v0のページの右上のコードマークをクリックしてください。
そして出てきたコマンドをコピーして下さい。
これをコマンドで実行。（カレントディレクトリはプロジェクトのフォルダになっていることを確認して下さい。）
色々聞かれますがYes、あとはそのままでいいと思います。（私はStyleだけをDefaultに変えました）
実行後にsrc\components下にファイルができています。
※これはVSCodeで[フォルダを開く]から作成したプロジェクトフォルダを開いています。一例としてVSCodeで表示していますが、VSCodeがなくても利用できます。
components直下にv0で生成したファイル。（フォルダ名にある通り"コンポーネント"となっており、コンポーネントはWebページを作るための"部品"のようなものです。）uiフォルダ下にshadcnのコンポーネントが配置されています。
詳細にはわかりませんが、コピーしたコマンドは「利用するshadcnコンポーネントを一括でインストール」＋「生成したコンポーネントを追加」をしてくれているようです。
なのでこのコマンドを使わない場合は"npx shadcn@latest add button"など手動で追加する必要があるようです。
ではこれを動かしてみたいと思います。
まずプロジェクトフォルダのsrc/app下にある page.tsx の中身（デフォルトの内容）を削除して以下だけにして下さい。
export default function Home() {
return (
<div>テスト</div>
);
}
まだ中身はテストです。
これでもう一度プロジェクトを立ち上げて下さい。http://localhost:3000 にアクセスして"テスト"と表示されればOKです。
npm run dev
では生成したコンポーネントを追加します。ここからはファイル名などご自身のものに合わせて下さい。
import { SeminarRegistrationComponent } from "@/components/seminar-registration"
export default function Home() {
return (
<SeminarRegistrationComponent/>
);
}
私が生成したファイル名は"seminar-registration.tsx"なのでインポート元が"@/components/seminar-registration"となっています。コンポーネント名"SeminarRegistrationComponent"はこのtsxファイル内にある export function XXXXXX() と書かれた関数の名称になります。
※export default function XXXX となっている場合はdefaultを消すかpage.tsxのimport後の{}（中身そのまま中括弧だけ）を消してください
returnの中身にもコンポーネントを追加してあげてください。
で、これでソースを保存してhttp://localhost:3000 が正常に表示できていればOKです！
ただそのままでは上手くいかない場合もあります…
私の場合use-toastの配置場所がおかしかったようで修正が必要でした。
- import { toast } from "@/components/ui/use-toast"
+ import { toast } from "@/hooks/use-toast"
※use-toast.tsの場所を移動しても大丈夫かと思います
上手く行くとこんな感じで表示できます。
おわりに
これは一例ですので、生成ファイルによってすんなりいかない場合もあるかもしれません。ただ環境設定も含めて勉強だと思い頑張りましょう。
「AIは幻滅期」 なんて話もありますが、v0を使うとやっぱりまだまだ「生成AIすごいなぁ…」と思ってしまいました。素人でもこんなWebデザインができるようになるとは。
ただ今後は画像生成と同じように 「このページはおれのパクリだ！」 とWebデザイナーから訴訟される未来もやってきそうです。ちょっと怖いですねw
続編
（2024/10/30）デプロイ編投稿しました！アプリを公開したい方はぜひ！
おまけ
非公式XAPIのtwikitを使って、ユーザ名からXに投稿された画像・動画一覧が表示できるサイトを作ろうとしています。（データはダミーです）
こんな綺麗なUIにできると思いませんでした。v0のおかげです。
完成したら公開したいと思います。