Reactで動くUI作ってくれるv0使ってみた Part1

はじめに
使い方
生成される内容について
料金プランについて
その他
- 学習データの利用状況
- React以外のサポート
おわりに
余談:shadcn/uiとは?
- Radix UIとは
余談:Vercelとは?

はじめに

お久しぶりです、筆者です。

OpenAI社がChatGPTを公開(2022/11)してからもう2年が経とうとしてます。
あれから文章だけでなく、画像、コーディング、はては動画まで生成AIを用いてサポートしてくれるツールが続々と出てきましたね。
振り返ればたった2年でここまで…凄い進歩です。

そんな最中、気になるツールがリリースされ。 v0.dev

『v0』という、shadcn/uiを用いてテキストからUIを生成してくれるツールです。
※shadcn/uiって何?という方は余談にまとめてますので参考に

アカウント登録さえすれば(少しだけ)無料で使える上、生成するコードはURLベースで共有可能です。
おまけに生成されたコードはReactやNext.jsで使用可能な上、画像ベースでのやり取りも可能だとか！

過去にも似た様なサービスは幾つか出てた記憶がありますが、こちらは無料で使えるとの事で…。
少しだけ使ってみたので、そのレポートも含め使い方を備忘がわりに記そうかと。

それではいきましょう٩( ‘ω’ )و
※使ったレポートを読みたい場合はPart2から参考に

使い方

v0はVercelという企業が提供しているサービスで、使用には「Vercel」のアカウントが必要です。
※Vercelって何?という方は余談にまとめてますので参考に。

Vercelアカウントはメルアド経由でも作れますが、Github, GitLab, Bitbucketアカウントから連携して作る事も可能です。
作った後はこちらにアクセスすれば、チャット入力欄が出てくるので:
"v0.dev/chatのTOP画面"

後はChatGPTを使う時みたいに、文字を入力すればそれに応じてコードを作ってくれます:
"v0.devで会話した後の画面"

右側の「Code」を押せば、生成されたコンポーネントのコードをWeb上から見れますし:
"v0.devで出力されたコード"

「Install」を押せば、既存のshadcn/uiプロジェクトに1コマンドで生成も出来るようで！
"shadcn/uiプロジェクトへのInstallコード出力画面"

更に「Fork」を押せば、その時点で出来上がってるコードをベースに別チャットを開いて改善する事もできます:
"v0.devで生成したコードをForkした後の画面"

「Publish」を押せば、生成したコードをURLベースで共有も可能になります。
※チャット内容は共有されない仕様っぽいのでご安心を

素晴らしく至れり尽くせりな機能が揃っていますね…。
個人的には「Fork」機能が面白いと思いました、作ってもらった中で「このパターンとこのパターンを試したい」となった時に使えそうです。

生成される内容について

v0で生成される内容についても触れましょう。
特別に「こう出力しろ」と問い掛けなくても、v0はコードを生成する以外に:

生成したコードの概要
コードのメリット
機能の追加案

…まで述べてくれます。

特に「機能の追加案」を述べてくれるのが非常によく…。
適当なアイデアを放り込んだ後、v0が提示してくれた案をプロンプトとして入れていけばそれっぽいものが出来ちゃいます！

以下は、v0へ結果をそのまま貼り付けたものです:

回答:

フリーランスの方が稼働時間を管理するのは非常に重要ですね。
効率的に時間を記録し、クライアントに報告するためのシンプルなタイムトラッカーのUIを作成してみましょう。
以下は、基本的な機能を持つReactコンポーネントです。

このコンポーネントは以下の機能を提供します：

1. プロジェクト名の入力
2. 稼働時間の計測（開始/停止）
3. 経過時間のリアルタイム表示
4. タイマーのリセット

このようなツールを使用することで、以下のメリットがあります：

1. 正確な稼働時間の記録: 開始と停止を簡単に行えるので、実際の作業時間を正確に記録できます。
2. プロジェクト別の管理: プロジェクト名を入力できるので、複数のクライアントや案件の稼働時間を個別に管理できます。
3. 透明性の向上: 詳細な稼働時間記録により、クライアントとの信頼関係を築きやすくなります。
4. 効率の可視化: 時間の使い方を把握することで、作業効率の改善につながる可能性があります。

実際の使用では、このような基本的なUIに加えて、以下のような機能を追加することも検討できます：

- データの保存と履歴表示
- 日報や月報の自動生成
- タスクごとの時間記録
- 請求書の自動作成

これらの機能を組み合わせることで、フリーランスとしての業務をより効率的に管理できるでしょう。
稼働時間の正確な記録と報告は、クライアントとの良好な関係を維持し、適切な報酬を得るために重要です。

ここで、私が送付したプロンプトを見てもらいたいのですが:

私は個人事業主のITフリーランスであり、
現在お世話になってる企業へは「稼働時間」を成果物として納品しております。

…具体的に「これ作って」って指示してないんですよね…。
本当はこれ以降に「これ作って」と文を続けたかったのですが、誤って上記で送信しちゃってorz
でも背景を伝えるだけで、勝手にそれっぽく作ってくれるの凄いなと思いました…。

料金プランについて

ここでv0の料金プランについても触れます。
※以下は執筆当時(2024/09/01)段階の内容です

公式サイト曰く、現状は無料含め3つの料金プランがあります:

	料金	利用範囲
