v0 とやらがすごいらしいので使ってみた
v0 とは
v0 とは、
- 最新の Next.js、React、Web 知識
- クライアントコンポーネントのサポートの改善
- Framer-motion などの npm パッケージを実行する機能
- より高速で信頼性の高いストリーミング
を備えた LLM chat サービスらしいです。
平たく言うと Next.js, React特化の claude っぽいものみたいでした。
また、Public Beta ですが現状は無料で claude で言う Artifact のようなデモ表示機能が利用できます。
本記事は主にそのデモ表示機能使ってみた紹介です🙌
こちらは公式のデモで全て英語でやり取りしてましたが日本語でも利用できるようであったので試してみました。
v0 にコード作成とデモをやってもらう
作成させたのは、以下のようなアプリケーションです。
- 20x20 マスをグリッド表示し、それぞれのマスをクリックするとカラーピッカーが表示され色を選択できる
- それぞれのマスは最初は白色で、カラーピッカーで色選択された場合はその色を表示する
- 「出力」ボタンを押すとそれぞれのマスで表示されている色がカンマ区切りで表示できる
数回やり取りして、30分かからないぐらいで以下のような機能まで実装してデモを見せてもらいました。
だいたい既存でサンプルコードが豊富そうなものでは面白くなかったので 🤣
の着色操作を楽にできそうなアプリ(のさらに根幹となる機能の部分)を作ってもらうことにしましたが完全に意図通りのアプリケーションを作成し、デモを見せてくれました。これはすごい 🎉
ちなみに以前 claude で同じことやろうとしたのですが十数回ほどやり取りしても完成しませんでした...(クリックしても反応しなかったりカラーピッカーの選択結果が反映されなかったり)
また、当然のようにチャットでやり取りした履歴は共有できます。(private/public選択できる)
あとがき
何より、質問投げてからコード生成・デモ表示まで大して時間かからないのが凄いですね...そこらへんは流石 Vercelといったところでしょうか。
DB 操作や APIコールを伴うアプリケーションを作ろうとしたらどうなるのか気になります。
アプリケーションを作るだけではなく、Next.js, React, Vercel について はかなり精度の高い回答が期待できるのでそういった用途を期待する人も是非使ってみてはいかがでしょうか？
Discussion