AWSを学ぶなら遊びながら！「AWS図鑑コレクター」をAmazon Q CLIだけで作ってみた

はじめに

今回は現在開催中の 「Amazon Q CLI でゲームを作ろう」キャンペーン に参加するため、ゲームを完全ノーコーディングで開発してみました。

実は今回、自分では1行もコードを書いていません！

すべて Amazon Q CLI（AIコーディングアシスタント）にお願いしただけで、動くブラウザゲームが完成してしまったのです。

この投稿では

• どんなゲームを作ったか？
• どうやってQ CLIとやり取りしたか？

といった点を中心にご紹介します！

🎮 作ったのは「AWS図鑑コレクター」

「AWS図鑑コレクター」は、ガチャでAWSサービスカードを集めるクリック型ブラウザゲームです。

クリックしてコインを貯めてガチャを回し、出てきたAWSサービスをコレクションに追加。
全種類のカードを集めて、自分だけの「AWS図鑑」を完成させるといったものです！

ゲームの遊び方（クリックして展開）

1. 「クリック！」ボタンを50回押すと10コイン獲得
2. コインで「AWSガチャを引く」
3. ランダムにAWSサービスのカードが出現
4. サービスの説明を読んで「コレクションに追加」
5. 全カードを集めればコンプリート！

🤖 私はなにをしたのか？→ 指示を出しただけ！

今回はすべてのコード生成・ロジック設計・HTML/CSSのレイアウトまで、Amazon Q CLIにお任せしました。

例えばこんな感じで会話しました：

私「クリックするとコインが貯まる処理をJavaScriptで書いて」
Q CLI「以下のように実装できますよ（コード提示）」

私「ランダムでAWSサービスカードを出して、コレクションに追加したい」
Q CLI「こうすればできます（DOM構成込みで提示）」

このように、自分は“アイデアを言葉にしただけ”でゲームが組み上がっていく体験でした。
コーディング未経験の方でも、本当にゲームが完成する未来が近づいてる…と感じました。

🔧 技術構成（すべてQ CLIにお願いしました）

• HTML
• CSS
• JavaScript

プロジェクトは以下の3ファイル構成で、ローカルでindex.htmlを開くだけで動きます。

aws-zukan-collector/
├── index.html
├── style.css
└── script.js

🧠 Amazon Q CLIのスゴさを感じたポイント

• 💬 自然言語で命令できる
  → 「こうしたい」だけ伝えれば、構文の知識不要でコードが生成される

• 🧩 コード同士の整合性も自動で取ってくれる
  → HTMLとJSが連動していない、みたいなミスが起きにくい

• 🔁 修正・改善の会話がしやすい
  →「ここをもうちょい早く」「このUI直して」など微調整にも強い

👕 目的はキャンペーン参加ですが、それ以上の学びがあった

今回の「Amazon Q CLIでゲームを作ろう」キャンペーンでは、参加条件としてゲームを作ってアウトプットするだけでTシャツがもらえるというお得な企画でした。

しかし実際にやってみて感じたのは、
「AIと一緒にプロダクトを作る体験」は、学習体験としても非常に面白いということです。

「作って学ぶ」を支援してくれるAmazon Q CLIは、今後の個人開発にもかなり使えそうです。

最後まで読んでいただきありがとうございました🙌

👉 GitHubリポジトリはこちら：https://github.com/RyosukeKonno/AWS-Collector-Game

📌 この記事は Amazon Q CLI 「ゲーム作ってTシャツもらえる」キャンペーン参加用に執筆しました！