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
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
200
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
970
許しとアジャイル
jnuank
1
120
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
23
17k
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
5.4k
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
0
110
VCC 2025 Write-up
bata_24
0
180
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
170
「技術負債にならない・間違えない」 権限管理の設計と実装
naro143
36
11k
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3.8k
What is BigQuery?
aizack_harks
0
130
Green Tea Garbage Collector の今
zchee
PRO
2
390
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Documentation Writing (for coders)
carmenintech
75
5k
Designing for Performance
lara
610
69k
Agile that works and the tools we love
rasmusluckow
331
21k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Six Lessons from altMBA
skipperchong
28
4k
Fireside Chat
paigeccino
40
3.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
How to Think Like a Performance Engineer
csswizardry
27
2k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
A better future with KSS
kneath
239
17k
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