フロントエンドを書くのが苦手なのですが、Vercel v0 を使うと AI が生成したコードからすぐにフロントエンドの画面を確認できて簡単に UI ができるということらしいので使ってみました。

作ってみたのはボードゲームの ITO のようなアプリです。ずっとアクセスできることは保証しません。

こんな感じの画面でホストがカードを並べ替えたりお代を変更できるようにしています。

使った所感をまとめます。
どんなことができるかはすでにまとまっている記事等あるかと思いますので割愛します。

参考

すごいと思ったこと

非フロントエンドエンジニアが自分で書くより圧倒的に早い

データエンジニアとしてはフロントエンドを書く機会がなかなかないので思い出したり情報のキャッチアップから始めないといけないのですが、そういう工程をすっ飛ばして軽く動くものを作れるのはすごいと思いました。

上記のアプリであれば作るのに4,5 時間程度かかりましたが、回答をまったりビルド待ちの時間をうまく別作業に使えれば正味1, 2時間程度の時間しか使っていないと思います。

フロントエンドの本職の方からすると実装のアラが目立つかもしれませんが、フロントエンドエンジニア以外の方が要件定義のために実際に動く画面遷移を作る機会があれば相当便利だと思います。

環境変数をインタラクティブに設定できる

最初にこんな感じのプロンプトを書きました。

ボードゲームを作成します。 複数のプレイヤーが同時にプレイします。そのため、サーバーサイドのステートを共有する必要があります。 ステートの共有は WebSocket を使用します。

共有するステートは次のとおりです。 

プレイヤー関係

- プレイヤー名
- プレイヤーの書き込む単語

部屋関係

- 部屋名
- 部屋のパスワード

カード関係

- カードに書かれた数字

お題関係

- お題

まずはこれらのステートを共有できる仕組みを作成してください。

するとこんな感じの返事がきます。

Environment Variables Added と表示されているところはもともと Pusher と upstash-redis の環境変数を入力できる欄が表示されていました。
それぞれのサービスからクレデンシャルキーなどを取得して入力することで、これらのサービスをフロントエンドに組み込むことができました。

コツ

長大なコードには使わない

今どきの生成 AI あるあるですが、コード量が増えれば増えるほどうまく生成できなくなっていきます。
どこを変更すればよいのか当たりをつけるのが下手になっていく感じです。
人間だとよしなに情報の取捨選択ができることでも、今の AI 的には難しいようです。

サーバーサイドから作ったほうがうまくいきやすい

日頃フロントエンドを書かない人間からすると指示を出すごとに画面が出来上がっていく様子を見るのは非常に楽しいのですが、最後にサーバーサイドのコードを生成させようと思うと結構失敗しやすいように感じました。

作る順番よりかはコードの生成量が多くなっていることが影響してそうですが、サーバーサイドを先に書かないと全く意味がないケースも出てくるため、優先したほうが良いと思います。

まとめ

現時点では本格的なアプリを作るには使いにくいと思いますが、簡単なアプリなら十分使えそうです。
個人的には友達とボードゲームをすることが多いので、Web 上でプレイしたいものを自作して身内だけで遊んだりするのに使いそうです。

今後に期待しています。