作ろうと思ったきっかけ
もともとは会社の後輩から「Amazon Q CLIでゲームを作ると、TシャツをもらえるキャンペーンをAWSがやっている」と教えてくれたのがきっかけでした。
楽しそうだからやってみよう！と思っていたところに、JAWS-UG横浜で集まって一斉にゲームを作るというイベントを見つけ、どうせならみんなでワイワイやりたいということで参加してきました。
環境準備
当然のことながら、Amazon Q CLIが動く環境を整えておく必要があります。
AWS界隈はMac環境の人が多いと思うのですが、今回はWindows環境のWSL2（Windows Subsystem for Linux 2）上にAmazon Q CLIをインストールしておきます。
AWSコミュニティによるAmazon Q Developer CLIのインストールガイドを参考に、難なくインストールすることができました。
ついでにVSCodeにAmazon Qの拡張機能もいれておきました。
インストールした後、
|
1 |
q login |
でQにログインします。
会社のProライセンスがあったので、Use with Pro licenseを選択しました。
|
1 2 3 |
? Select login method › Use for Free with Builder ID ❯ Use with Pro license |
その後、
|
1 |
? Enter Start URL › |
IAM Identity CenterのURLを聞かれるので、これとリージョンコードを入力します。
表示されたURLをクリックすると、デバイス認証画面に飛ばされ、リクエストを承認すればログイン完了です。
qもしくはq chatと入力することでQ CLIが起動します。
一旦、
|
1 |
> /q |
で終わらせ、せっかくなのでデフォルトのClaude 3.7 SonnetからClaude 4 Sonnet（正確にはClaude Sonnet 4なんですかね？）を使うようにしたいと思います。
以下のコマンドを実行することでデフォルトのモデルを切り替えることができます。
|
1 |
q settings chat.defaultModel claude-4-sonnet |
これで準備万端です！
現地にて
AWSのSAさんからの説明が終わるなり、早速制作に取り掛かりました。
作るゲームのタイトルは「AWS CLI Typing Master」！
AWS CLIのコマンドを学びながらタイピング練習もできるというコンセプトのゲームです。
やっぱりAWS関連のゲームが作りたくて、このようなゲームにしました。
最初、シンプルにやってみたんですが、HTML＋JavaScriptで作られてしまって面白くなかったので、Reactで作るように方針変更しました。
VSCode上のWSLのターミナルから以下のコマンドでReactのプロジェクトを先に作りました。
|
1 |
npm create vite@latest awscli-typing-master -- --template react-ts |
この後、Q CLIを起動しプロンプトを打ち込んでいきます。打ち込んだプロンプトはこんな感じです。
ある程度の仕様はこちらから与え、あとは自由に考えてもらうようにしました。
|
1 2 3 4 5 6 7 8 9 |
AWS CLIのコマンドを学ぶのと同時にタイピング練習もできるタイピングソフトをReact(TypeScript)ベースのきれいな画面で作成したいです。 プロジェクトの内容を読み取り、エラーがあれば解消するなど適切に処理してください。 以下にいくつかの条件を示します。 * ゲーム画面の見た目はAWS CLIからインスピレーションを得たものにすること * 最初にいくつかモードを選択できること * 正解のコマンドを入力した後に、そのコマンドが何をするものなのか、簡単な説明が表示されること * 入力中の文字は色を変える、カーソルを表示するなど、タイピングゲームらしい視覚的フィードバックを設けること * 入力の状況に応じてスコアが加算されること * ゲーム終了後のスコアがランキング10位以内に入った場合は、入力した名前とスコアを登録でき、登録後ランキング画面が表示されること |
この指示だけでいろいろ考えながら、どんどん作っていってくれました。
完成まで10分もかからなかったという体感です！
Reactで作るように指示しているので、コンポーネントやHooks、サービスなどもきちんと分けて作ってくれるのには本当にビックリしました。
また、初手だけでちゃんと動くものができました。
その後、
- コマンドのバリエーションをもっと増やしてください
- サービス別モードのAWSアイコンはhttps://d1.awsstatic.com/webteam/architecture-icons/q1-2025/Asset-Package_02072025.dee42cd0a6eaacc3da1ad9519579357fb546f803.zipからダウンロードしたものを使用してください
- CLIコマンドを入力しているときに打鍵音がなるようにしてください
などを実行し、仕上がった画面がこれです！
もちろん1ミリも自分では手を加えていません。
AWSアイコンについては自動的にダウンロードし、SVGを取り出した後、お掃除までしてくれるという手厚さ。
やってみての感想
まずはJAWS-UG横浜でみんなとワイワイできてとても楽しかったです♪
他のみなさんが作ったゲームの発表コーナーでは、どれも面白いものばかり（AWS寄りなアプリが多かったのもAWS愛を感じました）で、スゴ！の一言です。
単純なプロンプトを投げるだけでこんなにも簡単にアプリが作れてしまうなんて末恐ろしいと思うと同時に、より作りたいものが作られていく未来を感じました。
今回は簡単なゲームでしたが、もっと複雑なゲームを作れるのかも試してみたいです！！
執筆者プロフィール
- tdi デジタルイノベーション技術部
-
昔も今も新しいものが大好き！
インフラからアプリまで縦横無尽にトータルサポートや新技術の探求を行っています。
週末はときどきキャンプ場に出没します。
