言葉でUIを生成する。v0とは利用するには早速試してみるNext.jsに取り込むおわりに言葉でUIを生成する。VercelのジェネレーティブUI「v0」を触ってみた#Vercelおーしろ2023.12.07v0とは公式サイトには下記のように説明されていました。AIを活用したVercelのジェネレーディブUIシステムです。CSSに基づいて、コピー・ペーストしやすいReactコードを生成し、プロジェクトで使用できます。「ログインフォーム」などと入力するとReactで利用できるログインフォームのコンポーネントを生成してくれるシステムのようです。beta版でwaitlistに登録する必要があります。私の場合は利用できるまでに約2ヶ月ほどかかりました。下記のリンクからログイン、またはアカウントを作成し、実際にUIを生成しようと文言を入力し生成実行をすると、waitlistへの登録ボタンが表示されるのでそこから登録する流れとなります。https://v0.dev/早速試してみる今回は無料版で試していきます。その他のプランはこちらから確認できます。今回試してみたものは下記のリンクから、利用例として実際に見ることができるのでぜひ興味のある方は見てみてください。https://v0.dev/r/uZhdg6EZw7m「クレジットカードの入力フォーム」を作成してみます。form」と入力してEnter。10秒ほど待つと画面下の部分に3つのコンポーネントが生成されました。この中から一つを選択して細かな調整をしていく流れのようです。他の候補はドロップダウンリストで生成されていました。</>をクリックするとReactのコードも確認できます。後ほど実際にNext.jsのアプリに導入してみたいと思います。部分的に修正をすることもできるようなので、Submitボタンに送信アイコンを追加してみます。icon」と入力してみます。数秒待つといい感じに送信アイコンを追加してくれました。次に背景色をカラーコードで指定してみます。#9e9e9e」と入力してみます。こちらもいい感じに対応してくれました。言葉で命令するだけでなく、直接コードを修正することもできます。Japanese」と入力し日本語に変換することもできました。ちなみに画面左には変更履歴が表示され一つ前の状態に戻すことなども可能です。生成系では結果が「思ったのと違う。」となることが時々あるのでこの機能はとてもありがたいです。Next.jsに取り込む実際にNext.jsのアプリに導入してみたいと思います。>をクリックするとReactで実装されたコードが表示されるので、そのままコピーしてReactのアプリケーションに貼り付けて利用します。CLIで取り込むCLIで取り込む方法を実際に試してみたいと思います。下記のコマンドでNext.jsのアプリケーションを作成します。--eslintv0をセットアップします。>をクリックしたときに表示されるコマンドを実行すると、Webで生成したコンポーネントがインストールされます。Mzq5X9x7ED6途中でコンポーネントの名前を何にするか聞かれたので「CreditCardForm」としました。自動的にsrc/components配下にcredit-card-form.tsxが作成されました。src/app/page.tsxでimportすると、localhostmtのNext.jsアプリでも無事に表示することができました。CLIではコマンドを実行するのとコンポーネント名を決めるだけでスムーズに取り込むことができました。おわりにVercelのUI生成システム「v0」を利用することで、デザイナーやエンジニアでなくても「〇〇な感じのデザインでUIを作成したい」といったときにすぐに形にできるのがとてもいいなと感じました。実際のReactアプリケーションなどにもすぐに取り込むことができるCLIが便利でした。公式のFAQによると、現在はReact(Tailwind)のみですが今後はSvelte、Vue、プレーンHTMLなどでもサポートする予定とのことです。今後のアップデートにも注目していきたいと思います。