AWS素人が「Amazon Q CLIでゲームを作ろうTシャツキャンペーン」に挑戦してみた

## 挑戦するきっかけ
最近、いろんな勉強会に参加させてもらっているAWS初心者の私ですが、参加した勉強会でAmazon Q CLIに触れて感銘を受けて以来、今回のキャンペーンには是非、挑戦してみたいと思っていたのでした。
しかし、日々の業務に忙殺され、今回のキャンペーン期間終了も目前に迫ったある日、隙間時間で参加した勉強会で今回のキャンペーン期限が2025.6.20から2025.6.30に延伸されたことを聞きました。

この瞬間、周囲に✨キラキラ✨が発生し、声が聞こえたのです。
**戦えとガンダムが言っている。**
（最近、自分を奮い立たせるのは、この言葉しかねぇ）

## まずは環境構築する
１．手始めにAWS builder IDがなければ、サインアップしましょう。
　　[ビルダーIDの登録はこちら](https://community.aws/builderid?trk=b085178b-f0cb-447b-b32d-bd0641720467&sc_channel=el)

２．Amazon Q CLIにアクセスするためのアクセスキーを準備する。
　・AWSマネジメントコンソールのIAMユーザでユーザ名をクリック。
　・セキュリティ認証情報からアクセスキーを作成を選択。
　・ユースケースにコマンドラインインターフェース(CLI)を選択。
　・画面下の確認のチェックボックスに✅を入れて、アクセスキーを作成する。
　これらの情報はAWS CLIの設定時に必要なので、表示されたアクセスキーIDとシークレットアクセスキーを控えるか、CSVファイルでダウンロードしておきます。

３．WSLとAmazon Q CLIをインストールする
　私の環境はWindowsなので、Linuxを動かせるようにターミナルからWSLをインストールします。

　環境構築を紹介した記事を参考に、以下手順で構築しました。[こちらを主に参考にしました](https://community.aws/content/2v5PptEEYT2y0lRmZbFQtECA66M/the-essential-guide-to-installing-amazon-q-developer-cli-on-windows)
　・WSLのインストール　`wsl --install`
　・仮想UbuntuインスタンスをWSL環境へインストール（Ubuntuのアカウント作成含む）
　・Ubuntuの不足パッケージを追加インストール
　・Amazon Q Developerのインストーラをダウンロードしてインストール
　・Builder IDを使用したAmazon Q Developerへのログイン　`q login`
  （Use for Free with Builder IDを使用してアクセスキーを入力）

４．Amazon Q Developerを起動する
　`q chat`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3907220/2ae21b8c-f9a1-4ab4-bd83-7039960546ac.png)

## Amazon Q CLIと対話する
今回はWebブラウザ上でのクイズゲームを作ることにしました。
ゲーム概要：
あなたは旅行会社Amazon Tourにて、顧客にツアーを紹介する業務をしています。
顧客が行きたい国を告げると４択のパネルに該当国の都市が１つだけ表示され、他の３択は他国の都市を表示する。
正解パネルをクリックするとスコアが計上され、早く回答できるほど高スコアになる。
１分間でどれだけ顧客を捌けるか競うゲームとしました。

何度もプロンプトを入力したくなかったのと、AmazonQの賢さを信じて、一撃必殺でゲームが完成してくれるように細かく指示を出しました。
実際のプロンプト：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3907220/8f55d5c8-5d75-42ff-9fe7-05067762d345.png)

## ゲームが動くようになるまで
Amazon Q CLIは過去にも使ったことあるので、要件を提示すれば、２～３分でゲームを実装、間違いをある程度は自身で正して、デプロイしてくれるのは想定内です。

今回、最初に発生したエラーはこれでした。
404 not Found

しかし、AmazonQのすごいところは、自発的にいろいろな解決策を次々に自動で試してくれるところです。
そして、最終的に行き着いた答えはこれでした。

Unable to locate credentials. You can donfigure credentials by running "aws configure".
AWS認証情報が設定されていないようです。デプロイの準備として、まずゲームファイルの構造を確認しましょう。

あ、そういえば、AWS CLIの設定忘れてた💦
というわけで、大至急、aws configureを設定して、再実行します。

次に発生したエラーはこれでした。
403 Forbidden

An error occured(AccessDenied) when calling the PutBucketPolicy oprateion:～中略～
the BlockPublicPolicy block public access setting.
ぐぬぬ、今度はs3のバケットにアクセスすることができない模様。

エラー内容をチャットで伝えて、対処するようにお願いしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3907220/3b3ea8cc-bffd-4ef9-866c-8dbc6a895c03.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3907220/f9554344-822c-4ce4-b73d-dcc645f8aded.png)

指定されたURLにアクセスすると...

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3907220/71ea92c8-a1a8-43c4-9128-e15fa44d46f6.png)

おぉっ！自分が作っても、AIが作っても初めて画面が表示されたときの喜びは変わりませんね！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3907220/1d580231-b088-42c9-90b2-1d2edc986baa.png)

実際のゲーム画面です。
基本動作は問題なくできていました。
最初のプロンプト入力開始から、ここまで１時間弱でした。

さて、ここからは細かい要求をAmazonQがどこまで理解してくれるのかを検証したかったので、色々と機能追加をしてみました。
・顧客対応時間が長いと待ち行列ができる
・顧客の入場、退場をアニメーションにする
・３人以上の待ち行列で怒りマークを追加する

AmazonQも要求に対して、回答を間違えた場合、ペナルティのルールを実装したり、
タイマーの精度がよくなるように処理ごとにタイマーを分離させたり、
窓口スタッフのセリフのバリエーションを増やしてくれたり、
こちらが要求していないことまでも自動で実装してくれたりしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3907220/cde6e8f1-4829-4ac2-bfc6-579884c11a0b.png)


コストやセキュリティについて質問すると、丁寧な回答が返ってくるのもすごいですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3907220/7b149629-6b6f-4890-9214-ebff4461ff8b.png)

ここまでくると、ツールというより相棒ですね。