Free	無料	200クレジット/月
Premium	$20/月	5000クレジット/月利用制限の引き上げ追加クレジット購入可能
Enterprise	不明	カスタム量クレジット/月利用制限の引き上げ追加クレジット購入可能

他にも色々特典がありますが、主題となるのは上記かと。

なお「Enterprise」プランは、Web上から切り替えられずメルアド経由でVercel営業さんとコンタクトを取る必要があるみたいです。
料金が不明なのも、クレジット量を自由に設定可能だからでしょう。

クレジットについて:
利用量の尺度のことで、v0.dev の各世代は10クレジットかかる…との事ですが、具体的にどの位使ったらどの位消費されるかが分からずorz。
公式サイト下部の「Frequently Asked Questions」(よくある質問)に詳細が記載されてたので、よければ参考に。

なお、自分が現在どの程度のクレジットを使ってるかはこちらから閲覧可能です。
"v0のクレジット画面"

その他

v0の公式FAQには、上記以外の細かい点が色々掲載されており。
その中でも個人的に「これは」と思うものを抜き出してみました。

学習データの利用状況

執筆当時(2024/09/01)段階のベータ版では、入力は学習データとして使うとの事ですが…。
今後オプトアウト機能を用意するとの事です。
もし学習されたくないと考えてる場合は、オプトアウト機能を待ってから使ってもいいかもですね。

React以外のサポート

今後shadcn/ui…並びにReact以外でも、VueやプレーンHTMLで使用可能な形で出力する計画もある様です。
TailwindCSS以外のデザインシステムのサポートも検討しているとの事なので、利用の幅が広がりそうですね。

おわりに

最後に、実際にv0と交わしたやり取りの内容を載っけ…ようかと思いましたが。
記事がかなり長くなってしまったので、本記事はここで一旦区切ろうと思います。

私としては、次Partの内容こそが紹介したい8割だったのですがね…。
しっかり内容をまとめると、ボリュームは増える物ですなorz。
まぁ次回は今回の記事より長引きそうですが…。

なお余談には、今回取り上げた中で筆者が「??」となった用語についてまとめております。
最近技術情報収集してなかったからか、新しい用語が多くてびっくりしました。
技術分野は日進月歩ですね…特にフロントエンドと生成AI周りは。

余談:shadcn/uiとは?

参考記事曰く、
「Radix UI」と「Tailwind CSS」を使って書かれたUIコンポーネント集の事です。

スタイルはTailwind CSSを使ってカスタムできる上、
2023 JavaScript Rising Stars(2022年間で増加したGitHubのスター数ランキング)にて、総合ランキング1位を獲得しており…。
注目度の高いUIコンポーネント集と言えそうです。

公式サイトを覗いてみると、Accortion,Alert,Breadcrumb,DatePicker,Skeleton,Toast,Tooltipなど汎用的に使いたい便利なコンポーネントがたくさんあります。
デフォルトのUIも今時かつシンプルで、どんなプロジェクトにも載せやすそうですね。

ちなみに…筆者はshadcn/uiどころか、Radix UIも知りませんでしたので…。
Radix UIについてもまとめてみました。

Radix UIとは

公式サイトはこちら: www.radix-ui.com

以下ブログに非常に分かりやすくまとまってあられたので、抜粋させていただきます。

Radix（読み方:レイディックス）は、次世代のheadless uiコンポーネントです。
headlessというのはstyleがあたっていないということで、UIを「見た目」と「振る舞い」に分けた時、「見た目」が取り除かれているようなイメージです。
似た既存ライブラリだとtailwindのheadlessuiが近いですが、より完成度や網羅性が高い印象です。
https://zenn.dev/ynakamura/articles/d30ee1cb6f3a15

イメージ的には「Radix UIが持つ機能面を」「shadcn/uiが今時の見た目でラップしてくれてる」感じでしょうか…？

また、こちらはReactベースで作られており…。
筆者としては、ここでようやくshadcn/ui、並びにv0が生成するコードがReactベースになるのが理解できました。
現代のフロントエンド事情は複雑怪奇ですね…頑張ってついていかねば。

余談:Vercelとは?

以下ブログに非常に分かりやすくまとまってあられたので、抜粋させていただきます。

Vercel は、簡単さが売りのシンプルなPaaSです。
以前は ZEIT now というサービス名でしたが、2019/04/21に社名がVercelに変わり、これにあわせてサービス名も Vercel になったようです。
ちなみに、Vercel社（旧ZEIT社）は Next.js の開発元としても知られており、$21Mの資金調達に成功しているイケイケスタートアップです。
Vercelは静的サイトやSPAのホスティングももちろんできますが、サーバーレス関数やWebアプリを無料で簡単にホストできるので、趣味プロダクトのサーバー代わりに使われているのをよく見かけます。
https://zenn.dev/ttskch/articles/5f98aae0975720

てっきりAI関連のサービス企業かと思ったのですが、違うのですね…。
↑ブログには使い方も記してくれてたのですが、かなり簡易に使えそうなので。
趣味サービスの公開時に、選択肢の一つとして覚えておくといいなと思いました。

なお、公式FAQ曰く…Vercelでデプロイされてるリソースをv0の学習ソースとしては使ってないとの事です。

Aikの技術日記

技術的な進捗とか成果とかを細々と投稿するブログです。時々雑記も。