🃏

Amazon Q CLI で神経衰弱ゲームを作ってみた

に公開

はじめに

最近はCLI上で動作するエージェント型の生成AIツールが話題になっていますね。Zennのトレンド欄を見てみるとClaude CodeやGemini CLIの記事がたくさん見つかります。

今回は、Amazonから提供されているAmazon Q CLIを使ってゲームを作ってみました。2025年6月30日にかけて「Amazon Q CLI でゲームを作ろう Tシャツキャンペーン」が開催されており、そのキャンペーンの応募用の記事として、ゲーム作成の過程やこのツールの特徴などを紹介したいと思います。

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

作成したゲームは以下のURLで公開しています。
AWSのキャンペーンということで、AWSのアイコンを使った神経衰弱ゲームを作ってみました。

https://tanny-pm.github.io/aws-puzzle/


ゲームのスクリーンショット

ソースコードは以下のリポジトリで公開しています。(今回は自分でコードを一切書いていないため、不要なファイルも残っています。)
https://github.com/tanny-pm/aws-puzzle

環境構築

Amazon Q CLIを利用する際はAWS ビルダー IDが必要になります。無料版で利用する分にはクレジットカード情報を登録する必要がありません。そのあたりは安心ですね。

IDを取得したら、ツールをインストールします。(今回はMac OS 15.5で実行しています)以下の記事を参考にして、Homebrewでインストールしました。

https://dev.classmethod.jp/articles/amazon-q-developer-japanese-language-support-ide-cli/

手順通りにインストールして完了!と思いきや、筆者のzsh上でqコマンドを実行すると、いくつかの問題が発生してしまいました。

  • qコマンドをquitコマンドのエイリアスに設定しているため、Amazon Q CLIを起動できない。
  • zshのAutocompleteプラグインとAmazon Q CLIのコマンド補完機能が競合し、文字を入力するたびにエラーが出る。

これらの問題は.zshrcファイルを修正して解決しました。(とりあえず、個別の設定をすべてリセットしてしまいました。)

Amazon Q CLIはコード生成機能以外にもいくつかのコマンド入力支援機能を有しているので、シェルの既存設定との競合には注意が必要です。

開発手順

ここからは、Amazon Q CLIでゲームを作成するまでの手順を順に紹介します。なお、私はエージェント型のAIでコーディングするのは今回がはじめてです。ベストプラクティスとは異なる使い方をしている箇所も多いと思うので、その点はご了承ください。

作業ディレクトリの作成

まずは作業用のディレクトリを作成し、その中でq chatを実行してAmazon Q CLIのチャット機能を実行します。

$ mkdir aws-puzzle
$ cd aws-puzzle
$ q chat


Amazon Q CLI Chatの起動画面

Amazon Q CLIは、このディレクトリの中でのみファイルの作成・編集・削除等を実行できるようです。

ちなみに、/modelコマンドを入力することで、利用するAIモデルを切り替えることができます。今回はclaude-4-sonnetを選択してみました。

アイデア出し

次に、作成するゲームのアイデアを考えます。ここは既存の生成AIツールと同様に対話形式でいくつかのアイデアを考えてもらいました。


アイデア出し

この記事に至るまでにアクションゲームなども作成してみましたが、どうもゲームバランスの調整がうまくいきませんでした。そのため、調整が必要なさそうなパズル系のゲームを作成することにしました。

メイン機能の実装

アイデアが決まったら、あとは「これを実装してください」と指示するだけでゲームの原型を作成してくれます。今回はGitHub Pagesで公開したかったので、そのことを指示すると、JavaScriptベースで作成してくれました。完了まで5分程度かかりました。


ゲームのコードを作成する様子

この時点でゲームの原型がかなり実装できていたのには驚きました。とくに指示していないのに難易度設定なども実施してくれています。


作成完了時の出力

機能の追加

次に、ゲームに新しい機能を追加します。AWSの学習にも使えるように、カードがそろったらそのサービスの概要を表示する機能を追加しました。


機能追加の指示

説明文の生成もAmazon Q CLIにおまかせできます。ここでもイメージしていた機能が一発でできあがりました。


