Amazon Q Developer CLI でゲームと Amplify アプリを作ってみた #ゆるWeb札幌

ゆるWeb勉強会@札幌 #30
https://mild-web-sap.connpass.com/event/362135/

1. Amazon Q Developer CLI でゲームと Amplify アプ リを作ってみた ゆるWeb勉強会@札幌 #30 2025/08/23 tacck 1
2. Kihara, Takuya 木原 卓也 / @tacck / Sapporo, Japan CO-OP Sapporo 生活協同組合コープさっぽろ Software Engineer / Flutter, TypeScript, Vue.js, React Amplify Japan User Group 運営メンバー ゆるWeb勉強会@札幌 主催 AWS Community Builder Since Q2 2021 / Category: Front-end Web and Mobile Community 好きなフィギュアスケートの技 スプレッド・イーグル 2
3. 今日のお話  Amazon Q Developer CLI でゲームを作るイベントに参加して ゲームをつくってみた  Amazon Q Developer CLI で AWS Amplify を使った Web アプリをつくってみた 3
5. Build Games with Amazon Q CLI and score a T shirt  「Amazon Q Developer CLI でゲームをつくってTシャツをゲットしよ う」というキャンペーンに乗っかってやりました。 https://builder.aws.com/content/2xIoduO0xh khUApQpVUIqBFGmAc/ended-build-games- with-amazon-q-cli-and-score-a-t-shirt 5
6. 作り方  Python + PyGame  クライアントサイドのゲームアプリが開発できる  あとは、 Amazon Q Developer CLI にプロンプトを投げて つくっていく。  今回は「神経衰弱」でやってみた。 6
7. プロンプトをやっていく  個人的なポリシーとして「やり取りのルールを事前にまと めない」とした。  事前のルール、出力フォーマットの定義、などなど、そういうこと を決めず、プロンプトの対話だけで完結させる。  ひとまず、「神経衰弱を作りたい」というプロンプトから。  その後、カードの画面サイズの調整と、カードの画像化を プロンプトでなんとか完了。 7
8. Vibe コーディングを実感  ハマった時に抜け出せない。  今回は、カードの画像化で苦戦した。  画像生成用に、ゲームとは別のプログラムが作成される。  ただ、文字やトランプのマークがうまく表示できない。  フォントの問題だという認識はできたが、解決がなかなかできない。  最終的にフォントを別途ダウンロードして取り込む方式にすると、 なんとかうまくできた。 8
9. とはいえ やってみると、かなり楽しい。 9
10. AWS Amplify を使った Web アプリの 作成にもチャレンジ  調子にのってやってみる。  Next.js 15 、 AWS Amplify Gen2 をセットアップした状態からスタート。  今回は「自分のSNSリンクをシェアするWebアプリ」を作る。 10
11. プロンプトをやっていく  個人的なポリシーとして「やり取りのルールを事前にまと めない」とした。  事前のルール、出力フォーマットの定義、などなど、そういうこと を決めず、プロンプトの対話だけで完結させる。  「自分のSNSリンクをシェアするWebアプリを作りたい。 まずは、プロトタイプから。」というプロンプトからス タート。  途中失敗や前提の違いでうまくいかないことも発生する。  フロントエンドの場合、やり取り途中で「確認」のために ローカルサーバが起動されるが、確認するのは「開発者（人間）」。  生成AIに確認させたかったら、PlaywrightのMCPを使わせるなど、 機械的な手段を与えておかないといけない。 11
12. 個人的な所感  AWS Amplify の情報は、いまいちに感じる場面も ある。  認証の場合「AWS Amplifyの <Authenticator> タグを使 う」まで指示すれば、意図通り使ってくれる。  ここは、 Amplify Gen1 の情報が悪い方向に引っ張ってしまって いるのかも。  一方で UI /CSS フレームワークはかなり得意らしく、 「Amplify UI を使いたい」と言えば、かなり適した形に してくれる。 12
13. 個人的な所感2  同じプロンプトでも違う結果になりがち。  特に時間が空くと、だいぶ雰囲気変わる。  なので、この資料を作る時にだいぶ困った。  ツール・エージェント・モデル、それぞれの進化が 激しいので、対話プロンプトでの再現性は あきらめておくべき。  Kiro などの Spec 駆動でどこまで再現性が高まるか? 13
14. まとめ  個人ツール、プロトタイプ作成なら、Vibeコーディングは 気兼ねなく使える。  細かいサーバ連携は注意が必要だが、 フロントエンドが苦手な人はフロントエンドをどんどんやらせた方が 良い。  とはいえ、作成対象の技術に詳しい方がベター。  生成AIのつまづきポイント、はまりポイント、改善指示の適切さは、 対象技術に詳しいほど解決に至る。  プロダクションだと、動作の質だけでなくコードの質も必要。  中身がわからないものの質を担保するのは、難易度が高い。  レビューが大変になるが、レビューをサポートする生成AI、 を使っていくことでレビュワーの理解速度向上も必要になってくる。 14
15. 宣伝 15
16. フロントエンドカンファレンス北海道 2025  2025年9月6日(土曜日) 開催  16:30 から登壇します!  オンライン参加もできます!! 16
17. FlutterKaigi 2025  2025年11月13日(木曜日) 開催  東京です  LTで登壇します!! (時間は未定) 17
18. Flutter のイベントやるよ  2025年10月4日(土曜日)  FlutterKaigi の派生イベント「FlutterKaigi mini」を 札幌で開催いただく予定。  GDG Sapporo さん全面協力のもと、鋭意準備中!! 18