プログラミングが好きだったのに・・・～v0 by vercel～
こんにちは！
ＳＯＭＰＯシステムズのアプリケーションエンジニアです。
うちには愛犬がいるのですが、最近太りはじめまして、それでも大きくなっていくのは嬉しくて、でもスリムで健康でもいてほしくて、そんなジレンマを抱える日々です。
（今回の記事の内容にはいっさい関係ありません。）
それでは、前回（プログラミングが好きだったのに・・・～AWS App Studio～）に引き続き、「プログラミングを自身の手で行わなくても開発できるのか」を検証していきたいと思います！
1. 前回の振り返り
前回はAWS App Studioを使いました。
これからこのサービスが主流になる！とはまだなりえないという感想でした。
まだ自身の手でプログラミングができそうです！
2. 比較する3サービス
今回は2のv0 by vercelが対象です。
AWS App Studio
v0 by vercel（この記事の対象）
bolt.new
3. 課題定義
前回と同じく以下の要件で作成していきます。
Chatbotアプリを作成してください。詳細な要件は以下です。
「SOMPOシステムズブログ用アプリ」と記載されたHeaderがあること
bodyにはChatbot機能があること
Chatbot機能は将来的にOpenAIと接続できるようにすること
画面の見た目は青を基調としてかっこよく
（抽象的ですが、、、）
また、画面の出来栄えだけではなく、運用や保守の行いやすさも評価に入れます。
4. サービスの紹介
【v0 by Vercel】
24年7月頃に正式リリースされたUI生成ツールです。
フロントエンドのプログラムを自動生成してくれます。
今までChatGPTでもプログラム生成できていたけど、どう違うんだろう？
といったさわりの部分をご紹介できたらと思います！
5. サービス使ってみた
5-1. v0 by Vercelが使えるようになるまで
このサイトにアクセスし、無料でアカウント登録するだけです！
5-2. v0 by Vercelでアプリを作成
5-2-1.アプリ生成
真ん中のチャット欄に課題定義の要件を張り付けて、いざ生成！
生成された！左には実装内容の詳細、右にはプログラムコードが！
しかも生成してくれたのはReact + TypeScript！
Reactは知っていたのですが、TypeScriptで作成してくれるのは嬉しいです。仕事でReactを使うときは型安全なTypeScriptを使うことが100%なので。
（安全って言葉みんな好きですよね）
また、CSSは最近使用率が高いTailwindCSSを採用してくれています。
これもフロント開発者としてはポイントが高いのではないでしょうか？
プレビューも表示されている！
青を基調としたかっこいい？デザインです！
ちゃんとヘッダーとChatbot機能があります！
しかもこの画面で実際に動かせるので簡単に動作確認が行えます。
コード生成だけができるChatGPTだと、
1. プログラムコードを生成してもらう
2. コピーして自身の開発環境に張り付ける
3. 動作確認する
なので、チャットで修正を繰り返すことを考えると、プロセスの量が全然違いますね！
プログラムの詳細を見てみると、
ちゃんとOpenAIへのAPIと接続する枠を設けてくれていますね！
5-2-2. API部分との繋ぎ
欲張ってOpenAIとの接続部分をもっと詳細に作成してもらいましょう！
以下要件を記載して、いざ生成！
「OpenAIとのAPI接続部分も詳細に作成してください。環境変数をいれるだけにしてくれたら嬉しいです。」
生成してくれました！
NEXT_PUBLIC_OPENAI_API_KEYにOpenAIのキー情報を入れたら動くのでしょう！試していませんが！！
接続先APIのドキュメントを読み込まなくていいので、とても楽ですね！
（私は英語が読めないのでいつも苦労しています。）
そういえばこれ、Next.jsで作ってくれてたんですね。
定義した課題すべてクリアしてくれました！
これは便利ですね！
5-3. 画像から画面を生成
5-3-1. 1・2の文章による生成だけではなく、３はもう一つの使い方として画像取り込みからの生成を試してみます！
今回も課題定義通りの要件で、私がExcelで画面案の図を作成しました。
（いつも要件定義時にこのような画像をお客様にお見せして苦笑いされています。）
「添付ファイルのようなChatbotアプリを作成してください。」
を入力していざ生成！
デザインがいけてないアプリを作成してくれました！
しかもちゃんと動いてくれます！
せっかくなのでかっこよくしてもらいましょう！
「かっこいいデザインにしてください」
を入力していざ生成！
おお！かっこいい！！
これでお客様に苦笑いされることもないでしょう。
また、デザイナーさんに作成いただいた画面も簡単にアプリ化できそうです。
添付した画像から意図を汲んでチャットアプリを作成してくれていますが、もちろん「OpenAIとの接続」みたいな機能はありません。
そこはプロンプトと併用して作成するのがよさそうですね。
6. おまけ（v0 by Vercelで画像を生成）
v0 by Vercelの別の使い方です。
上記の通りかっこいいデザインを作ってくれるので、図なども生成してもらえます！
今回は「プレゼンで視覚情報がいかに重要か」を図にしてもらいます。
「以下を図で作成してください。
1, 理解速度: 図解により最大89%速く理解できる。
2, 記憶保持率: 視覚情報はテキスト情報の6.5倍記憶に残りやすい。
3, 情報処理速度: 図解はテキストより60,000倍速く処理される。
4, エンゲージメント: 聴衆の関心や集中度は94%向上。
5, 説得力: 図解は説得力を43%向上させる。」
を入力していざ生成！
できました！かっこいい図が！
ちゃんとReactで作ってくれてて面白いですね。
このままだとSSで画像を取得するしか方法がなさそうなので、pngでダウンロードするボタンをv0に実装してもらうとその場でダウンロードできるかと思います。
7. 感想
簡単にフロントアプリが作成できる！
定義した課題についても全てクリアしてくれました。
7-1. 良かった点
言語やライブラリ、フレームワークを柔軟に使用でき、外部APIの実装も行ってくれるので、とても実用的！
またコンポーネントの細分化やファイル別にすることもできて、
さらに、図や表の作成も簡単にできてしまうので、開発だけでなくプレゼンでも活躍！
7-2. 課題に感じた点
強いて言えば、アプリを作ってくれた後に「packege.jsonを教えてください」のようにあえてお願いしないと、何のライブラリをインストールしないといけないかわかりづらいという点がありました。
言わないと全体構成を教えてくれないので、ローカルで再現が本当に少しだけ手間です。
あとはgithubに直接pushできれば。。。
7-3. 最後に
前回のAWS App Studioはノーコードツールだったのに対して、今回はコード生成ツールと異なる手法なので比較するのが難しいですが、AWS App Studioよりは拡張性や操作性、設定方法など優れている感じがします。
PoCレベルであれば、画面開発はこのサービスを使ってサクッと作れちゃいそうです。
ChatGPTと違って作成プロセスが少なく、その場で動いてくれるのでバグも発見しやすいです。
さらにデザインセンスが無い私でも、簡単にそれっぽい画面や図が作成できてしまうので、間違いなく生産性の向上が図れると思います。