この記事は、Amazon Q CLIでゲームを作ろうキャンペーンに向けて書きました。
https://aws.amazon.com/jp/blogs/news/build-games-with-amazon-q-cli-and-score-a-t-shirt/
AWSもAIを使ったコード生成のCLIを提供しています。 それがAmazon Q CLIです。
以前は、VS Codeと統合されたQ Developer (旧 CodeWhisperer) が主流でしたが、最近はCLIも出ています。 CLIのほうがエディタ統合型よりも、自由が利くので私は好きです。
今回は、Amazon Q CLIを使って、ブラウザで動く五目並べを作ってみました。
インストール
Amzon Q CLIはDebianパッケージが提供されているので、簡単にインストールできます。
wget https://desktop-release.q.us-east-1.amazonaws.com/latest/amazon-q.deb
sudo apt install ./amazon-q.deb
インストールが終わったら、今回はフリー版を利用するため、Builder IDでログインします。
q login でログインすることができます。
q login
? Select login method ›
❯ Use for Free with Builder ID
Use with Pro license
五目並べを作る
q chat プロンプト でQにメッセージを送ることができます。
あまり日本でのサンプルがこれまでありませんでしたが、もちろん日本語も利用できます。
ちょっとブラウザだと表示が崩れてしまいますが、 Amazon Qのロゴとともに、Qが起動します。
q chat 五目並べのゲームをjavascriptで作って
⢠⣶⣶⣦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣤⣶⣿⣿⣿⣶⣦⡀⠀
⠀⠀⠀⣾⡿⢻⣿⡆⠀⠀⠀⢀⣄⡄⢀⣠⣤⣤⡀⢀⣠⣤⣤⡀⠀⠀⢀⣠⣤⣤⣤⣄⠀⠀⢀⣤⣤⣤⣤⣤⣤⡀⠀⠀⣀⣤⣤⣤⣀⠀⠀⠀⢠⣤⡀⣀⣤⣤⣄⡀⠀⠀⠀⠀⠀⠀⢠⣿⣿⠋⠀⠀⠀⠙⣿⣿⡆
⠀⠀⣼⣿⠇⠀⣿⣿⡄⠀⠀⢸⣿⣿⠛⠉⠻⣿⣿⠛⠉⠛⣿⣿⠀⠀⠘⠛⠉⠉⠻⣿⣧⠀⠈⠛⠛⠛⣻⣿⡿⠀⢀⣾⣿⠛⠉⠻⣿⣷⡀⠀⢸⣿⡟⠛⠉⢻⣿⣷⠀⠀⠀⠀⠀⠀⣼⣿⡏⠀⠀⠀⠀⠀⢸⣿⣿
⠀⢰⣿⣿⣤⣤⣼⣿⣷⠀⠀⢸⣿⣿⠀⠀⠀⣿⣿⠀⠀⠀⣿⣿⠀⠀⢀⣴⣶⣶⣶⣿⣿⠀⠀⠀⣠⣾⡿⠋⠀⠀⢸⣿⣿⠀⠀⠀⣿⣿⡇⠀⢸⣿⡇⠀⠀⢸⣿⣿⠀⠀⠀⠀⠀⠀⢹⣿⣇⠀⠀⠀⠀⠀⢸⣿⡿
⢀⣿⣿⠋⠉⠉⠉⢻⣿⣇⠀⢸⣿⣿⠀⠀⠀⣿⣿⠀⠀⠀⣿⣿⠀⠀⣿⣿⡀⠀⣠⣿⣿⠀⢀⣴⣿⣋⣀⣀⣀⡀⠘⣿⣿⣄⣀⣠⣿⣿⠃⠀⢸⣿⡇⠀⠀⢸⣿⣿⠀⠀⠀⠀⠀⠀⠈⢿⣿⣦⣀⣀⣀⣴⣿⡿⠃
⠚⠛⠋⠀⠀⠀⠀⠘⠛⠛⠀⠘⠛⠛⠀⠀⠀⠛⠛⠀⠀⠀⠛⠛⠀⠀⠙⠻⠿⠟⠋⠛⠛⠀⠘⠛⠛⠛⠛⠛⠛⠃⠀⠈⠛⠿⠿⠿⠛⠁⠀⠀⠘⠛⠃⠀⠀⠘⠛⠛⠀⠀⠀⠀⠀⠀⠀⠀⠙⠛⠿⢿⣿⣿⣋⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠛⠿⢿⡧
╭─────────────────────────────── 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
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
五目並べ（Gomoku）のゲームをJavaScriptで作りましょう。まずは現在のディレクトリ構造を確認して、必要なファイルを作成してい
きます。
🛠️ Using tool: execute_bash (trusted)
⋮
● I will run the following shell command: ls -la
⋮
↳ Purpose: 現在のディレクトリ内容を確認
total 8
drwxr-xr-x 2 grugrut grugrut 4096 May 31 13:05 .
drwxrwxrwx 57 grugrut grugrut 4096 May 31 13:05 ..
⋮
● Completed in 0.3s
ディレクトリが空のようですね。五目並べゲームを作成するために、HTMLファイル、CSSファイル、JavaScriptファイルを作成します
。
まず、HTMLファイルを作成します：
🛠️ Using tool: fs_write
⋮
● Path: /home/grugrut/src/github.com/grugrut/gomoku/index.html
+ 1: <!DOCTYPE html>
+ 2: <html lang="ja">
+ 3: <head>
+ 4: <meta charset="UTF-8">
+ 5: <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ 6: <title>五目並べ</title>
+ 7: <link rel="stylesheet" href="style.css">
+ 8: </head>
+ 9: <body>
+ 10: <div class="container">
+ 11: <h1>五目並べ</h1>
+ 12: <div class="game-info">
+ 13: <div id="status">黒の番です</div>
+ 14: <button id="reset-button">ゲームをリセット</button>
+ 15: </div>
+ 16: <div id="board" class="board"></div>
+ 17: </div>
+ 18: <script src="script.js"></script>
+ 19: </body>
+ 20: </html>
Allow this action? Use 't' to trust (always allow) this tool for the session. [y/n/t]:
> y
(略)
五目並べ（Gomoku）のゲームを作成しました！以下の3つのファイルを作成しました：
1. index.html - ゲームの基本構造を定義
2. style.css - ゲームのスタイルを定義
3. script.js - ゲームのロジックを実装
### ゲームの特徴
• 15×15の盤面サイズ
• 黒が先手、白が後手
• 縦、横、斜めのいずれかの方向に5つ石を並べると勝利
• リセットボタンでゲームをやり直し可能
• 現在のプレイヤーの表示
### 遊び方
1. ブラウザでindex.htmlを開きます
2. 黒が先手で、盤面の任意の場所をクリックして石を置きます
3. 交互に石を置いていき、先に5つ並べた方が勝ちです
4. 「ゲームをリセット」ボタンを押すと、いつでも新しいゲームを始められます
このゲームは基本的な五目並べのルールに従っています。必要に応じて、盤面のサイズ変更や追加機能（例：制限時間、手の取り消し
機能など）を実装することもできます。
ブラウザで開いて遊んでみてください！
ディレクトリの確認、ファイルの読込についてはこちらの確認をせずに勝手に動き、 ファイルに書き込む操作については、確認してから動くようになっています。
Amazon Q CLIでは、各アクションを「ツール」という形で実装しており、 信頼されたツールかどうかで確認を求めるかどうかが決まります。
> /tools
Tool Permission
▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔Built-in:
- execute_bash * trust read-only commands
- fs_read * trusted
- fs_write * not trusted
- report_issue * trusted
- use_aws * trust read-only commands
Trusted tools will run without confirmation.
* Default settings
💡 Use /tools help to edit permissions.
少し話が脱線しましたが、五目並べを作ってというだけで、html、javascript、cssを作ってくれました。 さっそくブラウザでindex.htmlを表示してみます。
見た目は非常にそれっぽいです。 対人戦専用だったので、一人でも遊べるようにCPUを実装してもらいます。
Amazon Qがすでに起動しているので、続けてチャットするだけです。
> CPUと対戦できるようにしたい
CPUと対戦できるように五目並べゲームを改良しましょう。JavaScriptファイルを修正して、シンプルなAIを実装します。
🛠️ Using tool: fs_read (trusted)
⋮
● Reading file: /home/grugrut/src/github.com/grugrut/gomoku/script.js, all lines
⋮
● Completed in 0.0s
(略)
+ 100: // CPU対戦モードで、CPUの番になった場合
+ 101: if (isCPUMode && currentPlayer === 'white' && gameActive) {
+ 102: statusDisplay.textContent = 'CPUの番です';
+ 103: isThinking = true;
+ 104: board.classList.add('thinking');
+ 105:
+ 106: // 少し遅延させてCPUの手を打つ
+ 107: setTimeout(() => {
+ 108: cpuMove();
+ 109: isThinking = false;
+ 110: board.classList.remove('thinking');
+ 111: }, 1000);
+ 112: } else {
+ 113: statusDisplay.textContent = `${currentPlayer === 'black' ? '黒' : '白'}の番です`;
+ 114: }
(略)
+ 323: // 特定の手の評価値を計算
+ 324: function evaluateMove(row, col, player) {
+ 325: let score = 0;
+ 326: const directions = [
+ 327: [0, 1], // 横
+ 328: [1, 0], // 縦
+ 329: [1, 1], // 右下がり斜め
+ 330: [1, -1] // 左下がり斜め
+ 331: ];
+ 332:
+ 333: // 一時的に石を置く
+ 334: gameState[row][col] = player;
+ 335:
+ 336: for (const [dx, dy] of directions) {
+ 337: // 両方向に連続する石の数をカウント
+ 338: let ownStones = 1; // 自分の石（現在の位置を含む）
+ 339: let emptyBefore = 0; // 連続する前の空きマス
+ 340: let emptyAfter = 0; // 連続する後の空きマス
+ 341: let blocked = 0; // ブロックされている端の数
(略)
### 追加した主な機能
1. 対戦モード選択
• 対人戦（PvP）とCPU対戦から選べるようになりました
• ラジオボタンで簡単に切り替え可能
2. 難易度設定
• 「簡単」「普通」「難しい」の3段階から選択可能
• CPU対戦モードを選択した時のみ表示されます
3. CPUの思考ルーチン
• 難易度に応じた思考アルゴリズムを実装
• 簡単：完全にランダムな手を打ちます
• 普通：70%の確率で賢い手、30%の確率でランダムな手を打ちます
• 難しい：常に最適な手を選びます
4. CPUの思考ロジック
• 勝利可能な手があれば最優先で選択
• プレイヤーの勝利を阻止する手があれば次に優先
• 石の連続数や両端の開き具合を評価して最適な手を選択
• 盤面の中央付近を優先する戦略も実装
5. UI改善
• CPUの思考中は「CPUの番です」と表示
• 思考中は盤面が少し暗くなる視覚効果を追加
• 引き分け判定も追加
### 遊び方
1. ブラウザでindex.htmlを開きます
2. 対戦モードを選択します（対人戦またはCPU対戦）
3. CPU対戦を選んだ場合は難易度を選択できます
4. 黒が先手で、盤面の任意の場所をクリックして石を置きます
5. CPU対戦モードでは、あなたが黒石を置くと、CPUが自動的に白石を置きます
6. 先に5つ並べた方が勝ちです
7. 「ゲームをリセット」ボタンを押すと、いつでも新しいゲームを始められます
このゲームでは、CPUの思考ロジックとして評価関数を実装しており、特に「難しい」モードではかなり強力な対戦相手になっていま
す。ぜひ挑戦してみてください！
評価関数も作っていて、なかなかちゃんと実装されていそうです。 特に「難しい」モードではかなり強力な対戦相手となっているそうで楽しみです。
弱すぎる………。 自分が並べることしか考えていません。 もう少しちゃんと思考ルーチンを作ってもらいましょう。
> CPUの思考ロジックが弱いです。相手が4つ連続で並べるのを阻止するロジックを入れましょう
CPUの思考ロジックを強化して、特に相手が4つ連続で並べるのを阻止するロジックを改善しましょう。現在のコードでは基本的な防御
ロジックはありますが、より強化する必要がありそうです。
(略)
CPUの思考ロジックを大幅に強化しました！特に相手が4つ連続で並べるのを阻止するロジックを重点的に改良しました。以下が主な改
善点です：
### 1. 相手の4連を検出する専用ロジックの追加
javascript
// 相手の4連を阻止する手を探す
function findBlockingFourMove() {
// 盤面上の各空きマスについて評価
for (let i = 0; i < BOARD_SIZE; i++) {
for (let j = 0; j < BOARD_SIZE; j++) {
if (gameState[i][j] !== '') continue;
// この位置に相手（黒）の石が4連になる可能性があるかチェック
if (hasThreatsAt(i, j, 'black')) {
return { row: i, col: j };
}
}
}
return null;
}
### 2. 脅威検出機能の強化
• hasThreatsAt 関数：特定の位置に相手の脅威（4連の可能性）があるかをチェック
• checkThreeInDirection 関数：指定方向に相手の石が3つ連続しているかをチェック
• checkOpenThreeInDirection 関数：両端が開いた3連を検出（より危険な形）
### 3. 評価関数の分離と強化
評価関数を2つの部分に分けて、より精密な評価を行うようにしました：
1. 攻撃的評価（evaluateDirections）：
• 自分の石の連続を評価
• 連続数や開放端の数に応じて点数を付与
• 評価値を大幅に引き上げ（例：3連続の評価を100→500に）
2. 防御的評価（evaluateDefense）：
• 相手の石の連続を阻止する価値を評価
• 相手の4連を阻止する手に高い評価値（5000点）
• 相手の3連を阻止する手にも高い評価値（1500点）
### 4. 思考ロジックの優先順位の明確化
javascript
function getSmartMove() {
// 1. 勝てる手があれば、それを選ぶ（最優先）
const winningMove = findWinningMove('white');
if (winningMove) return winningMove;
// 2. 相手が次に勝つ手があれば、それを防ぐ
const blockingMove = findWinningMove('black');
if (blockingMove) return blockingMove;
// 3. 相手の4連を阻止する手を探す（新機能）
const blockingFourMove = findBlockingFourMove();
if (blockingFourMove) return blockingFourMove;
// 4. 評価関数に基づいて最適な手を選ぶ
return findBestMove();
}
これらの改良により、CPUは以下のような強化された戦略で打つようになります：
1. 自分が勝てる手があれば必ず選ぶ
2. 相手が次の手で勝てる場合は必ず防ぐ
3. 相手の3連（4連になる可能性）を積極的に阻止する
4. 相手の石の配置パターンをより詳細に分析し、危険な形を検出して防ぐ
5. 自分の石を連続させる手と相手の石を阻止する手のバランスを取る
この改良により、CPUはより賢く、特に相手の4連を作らせないように戦略的に石を置くようになります。「難しい」モードではかなり
強力な対戦相手になっているはずです！
ふむふむという感じでデバッグしながら気になるところを直してもらってを、この後、数往復繰り返した結果、
ついに、自分に勝つCPUを作ってもらうことができました。
今回作ったコードは以下のリポジトリに配置しています。
https://github.com/grugrut/gomoku-amazon-q
わりとコメントも書いてくれてなかなかやるじゃんという印象でした。
その他の機能
Amazon Q CLIは、さすがにAWSの知識は豊富です。 コード生成をするだけでなく、APIコールが必要な質問をすると、勝手にAWSのプロファイルでAPIをコールしてくれます。
> いまの料金請求額をAPIで確認して
AWS の現在の料金請求額を API で確認するには、AWS Cost Explorer API を使用します。以下のコマンドで確認できます：
🛠️ Using tool: use_aws (trusted)
⋮
● Running aws cli command:
Service name: ce
Operation name: get-cost-and-usage
Parameters:
- TimePeriod: {"End":"2025-05-31","Start":"2025-05-01"}
- Metrics: ["UnblendedCost"]
- Granularity: "MONTHLY"
Profile name: profile
Region: us-east-1
Label: 現在の料金請求額を確認
⋮
● Completed in 1.544s
現在の料金請求額を確認しました。2025年5月の請求額は以下の通りです：
### 2025年5月の請求額
• **金額**: xx USD（約xx円）
• **通貨単位**: USD（米ドル）
• **期間**: 2025年5月1日〜2025年5月31日
• **ステータス**: 見積もり（Estimated: true）
この金額は現時点での見積もり額であり、月末までの使用状況によって変動する可能性があります。AWS Cost Explorer APIでは、特
定の期間の使用コストを詳細に確認することができます。
より詳細な内訳が必要な場合は、サービス別やリソース別の分析も可能です。また、AWS Management Consoleの「Billing & Cost
Management」ダッシュボードでも視覚的に確認できます。
API発行はデフォルトで信頼されたツールとなっているので、確認をせずに勝手に実行してしまいます。 しかし、今回、私の環境では信頼しない設定にしてもチャットでは信頼済と表示されて、勝手にAPIを呼び出してしまいました。 デフォルトで信頼されているのはREADのAPIだけということになってるとはいえ、好き勝手されないように与える権限には気をつけましょう。
まとめ
今回は、Amazon Q CLIを使って、こちらはコードを書かずにゲームを作ってみました。 五目並べということで、一般的なゲームだからこそスムーズにいったのだと思います。 ゼロから作る場合は、もっと人の手が必要になると思います。
新しいLLMが出てくるたびに、「○○が作れた!最強!」みたいな話がでてきますが、 あまり踊らされすぎないように、使えるところを見極めていきたいですね。
Share