サービス概要の表示機能

なお、説明文のデータを作成するためのエディタまで作ってくれました 笑。「これもあったほうがいいかも?」とAIが考えてくれたみたいです。


CSVファイルの作成ツール

gitの利用

ここまで進めたところで、バージョン管理ができていないことに気づきました。「ここまでの内容をコミットしてください」と指示するだけで、gitの初期化とコミットまで実施してくれました。もちろんコミットメッセージも自動でつけてくれます。


最終的なコミット履歴

GitHubとの接続設定は自分で行なった上で、「プッシュも実行してください」と指示すると、プッシュも実行できます。

デバッグ

最初の実装時は、「ペアになったカードが表向きのままにならない」という表示上の問題がありました。そこで、その問題の修正を依頼しました。

ただ、何度か指示してもなかなか解決せず、「ブラウザ上の表示結果を伝える→それに基づいてコードを修正する」というやりとりを何度か繰り返しました。


デバッグの指示

Amazon Q CLIからはブラウザを起動したり、その表示結果を確認したりはできないので、そこは人間が結果を見て伝えてあげる必要がありそうです。

テストの作成と実行

ユニットテストのコード作成と実行も依頼してみました。(これもgitの利用と同様に、本来は最初に指示しておいたほうが良いと思います)Node.jsを自分でインストールしておく必要がありますが、テストの実行から、実行結果に基づくコードの修正まで実施してくれました。

作成したテストケースの一覧をファイルに出力してもらうことで、現在のアプリがどのような仕様になっているかを把握するのに役立ちそうです。


テストケースの一覧

ドキュメントの作成

最後に、READMEや技術ブログ記事のドラフトの作成を依頼しました。

https://github.com/tanny-pm/aws-puzzle/blob/main/README.md

https://github.com/tanny-pm/aws-puzzle/blob/main/amazon-q-cli-blog.md

ソースコードの内容や、これまでのチャットのやり取りを踏まえたドキュメントを作成してくれました。この機能はドキュメントのない既存プロジェクトでも活用できそうですね。

Amazon Q CLIのその他の機能

Amazon Q CLI には今回利用したチャット機能以外にもいくつかの機能があり、CLIの操作を効率化できます。主な機能の概要をメモしておきます。

Autocomplete

IDEのようにコマンドの入力補完をしてくれる機能です。筆者の環境ではzshの同名のプラグイン機能と競合してしまっていました。


Autocomplete機能(Amazon Q CLIのチュートリアル画面から借用)

補完候補がポップアップで出てくる点は zshのAutocomplete機能よりも使いやすいです。が、どのあたりに生成AIが活きているのかはよくわかりませんでした。(生成AIとはとくに関係ないAI機能?)しばらく使ってみてzshとの違いを探ってみたいと思います。

Translate

CLI上で実行したい内容を日本語で質問することで、それに対応するコマンドを提案してくれる機能です。


コミット履歴の削除方法を日本語で質問した結果

ブラウザ上で実行する生成AIでも同じような回答を得られますが、結果をターミナルにコピペする手間が省けるのは便利です。

まとめ

今回は、Amazon Q CLIを使ってブラウザ上で動作するAWS神経衰弱ゲームを開発してみました。

生成されるコードの内容自体は既存の生成AIとは大きく変わりませんが、プロジェクトの基本的な骨組みからすべて作成してくれることで、開発効率が飛躍的に高まりました。

また、テストコードの作成と実行、デバッグ、コードのコミットなど、エンジニアが普段からCLI上で行なっている作業は問題なく実行できてしまいます。今回はツールの機能を試しながらの開発になってしまいました。しかし開発全体の進め方を最初に指示してから始めることで、人間が要件を指示するだけでほとんどの開発が完了するようになると思われます。

現在はエージェント型のAIがたくさん登場していますが、Amazon Q CLIは完全無料で利用できることが大きな強みだと思いました。自分のように趣味でたまに個人開発するだけの開発者の場合、月額課金ではないのはとても都合が良いです。簡単なアプリを作る時などは積極的に活用したいです。

GitHubで編集を提案

Discussion