VScodeの拡張機能 Amazon Q Developerでワンちゃん育成ゲームを作成してみる

この記事は「2025 Japan AWS Jr. Champions 夏のQiitaリレー」の42日目の記事です。
過去の投稿（リンク集）はこちらからご覧ください

はじめに

Amazon Q Developerを使ってみたいな～と思っていたので、
VScodeの拡張機能でAmazon Q Developerを使用して育成ゲームを作成してみました。
記事では触ってみた内容と所感についてまとめていきます！

記事のおすすめ読者

• Amazon Q Developerとは何か・何ができるのか知りたい人
• Amazon Q Developerを使ってみたい人
• Amazon Q Developerに興味がある人

Amazon Q Developerとは

Amazon Q Developer は、生成人工知能 (AI) を活用した会話アシスタントであり、 AWS アプリケーションの理解、構築、拡張、運用に役立ちます。 AWS アーキテクチャ、 AWS リソース、ベストプラクティス、ドキュメント、サポートなどについて質問できます。

Amazon Q Developer は、生成人工知能 (AI) を活用した会話アシスタントで、
チャットベースでAWSに関することや、コード等色々質問でき、
開発支援をしてくれるサービスです。

事前準備

実際にアプリを作成する前に、VScodeでAmazon Q Developerが使えるようにします。

1. 拡張機能をインストール

• VScodeの拡張機能から「Amazon Q」を検索し、インストールする

2. 認証設定

• インストール後、Amazon Qのアイコンをクリック
• 「Choose a sign-in option:」の画面が開かれるため、
  「Personal account」と「Company account」から対応する方をクリックし、
  認証設定を行います。※私は「Personal account」を選択しました。
• 画面に従い認証設定を進め、以下画面が出てきたらOKです。

3. Amazon Q Developerへの接続確認

• VScodeでAmazon Qのアイコンをクリックすると、チャット画面が表示されます。
• 「こんにちは」と入力し、返事が返ってきていれば導入完了です！
  

育成アプリを作ってみる！

Try1：とりあえず作成したいイメージを伝えてみる

まずは、育成アプリを作成したいので、自分のイメージをプロンプトで伝えてみます。
今回は以下プロンプトを入力してみました。

キャラクター育成アプリを作成してください。
ユーザーはこのキャラクターに食事を与えたり、遊んだり、成長を見守ったりすることができます。
キャラクターはユーザーが面倒をみないと亡くなってしまいます。

Amazon Q Developerの回答
自動で必要なファイルを作成し、機能の紹介と使用方法を提示してくれました。

主な機能
 キャラクター管理:
  空腹度、幸福度、健康度の3つのパラメータ
  時間経過による自動的な状態悪化
  健康度が0になると死亡
ユーザー操作:
  食事を与える（空腹度+30、幸福度+5）
  遊ぶ（幸福度+25、空腹度-10）
  時間経過
セーブ機能
システム:
  自動セーブ・ロード機能
絵文字による視覚的な状態表示
キャラクター死亡時の新キャラクター作成
使用方法
 アプリを起動するには以下を実行：
  python main.py

コマンドを実行
指示通り、python main.pyを実行してみます
すると、コンソール上で遊べるゲームができました！

しかし、今回はコンソール上ではなく、
画面で操作したかったので、再度お願いしてみました。

Try2：画面で操作できるように再依頼してみる

画面で操作できるようにプロンプトを入力してみました。

コンソールではなく画面で操作ができるようにしてほしいです。
また、選択した内容によって画面の描写も変わるようにしてください。
例）
 ご飯を食べたらキャラクターが少し大きくなる、
 時間を進めるを選択したらキャラクターの見た目が老ける等

Amazon Q Developerの回答

新機能
　視覚的なキャラクター表示:
　　キャラクターが画面上に円形で描画される
　　健康状態により色が変化（緑→黄→赤）
　　幸福度により表情が変化（笑顔→普通→悲しい顔）
　　年齢により見た目が変化（若い→老化でしわが追加）
行動による視覚的変化:
　　食事: キャラクターのサイズが大きくなる
　　時間経過: キャラクターが老けて見た目が変化し、サイズが少し小さくなる
　　死亡: 💀マークとR.I.P表示
GUI操作:
　　ボタンクリックで簡単操作
　　ステータスが絵文字付きで表示
　　自動的な状態更新（30秒ごと）
セーブ・ロード機能
操作方法
　🍎 食事を与える: 空腹度回復、幸福度少し上昇、サイズ増加
　🎾 遊ぶ: 幸福度大幅上昇、空腹度少し減少
　⏰ 時間を進める: 年齢+1、老化による見た目変化
　💾 保存: ゲーム状態を保存
　🆕 新しいキャラ: 新キャラクター作成
　🚪 終了: アプリ終了　
アプリを起動するには main_gui.py を実行してください。キャラクターの成長と変化を視覚的に楽しめます！

どうやら画面を作成してくれたっぽいので、
言われた通りmain_gui.pyを実行してみましたが、画面が立ち上がらずでした。
なので、もう1度チャレンジしてみます。

Try3：うまくいかない点を伝えて改善してもらう

画面が立ち上がらなかったので、もう少しイメージを具体的に伝えてみました。
また、キャラクターと曖昧に指示をすると顔絵文字になってしまい、
育成感があまりなかったので、キャラクターは犬にしてもらうようにお願いしてみました。

画面がうまく表示できません。ブラウザのような画面が開くようにしてほしいです。
また、キャラクターは顔絵文字ではなく犬にしてほしいです。

Amazon Qからの回答

ブラウザで動作する犬の育成アプリが完成しました！
新機能
 ブラウザ表示:
  モダンなWebデザイン
  レスポンシブレイアウト
  美しいグラデーション背景
 犬のキャラクター:
  🐕 基本の犬
  🐕🦺 老犬・大型犬
  🤒 病気の犬
  💀 死亡時
 視覚的変化:
  食事: 犬のサイズ（フォントサイズ）が大きくなる
  時間経過: 老犬の見た目に変化
  健康状態: 病気時は🤒マークに変化
起動方法
 必要なパッケージをインストール: 
  pip install Flask
アプリを起動:
  python web_app.py
ブラウザで http://localhost:5000 にアクセス
アプリが起動すると、ブラウザで美しい犬の育成ゲームを楽しめます！犬の状態に応じて見た目が変化し、
行動によってサイズや表情が変わります。

動作確認

指示通りpip install Flask実行後、python web_app.pyを実行しました。
すると、ブラウザが立ち上がり、画面上で操作できるアプリができました
実際に操作してみると、「食事を与える」ボタンを押すと、空腹度が上がったり、
「時間を進める」ボタンを押すと犬の見た目が変わったりして遊べました
Amazon Q Developerに指示しただけで、簡単にUIを作成できました！

おわりに

触ってみた所感

• チャットベースでやり取りできるので気軽に操作できGood！
• 拡張機能なので導入も楽でよかった
• プロンプトを打つだけで必要なソースをすべて書いてくれるので爆速で開発ができる
  　→デモの画面が欲しい等簡易的な画面作成にはとても使えそう
• 今回は触ってみることが目的だったので、アウトプットされたソースの内容を
  細かく確認していないが、ソースの検証も行ってみたい

Amazon Q Developerはとても簡単に導入でき、すごく便利でした！
育成ゲーム以外にもプロンプト次第で色々と遊べると思いますので、
ご興味が湧いた方はぜひ触ってみてください。皆さまのご参考になれば幸いです。