Zenn
🦈

Amazon QでVibe CodingしてTシャツをゲットしよう!!!

に公開
AWS
TypeScript
CLI
Amazon Q
Vibe Coding
tech

はじめに

6/9(月)にJAWS-UG横浜支部のイベントに参加してきました。その成果をここにまとめたいと思います。

業務ではGithub Copilotにコーディングをアシストしてもらっていますが、ゲームという1つのプロダクトをゼロから作る経験はないので、楽しみにしていました(待ってないで早くやれよってどこからか聞こえてるく気がする)。
※イベント当日は結局動かないゲームを作ってしまったので、後日リベンジした内容になります。

Amazon Q CLIでゲームを作ろう

ゲームの仕様は曖昧ですが、AWSサービスのアイコンとパ〇ドラをマージしたゲームを作りました。ちなみにパ〇ドラは半年前に引退しました。
さっそくAmazon Q CLIを起動します。基盤モデルは「Claude 4 Sonnet」を選択しました。その他MCPサーバなどは設定していません。

プロンプト一覧

入力したプロンプトの一覧です。Qとの会話履歴は「/save」で取得できます。

/save chat_history.json

=== Prompt 1 ===
AWSサービスとパズドラを組み合わせたゲームを開発してください。必要な機能はすべて実装してください。フレームワークや言語はすべてお任せします。

=== Prompt 2 ===
ゲーム画面はスクロールせずに画面にすべて収まるようにしてください。

=== Prompt 3 ===
オーブが見づらいので、色分けに加えてAWSサービスのアイコンをいれてください。

=== Prompt 4 ===
オーブを動かしてコンボできるようにしてください。また、ゲームの遊び方をREADMEに追加してください。

=== Prompt 5 ===
次のゲーム機能を追加してください。1.オーブを消した時、上からオーブが降ってきて次のパズルをスタートする。2.落ちコンあり。

=== Prompt 6 ===
ゲームの動作確認をするため、開発サーバを起動してください。

=== Prompt 7 ===
開発サーバを起動する際にエラーが発生した場合は、プログラムを修正して再度開発サーバの起動を試みてください。

=== Prompt 8 ===
とてもいいゲームになっています。

=== Prompt 9 ===
ここで、仕様を3つ追加してください。1.オーブは横もしくは縦に3つ以上揃えた時に消える。斜めに揃えた時は消えない。2.プレイ開始時、落ちコンが発生しないような盤面にする。3.ユーザがオーブを離すまで動かすことができる。

UI

完成したゲームの初期画面です。

  • ゲームタブ

  • プロフィールタブ

  • ランキングタブ

「ゲーム開始」を押下するとドロップが表示され、ゲームスタートです。

ディレクトリ構成

残念ながら、JSフレームワークやフロントエンドの知識が皆無なため、妥当かどうか分かりません。動作確認していませんが、cfnテンプレートまで作成してくれました。

所感

最初に出力されたゲームはイメージとちょっと違いました。

  • 1回パズルするたびに盤面がリセットされる
  • 落ちコンなし
  • ドロップを1マスしか移動できない
  • 斜めにドロップが揃った時も消えてしまう

いずれも後のプロンプトで修正できたので、かなりいいゲームができました。個人的にはとても満足しています。ドロップの斜め移動に対応できていないのが唯一の心残りです。

さいごに

JAWS-UG横浜支部のイベントに参加して、ゼロから始めるVibe Codingを体験できました。
コミュニティのイベントには引き続き積極的に参加する予定です。現地でお会いした際は仲良くしてください。

Discussion