Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Amazon Q Developer CLI でゲームと Amplify アプリを作ってみた ...
Search
Kihara, Takuya
PRO
August 23, 2025
Technology
0
29
Amazon Q Developer CLI でゲームと Amplify アプリを作ってみた #ゆるWeb札幌
ゆるWeb勉強会@札幌 #30
https://mild-web-sap.connpass.com/event/362135/
Kihara, Takuya
PRO
August 23, 2025
Tweet
Share
More Decks by Kihara, Takuya
See All by Kihara, Takuya
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
250
ゆるWeb勉強会@札幌 #30 #ゆるWeb札幌
tacck
PRO
0
7
Flutter を始めよう! - Flutter の開発現場から
tacck
PRO
0
140
GitHub Actions で Flutter アプリの CI/CD をやってます #ゆるWeb札幌
tacck
PRO
0
190
ゆるWeb勉強会@札幌 #29 #ゆるWeb札幌
tacck
PRO
0
140
読んで学ぶ Amplify Gen2 / Amplify と CDK の関係を紐解く #jawsug_tokyo
tacck
PRO
1
480
はじめまして GoLang #cm_sapporo_study
tacck
PRO
0
140
ゆるWeb勉強会@札幌 #28 #ゆるWeb札幌
tacck
PRO
0
90
AWS Amplify の AI Kit でオレオレAIサイトを作ってみる #ゆるWeb札幌
tacck
PRO
0
130
Other Decks in Technology
See All in Technology
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
260
SOC2取得の全体像
shonansurvivors
1
340
AI×Data×SaaS×Operation
sansantech
PRO
0
110
「技術負債にならない・間違えない」 権限管理の設計と実装
naro143
31
9.4k
全てGoで作るP2P対戦ゲーム入門
ponyo877
3
1.2k
AIを導⼊しても、 開発⽣産性は"爆増"していない なぜ?
kinosuke01
4
3.6k
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.5k
Geospatialの世界最前線を探る [2025年版]
dayjournal
2
430
BirdCLEF+2025 Noir 5位解法紹介
myso
0
150
2重リクエスト完全攻略HANDBOOK / Double Request Handbook
shoheimitani
5
7.1k
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
310
pprof vs runtime/trace (FlightRecorder)
task4233
0
140
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Embracing the Ebb and Flow
colly
88
4.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
GitHub's CSS Performance
jonrohan
1032
460k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Transcript
Amazon Q Developer CLI でゲームと Amplify アプ リを作ってみた ゆるWeb勉強会@札幌 #30
2025/08/23 tacck 1
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
今日のお話 Amazon Q Developer CLI でゲームを作るイベントに参加して ゲームをつくってみた Amazon
Q Developer CLI で AWS Amplify を使った Web アプリをつくってみた 3
4
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
作り方 Python + PyGame クライアントサイドのゲームアプリが開発できる あとは、 Amazon
Q Developer CLI にプロンプトを投げて つくっていく。 今回は「神経衰弱」でやってみた。 6
プロンプトをやっていく 個人的なポリシーとして「やり取りのルールを事前にまと めない」とした。 事前のルール、出力フォーマットの定義、などなど、そういうこと を決めず、プロンプトの対話だけで完結させる。 ひとまず、「神経衰弱を作りたい」というプロンプトから。
その後、カードの画面サイズの調整と、カードの画像化を プロンプトでなんとか完了。 7
Vibe コーディングを実感 ハマった時に抜け出せない。 今回は、カードの画像化で苦戦した。 画像生成用に、ゲームとは別のプログラムが作成される。 ただ、文字やトランプのマークがうまく表示できない。
フォントの問題だという認識はできたが、解決がなかなかできない。 最終的にフォントを別途ダウンロードして取り込む方式にすると、 なんとかうまくできた。 8
とはいえ やってみると、かなり楽しい。 9
AWS Amplify を使った Web アプリの 作成にもチャレンジ 調子にのってやってみる。 Next.js
15 、 AWS Amplify Gen2 をセットアップした状態からスタート。 今回は「自分のSNSリンクをシェアするWebアプリ」を作る。 10
プロンプトをやっていく 個人的なポリシーとして「やり取りのルールを事前にまと めない」とした。 事前のルール、出力フォーマットの定義、などなど、そういうこと を決めず、プロンプトの対話だけで完結させる。 「自分のSNSリンクをシェアするWebアプリを作りたい。 まずは、プロトタイプから。」というプロンプトからス
タート。 途中失敗や前提の違いでうまくいかないことも発生する。 フロントエンドの場合、やり取り途中で「確認」のために ローカルサーバが起動されるが、確認するのは「開発者(人間)」。 生成AIに確認させたかったら、PlaywrightのMCPを使わせるなど、 機械的な手段を与えておかないといけない。 11
個人的な所感 AWS Amplify の情報は、いまいちに感じる場面も ある。 認証の場合「AWS Amplifyの <Authenticator>
タグを使 う」まで指示すれば、意図通り使ってくれる。 ここは、 Amplify Gen1 の情報が悪い方向に引っ張ってしまって いるのかも。 一方で UI /CSS フレームワークはかなり得意らしく、 「Amplify UI を使いたい」と言えば、かなり適した形に してくれる。 12
個人的な所感2 同じプロンプトでも違う結果になりがち。 特に時間が空くと、だいぶ雰囲気変わる。 なので、この資料を作る時にだいぶ困った。 ツール・エージェント・モデル、それぞれの進化が 激しいので、対話プロンプトでの再現性は
あきらめておくべき。 Kiro などの Spec 駆動でどこまで再現性が高まるか? 13
まとめ 個人ツール、プロトタイプ作成なら、Vibeコーディングは 気兼ねなく使える。 細かいサーバ連携は注意が必要だが、 フロントエンドが苦手な人はフロントエンドをどんどんやらせた方が 良い。 とはいえ、作成対象の技術に詳しい方がベター。
生成AIのつまづきポイント、はまりポイント、改善指示の適切さは、 対象技術に詳しいほど解決に至る。 プロダクションだと、動作の質だけでなくコードの質も必要。 中身がわからないものの質を担保するのは、難易度が高い。 レビューが大変になるが、レビューをサポートする生成AI、 を使っていくことでレビュワーの理解速度向上も必要になってくる。 14
宣伝 15
フロントエンドカンファレンス北海道 2025 2025年9月6日(土曜日) 開催 16:30 から登壇します! オンライン参加もできます!!
16
FlutterKaigi 2025 2025年11月13日(木曜日) 開催 東京です LTで登壇します!! (時間は未定)
17
Flutter のイベントやるよ 2025年10月4日(土曜日) FlutterKaigi の派生イベント「FlutterKaigi mini」を 札幌で開催いただく予定。
GDG Sapporo さん全面協力のもと、鋭意準備中!! 18