はじめに
明日から新社会人の方が入社されますね！
新卒エンジニアとの懇親会も多く開催される時期ではないでしょうか？
ただ、懇親会では特定の人としか喋れなかったり、話しかけるきっかけがなく、なかなか会話が広がらないことも…。
そこで、せっかくなら自然にたくさんの人と交流できるかもしれないコンテンツを、AIを使って爆速バイブコーディングしてみました！
（※今回は、低コストでいかに爆速にプロトタイプができるのかを試すことが目的です）
どんなコンテンツ？
できるだけ多くの人と話せる仕組みを作るため、自己紹介を活用したビンゴゲームを考案しました。
後から調べてみると「人間ビンゴ」という形で遊ばれているものと類似しておりました！
基本ルール
- いくつかの質問項目にユーザーが回答
- 回答をベースにパーソナライズされたビンゴカードを生成
- お題を提示し、該当する参加者と会話ができたらマスを埋める
単純ですね。カードの事前準備も必要なくウェブアプリでサクッとプレイできるお手頃感があればいいなと思っています。
試したAIはこの5つ
どのAIが1番早く開発できるのかを下調べばかりしていたのですが、もはや試してみた方が早いのではないかという流れで比較しつつ試してみることにしました。
- Cline
- v0.dev
- Create
- Windsurf
- Cursor
Devinなどまだまだ使ってみたいところはあったのですが今回はこれらを試しました。いち早く形になるものを出したかったので、少しでも時間がかかりそうだなと判断したものは厳しめに切り上げて他ツールで試す、という方法で試しています。
プロンプト
全て同じプロンプトで生成させました。
簡単に目的と仕様をざっくりまとめたものでどのくらい再現できるのかを試しました。
GOAL
Implement a web application for "Engineer BINGO!" to promote interaction between engineers at social events.
Premise
- The web application will be implemented using Next.js.
- It will include basic Bingo functionality and will be a simple, easy-to-use web app.
- Serverless environments such as Firebase will be used for data management and Bingo card generation.
Specifications
1. Start the Web App with a QR Code
- Event participants can launch the app by scanning a QR code.
2. Personalized Bingo Card Generation via Form Input
- Users will enter 10 pieces of personal information through a form (e.g., school club activities, favorite programming languages).
- Based on the input, a unique Bingo card will be generated with 10 personalized items, while the remaining 14 items will be randomly filled in (the remaining items are randomly selected from a pre-hardcoded list).
3. Conversation Rally with Participants
- Participants will interact with each other based on the Bingo card items, checking off items as they go.
- For example, a prompt might say "Someone with a hand-drawn image on Slack," and after the conversation, the participant will check off the item. The item can only be checked off if a conversation is held with the relevant person.
4. Achieving Bingo
- When the items on the Bingo card align horizontally, vertically, or diagonally, Bingo is achieved.
- A "Bingo Achieved!" screen will be displayed when Bingo is completed.
選ばれたのは？
選ばれたのは... v0.dev でした。
1番速く動く段階まで持って来てくれました。
生成されたアプリのUIも1番理想に近いものでした。
実際の操作と所感
v0.dev
1分ほどでアプリを作ってくれました。デプロイもVerselで1分ほどで完了、合計2分くらいでサクッと形にしてくれました！
プロトタイプとして、クオリティやコストを考えたら十分だなという感じ。エラーもなく、いち早くデプロイまでできました。
これをベースに手直しをしていけば1番早く開発できそうです。
Cline
実装手順に合わせてポチポチacceptしていく形式です。
Clineのみ、途中でプロモーション分のクレジットが尽きてしまい1$ほど課金しています。
まるでタイムラプスかのように実装されていくのを眺めるのが気持ちよく、実装していく方法が細かく見られるので勉強にもなる印象でした。
ビンゴカードの生成部分でエラーが発生し、この時点で課金対応も含め25分ほど経過していたため切り上げ対象となりました。
Windsurf
Clineと同じようにポチポチacceptしていく形式です。
アプリをダウンロードしなくてはいけないので、セットアップ含めて少しだけロスタイムではありましたが、WindsurfはClineよりacceptさせる回数が少なかったです。
こちらもCline同様ビンゴカードの生成部分でエラーが発生し、この時点で15分ほど経過していたため切り上げ対象となりました。
Create
Createは正直上手く使いこなす前に、先にv0.devが理想系を出してくれたためシフトしてしまいました。。。
レスポンシブに画面モードも切り替えられるのが見やすい印象。
しかし、こちらもビンゴカード生成でエラーを吐いてしまい少し修正をしていたのですがv0.devの方が先に解決してくれたので断念。
Cursor
こちらもCline、Windsurfと同じようにポチポチapplyしていく形式です。
ClineとWindsurfよりも簡単に実装をしてくれました。
UIはかなりシンプルで、手を加えやすい感覚。
Corsorは一回のプロンプトで生成しきれなかった惜しい部分もあり、v0.devの方がより正確かつ早く実装してくれました。
アイデアをすぐ形にできる
今回はシンプルなWebアプリで比較してみましたが、それぞれの性能を活かして使い分け、やってみたいこと、できたらいいなと思っているがなかなか動き出せていない時などに思い切ってみるきっかけになれるのではないかなと感じました。
あくまで一つのアイデアですが、懇親会運営メンバーへこのプロトタイプを持っていき、意見を聞いてブラッシュアップできたら嬉しいです。もしも、実際に使うことになったらとても嬉しいです🥹
なによりも、新卒の皆さんとお会いするのが楽しみです🌸
新社会人の皆様、おめでとうございます！