webエンジニアの風速です。
以前Vercelのサービスを触ってみたのですが、今回はVercelが提供しているv0というサービスを使ってみようと思います。
v0とは
v0は、AIを搭載したVercelによる生成型ユーザーインターフェースシステムで、shadcn/uiとTailwind CSSに基づいて、コピペしやすいReactコードを生成できるサービスです。チャットでの対話形式でReactのコードを生成してくれて、プレビューまで確認できます。
使ってみた
今回はfreeプランで使用します。freeプランだと月に200クレジットという制限があり、初回の生成では30クレジット、追加の生成では10クレジット消費されます。
画面は以下のような感じです。
Generate a SaaS pricing calculatorというボタンがあったので押してみました。
ファイルが生成されて、以下のようなUIもプレビューできました。
実際にjs部分も動きます。
日本語でも動作します。実際に計算機を作ってと入力してみると、四則演算ができる計算機を作成してくれました。UIもちゃんと作ってくれています。
数字のボタンが見えにくかったので、お願いしてみると変更してくれて、変更箇所もチャット部分に表示してくれています。
バージョンの管理もされています。
右上のShareボタンからPublishを押すとURLが生成されて、UIを実際に確認することができます。
左のタスクバーからヒストリーも確認することができます。
まとめ
今回はv0をfreeプランで使用してみました。freeだとクレジットの関係でガッツリは使用できませんでしたが、UI部分やjs部分もしっかり作成してくれていて驚きました。コードを実際に見てみると、動き部分は結構力技でされていたりするので、そのまま使用することは難しいですが、パッと動くものが出てくるので、モックアプリやどんなUIにしよう。などの補助には重宝しそうだなと思いました。
以上、風速でした。
参考