v0にゲーム作らせた話

この記事は社内アドベントカレンダー 12/23 の記事です。

きっかけ

部署内で、ゲームつくり選手権が開催され、2週間でゲームを作ることになりました。２週間でつくるという制約があったので、１から全部作ると大変そうだなと思い、コーディングはAIにお任せしてみることにしました〜

v0とは？？

What is v0?
v0 is your always-on pair-programmer. A generative chat interface with in-depth knowledge on modern web technologies. It can provide technical guidance while building on the web, generate UI with client-side functionality, write and execute code in JavaScript and Python, build diagrams explaining complex programming topics, and more.

引用元: https://v0.dev/faq

ChatGPTのようなチャット形式のインターフェースで、UI作成を含めコード生成をしてくれるAIツールです。チャットで要件を指示するだけでコード生成してくれるなんて、夢のようなツールですね〜〜

実際に使ってみる

今回は某有名キャラクター育成ゲームのような、キャラクター育成ゲームを作ってみたかったので、？？？っちみたいなゲーム作ってとチャットします。餌を選択するという具体的な要件も伝えます。
すると、いい感じの画面を作って、コーディングもしてくれるのです。

作成されたコードも見ることができます。
コードの修正も可能になってました！！(私が利用していた当時はできなかったので、アップデートがあったようです。私は基本的に全てChatで指示して作成しました。)

このままだとシンプルなので、使って欲しい画像を渡したり、アニメーションをつけたり、画面切り替えをつけたり、と追加で機能を注文して完成させることができました！

よかったところ

簡単にそれっぽいものができる！！

新しいプロダクトを作るとなると、まず開発環境を構築して、、UI考えて、、コーディングして、と手間がかかります。めんどくさい部分を省略して、Chatひとつで完成形に近いものができるのは素晴らしいですね。そのままデプロイもできます!

バージョン管理ができる

v0の特徴として、version管理をしてくれるので、指示がうまく伝わらず失敗した〜となってもすぐに指示する前の状態に戻して、そこから開発を続けることができます。1回のチャットで作成されたコードが、v1, v2, v3...という概念で管理されています。チャット単位でgit commitして管理してくれているようなイメージです。GUIで簡単に前のバージョンに戻したりできます！

1画面でUIを確認しながら作業できる

普段VSCodeを使ってWebサービスを開発しているのですが、コード上で修正して、ブラウザで確認して、ログを確認して、、とさまざまなアプリや画面を確認しながら開発しています。普段の開発と比べると、UIを確認しながら同じ画面でコード修正して、リアルタイムで確認できるという開発体験はとてもいいなと感じました！

うーん、、、なところ

バグを潰しにくい

簡単なコードであれば問題ないのですが、複雑になってくるほど、自分が書いていないコードのバグを直すと言うのが難しいなと感じました。機能の精度が求められる場面では使えないかなと思います。

日本語でUIについて表現するのが難しい

UIを全て言語で説明すると言うのが意外と難しいです。例えば、背景画像内の下部に文字を配置する際に、背景画像の中じゃなくて下に配置されたり、背景画像が文字に覆い被さる形で配置されたり、、というような感じです。(←この例も伝わってるのかわかりませんが、、ようするに難しいんです。。)
今は出来上がったコードに対しての修正ができるようなので、伝わりにくい部分は自分で書いて解決できそうですね〜

感想

コーディングをv0にさせることで、ゲームの内容や、素材の作成にこだわることができて、楽しく開発することができました！ちなみにゲームづくり選手権でも優勝することができました〜
簡単なものを作りたいなと言う場面や、プロトタイプ的なものを作りたい場面などで活躍しそうだなと思いました。今後も活用して行けたらと思います！

参照

• v0