Amazon Q CLI 触ってみた

こちらに参加してみたくAmazon Q CLI を触りました！

https://aws.amazon.com/jp/blogs/news/build-games-with-amazon-q-cli-and-score-a-t-shirt/


## 環境
```
MacOS Sequoia 15.5
q 1.12.1
Phaser 3.90.0
```

## セットアップ
[ドキュメント](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-installing.html#command-line-installing-macos)通りにセットアップですんなりいけました。
わかりやすくてありがたかったです
すぐおわりました
```
q chat
To learn more about MCP safety, see https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-mcp-security.html


    ⢠⣶⣶⣦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣤⣶⣿⣿⣿⣶⣦⡀⠀
 ⠀⠀⠀⣾⡿⢻⣿⡆⠀⠀⠀⢀⣄⡄⢀⣠⣤⣤⡀⢀⣠⣤⣤⡀⠀⠀⢀⣠⣤⣤⣤⣄⠀⠀⢀⣤⣤⣤⣤⣤⣤⡀⠀⠀⣀⣤⣤⣤⣀⠀⠀⠀⢠⣤⡀⣀⣤⣤⣄⡀⠀⠀⠀⠀⠀⠀⢠⣿⣿⠋⠀⠀⠀⠙⣿⣿⡆
 ⠀⠀⣼⣿⠇⠀⣿⣿⡄⠀⠀⢸⣿⣿⠛⠉⠻⣿⣿⠛⠉⠛⣿⣿⠀⠀⠘⠛⠉⠉⠻⣿⣧⠀⠈⠛⠛⠛⣻⣿⡿⠀⢀⣾⣿⠛⠉⠻⣿⣷⡀⠀⢸⣿⡟⠛⠉⢻⣿⣷⠀⠀⠀⠀⠀⠀⣼⣿⡏⠀⠀⠀⠀⠀⢸⣿⣿
 ⠀⢰⣿⣿⣤⣤⣼⣿⣷⠀⠀⢸⣿⣿⠀⠀⠀⣿⣿⠀⠀⠀⣿⣿⠀⠀⢀⣴⣶⣶⣶⣿⣿⠀⠀⠀⣠⣾⡿⠋⠀⠀⢸⣿⣿⠀⠀⠀⣿⣿⡇⠀⢸⣿⡇⠀⠀⢸⣿⣿⠀⠀⠀⠀⠀⠀⢹⣿⣇⠀⠀⠀⠀⠀⢸⣿⡿
 ⢀⣿⣿⠋⠉⠉⠉⢻⣿⣇⠀⢸⣿⣿⠀⠀⠀⣿⣿⠀⠀⠀⣿⣿⠀⠀⣿⣿⡀⠀⣠⣿⣿⠀⢀⣴⣿⣋⣀⣀⣀⡀⠘⣿⣿⣄⣀⣠⣿⣿⠃⠀⢸⣿⡇⠀⠀⢸⣿⣿⠀⠀⠀⠀⠀⠀⠈⢿⣿⣦⣀⣀⣀⣴⣿⡿⠃
 ⠚⠛⠋⠀⠀⠀⠀⠘⠛⠛⠀⠘⠛⠛⠀⠀⠀⠛⠛⠀⠀⠀⠛⠛⠀⠀⠙⠻⠿⠟⠋⠛⠛⠀⠘⠛⠛⠛⠛⠛⠛⠃⠀⠈⠛⠿⠿⠿⠛⠁⠀⠀⠘⠛⠃⠀⠀⠘⠛⠛⠀⠀⠀⠀⠀⠀⠀⠀⠙⠛⠿⢿⣿⣿⣋⠀⠀
 ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠛⠿⢿⡧

╭─────────────────────────────── Did you know? ────────────────────────────────╮
│                                                                              │
│     Get notified whenever Q CLI finishes responding. Just run q settings     │
│                        chat.enableNotifications true                         │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

/help all commands  •  ctrl + j new lines  •  ctrl + s fuzzy search
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🤖 You are chatting with claude-4-sonnet


```
## いざ、実践
今回は、既存の環境で行ってみました。
ReactとPhaserで開発していて、フォルダだけ追加し、中身は何も書かずに進めていきました

簡単なCarゲームを作ってもいました。
1時間以下で実装できました。
進め方はこんな感じでした。
ふわっとしたイメージしかありませんでしたが実装してくれてすごいと感じました。
- ２Dののカーゲームを作って欲しいです
- 障害物を避けていきます
- 障害物にぶつかったらゲームオーバーです
- 移動方法
- 障害物の描画とその移動
素材を用意したらもっと良くなるのかなと感じましたが、少し用意がめんどうだったので今回は準備しませんでした

### ゲームの遊び方
最後に遊び方など出力してもらいました。
自分で書くとちょっとめんどくさいことを書いてくれるのでありがたいとかんじましt
> ### 遊び方
> 1. 移動操作: A/Dキーで左右に移動
> 2. 目標: 赤い障害物に当たらないように避け続ける
> 3. スコア: 障害物を避けるたびに10点獲得
> 4. ゲームオーバー: 障害物に衝突するとゲーム終了
> 5. リスタート: ゲームオーバー後、スペースキーで再開
> ### 主な機能
> • **リアルタイム操作**: スムーズなキーボード操作でプレイヤーを制御
> • **動的難易度**: スコアが上がるにつれてゲーム速度が徐々に増加
> • **視覚的フィードバック**: 道路の白線が動いて走行感を演出
> • **スコアシステム**: リアルタイムでスコアを表示・更新
> • **衝突判定**: 正確な当たり判定でゲームオーバーを検知
> • **自動リスタート**: ワンキーでゲームを即座に再開可能
### できたもの
[こちら](https://youtu.be/5g9PJ1iTLBg)になります
![スクリーンショット 2025-06-21 5.45.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780597/25d69ee5-e3b6-4a5a-ac86-d537366e5e60.png)

### 苦労した点

![スクリーンショット 2025-06-21 6.10.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780597/e66d3fdd-f020-4dba-8a89-c11c4a4fd2a1.png)
ReactとPhaserという環境が原因だと思いますが、Phaserの従来のものでは動くことができずこれを気づくのに遅れて結構時間が手間取りました。Logを出してもらった結果うまくいってなさそうだったので直接DOM入力に変更しました。
うまく修正してくれなかったのは全体の環境がどのような感じかを伝えてなかったためかなと思いました。
ReactとPhaserで開発していたのですが、移動がPhaserの標準の入力方法ではなかなかうまくいかなかったため直接DOMだとうまくいかないか
なと思い、指示したところ動いたためちゃんと修正できたためすごいと感じました
![スクリーンショット 2025-06-21 6.15.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780597/29debbf3-be1b-40c1-9184-45a8b66f0e25.png)
### 感想
CLIで操作するため、楽だと感じました。
CLIだけで実装するなかなか治らない修正箇所はAIが実装してくれた内容を読んで、どこが原因かを指示しないとなかなか修正できないなと感じました。どのAIもそうなのかもしれませんが...
自分の手で修正したいなと思いつつ、代替案を提案したら即座に修正してくれたので環境が悪かったのかなともいました。今回の場合は環境がちょっと独特なだけでシンプルな環境だとそんなことないのかな？と思ったのでまた別で作ってみたいと思いました！