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
30
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
260
ゆるWeb勉強会@札幌 #30 #ゆるWeb札幌
tacck
PRO
0
8
Flutter を始めよう! - Flutter の開発現場から
tacck
PRO
0
150
GitHub Actions で Flutter アプリの CI/CD をやってます #ゆるWeb札幌
tacck
PRO
0
220
ゆる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
92
AWS Amplify の AI Kit でオレオレAIサイトを作ってみる #ゆるWeb札幌
tacck
PRO
0
130
Other Decks in Technology
See All in Technology
HonoとJSXを使って管理画面をサクッと型安全に作ろう
diggymo
0
180
Wasmの気になる最新情報
askua
0
190
AIプロダクトのプロンプト実践テクニック / Practical Techniques for AI Product Prompts
saka2jp
0
110
Introdução a Service Mesh usando o Istio
aeciopires
1
280
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
170
事業開発におけるDify活用事例
kentarofujii
5
1.4k
SRE × マネジメントレイヤーが挑戦した組織・会社のオブザーバビリティ改革 ― ビジネス価値と信頼性を両立するリアルな挑戦
coconala_engineer
0
200
デザインとエンジニアリングの架け橋を目指す OPTiMのデザインシステム「nucleus」の軌跡と広げ方
optim
0
110
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.4k
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
kaminashi
1
630
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
150
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
1
310
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
A Tale of Four Properties
chriscoyier
161
23k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Automating Front-end Workflow
addyosmani
1371
200k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
Designing for humans not robots
tammielis
254
26k
The Cult of Friendly URLs
andyhume
79
6.6k
Context Engineering - Making Every Token Count
addyosmani
8
300
Agile that works and the tools we love
rasmusluckow
331
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Designing for Performance
lara
610
69k
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