はじめに
本記事は、「Amazon Q CLI でゲームを作ろう」をやってみたの続編になります。未読の方はぜひ前記事を読んでみてください。前回同様Amazon Q Developer CLIを使って日本語の指示だけでゲームを完成させました。
伝えたいこと
- Amazon Q CLIはAWSインフラ屋にとってもゲームチェンジャーです
- Lambdaのアプリもいいように作ってくれるので、プログラムのコーティングが出来なくてもちょっとしたシステムなら作れてしまいます
- 詳細設計書、各種手順書類のドキュメントも作ってくれます
- Amazon Q Developer Pro契約分($19/月)の元はすぐ取れます
成果物概要
国旗当てクイズゲームになります。「Amazon Q CLI でゲームを作ろう」では、PC内にファイル(html、CSS、JavaScript)を生成しました。今回はAWSにデプロイするサーバレス構成へバージョンアップしました。
ゲームアクセス先
ぜひ実際にアクセスして動作を確認してみてください。
国旗当てクイズゲーム
ゲームルール
- 国名が表示されるので、正しい国旗をクリックしてください
- 1問目は2つの選択肢から開始し、正解するごとに選択肢が1つずつ増えます（最大10つ）
- 間違えるまで連続で正解数を競います
- 一度出題された問題は同じゲーム内で再出題されません
- 高得点を出した場合、ニックネームを登録してランキングに参加できます
ゲームトップ画面
各ジャンルのトップ３名のニックネームが表示されます。
終了時
世界地図で首都名、国名、位置を確認できます。
Amazon Q Developer CLIについて
詳しくはAmazon Q CLI でゲームを作ろう Tシャツキャンペーン (好評につき期間延長！)を参照してください。基本は以下の準備をするだけで開発が可能になります。
- Step1：AWS Builder ID に登録
- Step2： Amazon Q CLI をマシンにインストール
- Step3： Amazon Q CLI とのチャットセッションを開始
国旗当てクイズゲームサーバーレス版
作成稼働
土曜日午前と日曜日午後の実質休日１日でした。
基本構成
システム構成は以下のシステム構成図を参照してください。
開発の大まかなかな流れ
自分が手を動かさない点以外は、通常の開発と同じ流れです。
| 手順 | 指示内容 | 備考 |
|---|---|---|
| 1 | 空のCDKプロジェクト作成 | Q CLIへ指示1行でOK |
| 2 | 基本方針指示 | ベストプラクティス準拠など |
| 3 | 作ってほしい内容を指示 | 大機能を最初に指示 |
| 4 | CDKデプロイ | Q CLIへの指示でOK |
| 5 | 修正・機能追加指示 | 修正は全体への影響確認もさせる |
| 6 | テスト・デバック | それなりに手間かかります |
| 7 | 最終版の詳細設計書等のドキュメント作成 | これだけでも使う価値あり |
手順１＋２例（サンプルコード）
cdkプロジェクト/Users/hoge/cdk/world-qv2-cdkを作成して。
cdk、および関連ツールは最新版をインストールして。
システム構成はawsのベストプラクティスに則って。
手順３例（サンプルコード）
Webアプリを作って。
デザインはcssを使ってセンスの良い感じにして。
AWSの構成は静的サイトはCloudFront+S3構成で。
ニックネーム入力の処理はAPI Gatewa+lambdaでデータはs3上に保存して。
登録ボタン押下後はトップ画面に戻って。
ゲームは国旗当てのクイズです。
トップ画面で質問は国名で画面には国旗を表示して正しい国旗をクリックすると正解です。
１問目は国旗は２つだけ表示してください。正解するごとに選択可能な国旗の数を１個増やしてかつ全部新しい国旗にしてください。
連続正解数を競います。
ゲームタイトルは画面の上に「国旗当てクイズ」と表示してください。
ゲーム中は一度出題した問題は出さないでください。
国旗の種類は国連加盟国としてください。
ゲーム開始時にジャンルを選べるようにしてくださ。
ゲーム開始時とリトライ時にジャンル「普通」、「国旗の柄が似ている」、「大陸別」、「高難易度」を選べるようにしてください。
最高得点を記録して画面に表示するようにしてください。
結果表示の時にリアルな世界地図を表示して、選んだ国の位置に赤丸を表示して。
ジャンル毎に最高得点をコメント登録機能を改造して記録して。
トップ画面には各ジャンルの高得点者３名を得点の高い順に表示して
開発時ノウハウ
AIも人間と同じミスをする
- 機能追加・修正を指示した場合に、影響範囲の確認がおろそかになりがちです。きちんと全体を把握して機能追加・修正を行うように指示しましょう
- 構文ミスも発生します。JavaScriptなどはカッコの不一致が発生しますので、修正後は文法チェックもさせましょう
- ソースにコメントを入れてもらいましょう。指示する場合は「何を目的とした処理かを説明する内容」とするのがおすすめです
- 作成途中で詳細設計書を作ってもらって内容を確認しましょう。自分の指示が正しく実装されているかの確認が楽になります
Q CLI作成成果物例
### プロジェクト構成
シーケンス図
デバックのコツ
- 基本指示すればQ CLIがテストケースを作って実施してくれます
- JavaScriptが問題の場合はデバック文を埋め込んでくれます。あとはブラウザの開発者モードで実行してデバック文のエラー内容を伝えると解決してくれます
- 確認観点を変えて指示するのも効果的です
さいごに
Amazon Q CLIはできる子です。Cognitoのテスト用クライアントアプリなんかもすぐ作ってくれます。上手に使えば業務においてかなりの稼働削減効果がでます。私の場合は2025年6月9日(月)に行われたJAWS-UG 横浜支部イベントから使いはじめましたが、もう手放せなくなりました。