【AI】Vercelのv0でアプリ生成 → Next.jsプロジェクト生成まで

v0とは

Next.jsを運営しているVercel社のAIコード生成サービス「v0」

去年リリースされたサービスで、ほぼ触れていなかったのですが、

どんどんアップグレードされていて、
AIで生成したコードを１コマンドでNext.jsプロジェクトに反映できるとのことで、

基本的な操作を試してみました。

Vercelがやっているとのことで、サポートされているのはReact, Next.jsのフロントエンドコードのみです。

他の言語や、Vueなど他のJSフレームワークにも対応していないです。

プロンプトでアプリを開発

にアクセスします。

登録が必要で、会話数に制限ありですが、無料で試せます。

登録が完了すると以下の画面になるので、

「タスク管理アプリを作って」と指示してみます。

すると、画面が２分割され、

• 左側にはアプリ構築の手順を説明してくれ

• 右側にはReactのコードが生成されていきます。

生成が終わると、右側の画面で「Preview」タブを選択すると、そのコンポーネントの動作を確認することができます。すごい。

これまではコンポーネント単体で動作確認するにはStorybookなどカタログツールが必要でしたが、
さすがホスティングサービス提供者ということで、この機能だけでも重宝しそうです。

この画面内で、実際にタスク管理アプリ操作することもできました。

１ファイル内に全てのコードが記述されていたので、

と指示してみます。

すると、2つのファイルが生成されて、分割されました。

おそらくVercel上にホスティングされているReact, Next.jsのプロジェクトコードを学習しているので、めちゃくちゃ精度が高いです。

できたコードからNext.jsプロジェクトを生成

完成したら、このコードからNext.jsアプリを生成してみます。

画面右上に、「Add to Codebase」のボタンがあるので、
それを押すと、npx shadcn@latest add ~~ のコマンドが表示されます。

このコマンドで、作成したコードでNext.jsアプリを作れるようです。

このコマンドをコピーして、ターミナルに打ち込みます。

アプリ名など聞かれるので、答えていきます。

生成が完了し、エディタで開いてみると、先ほど生成したコードがちゃんとプロジェクト内に格納されています。

あとは、Next.jsをローカルで起動するコマンド npm run dev すると、

ブラウザ上で、アプリを起動できます。

しっかり、動作しました。

めちゃくちゃすごいですね。

他にも、

• フィグマのデザインと連携して、デザインをReactコードに変換する機能

• 画像からReactコードに起こしてくれる機能

• 作成したコードをそのままgithubにpushする機能

などなどあるようで、すごい時代になってきたなと感じます。

ただ現状、もちろん生成してくれるのはフロントエンドだけです。

今回のタスク管理アプリもブラウザをリロードするとデータが消えてしまいます。

でも、VercelはDBやストレージ、認証機能まで提供を始めているので、
将来的には、バックエンドも含めてAIで作れるようになるかもしれませんね。

まとめ

v0、めちゃくちゃすごいですが、

正直まだ、
機能要件や非機能要件が複雑に絡み合う実務タスクの中では、v0だけで開発というのは全然無理だなと感じました。

（サーバーの要件を伝えてコンポーネント構成の改修を求めましたが、そういうのは難しいようでした）

でも、今後のアップデート次第ではそういう未来も見えてくるかもと感じたので、引き続き追っていこうと思います。