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
Dify on AWS 環境構築手順
yosse95ai
0
120
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
400
Data Hubグループ 紹介資料
sansan33
PRO
0
2.2k
OCIjp_Oracle AI World_Recap
shinpy
1
170
Copilot Studio ハンズオン - 生成オーケストレーションモード
tomoyasasakimskk
0
210
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
13
9.6k
20251027_マルチエージェントとは
almondo_event
0
120
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
2.2k
[VPoE Global Summit] サービスレベル目標による信頼性への投資最適化
satos
0
230
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
860
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.4k
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
4 Signs Your Business is Dying
shpigford
185
22k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Become a Pro
speakerdeck
PRO
29
5.6k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
How GitHub (no longer) Works
holman
315
140k
Gamification - CAS2011
davidbonilla
81
5.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Into the Great Unknown - MozCon
thekraken
40
2.1k
A designer walks into a library…
pauljervisheath
209
24k
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