[ハンズオン]AIへの指示だけで「五目並べ」を作ってみよう

Transcript

1. [ ハンズオン]AIへの指示だけで 「五目並べ」を作ってみよう 2026.09.26 Satoshi Kaneyasu
2. 目次 本日やること そもそも「五目並べ」とは（ルール確認） 「五目並べ」のローカルルール 今日のルール STEP 1 ：目的の共有 STEP 2 ：実装方針の作成 STEP 3 ：ゲームとして最低限の実装をする 余談： AI 駆動開発におけるテスト STEP 4 ：ローカルルールを足す STEP 4 の補足と余談 STEP 5 ：オレオレルールを足す
3. 本日やること 言葉だけで指示して、ブラウザで動く「五目並べ」を作ります。 直接コード修正するのは無しにします。 体験して欲しいことは、以下３点です。 言葉で指示して生成 AI に作らせる あえて、段階を踏む 曖昧さを減らすことを意識する 手順は以下の通りです。 目的の共有 実装方針の作成 ゲームとして最低限の実装をする ローカルルールを足す オレオレルールの実装
4. そもそも「五目並べ」とは（ルール確認） 五目並べの基本ルールは次のとおりです。 格子状の盤（交点、またはマス）に、2人が交互に石を置く 先手が黒、後手が白を使う 縦・横・斜めのいずれかの方向に、自分の石を5個連続で並べたら勝ち （長連：6個以上並べても勝ちにならないルールもある。詳しくはローカルルールの節を参照） 置いた石は動かない・取られない（並べるだけのゲーム） 盤が埋まっても決着しなければ引き分け ちなみに五目並べを競技化したものを「連珠（れんじゅ）」といいます。
5. 「五目並べ」のローカルルール ローカルルール ちょうど 5 個だけ勝ち （長連は勝ちにしない） 三三の禁止 四四の禁止 先手・後手のハンデ 盤のサイズ 置く場所 よくある扱いの違い 6 個以上並んでも勝ちにしない地域と、 6 個以上でも勝ちにする地域がある 3 の並びを同時に 2 つ作る手を「反則」とする家庭と、 ふつうに勝ち筋として認める家庭がある 4 の並びを同時に 2 つ作る手を反則にするかどうかも地域差があ る 先手が強すぎるので、 先手の初手を中央付近に限定する取り決めを置く地域がある 15×15 で遊ぶ地域もあれば、家にある紙やマス目に合わせて 9×9 や 19×19 で遊ぶ家庭もある 交点に置く流派と、マスの中に置く流派がある 補足 競技（連珠） では先手の長連は勝ちにならない 反則にする場合、 先手だけ禁止とすることが多い これも先手のみ対象にすることが 多い バランス調整のためのローカルな 工夫 盤が小さいほど短時間で決着する どちらでもゲームは成立する
6. 今日のルール 指示の中で「五目並べ」「連珠」を入れるのは禁止 「囲碁」「碁石」など、「五目並べ」を連想させるキーワードも禁止 ChatGPT などのチャット形式、 Claude Code などのコーディングエージェント、どちらでも OK 技術スタックの選定は任せます
7. STEP 1 ：目的の共有 「5目並べ作って」と言うと、AIは学習済みの一般的な実装を当てにいきます。 今日は「自分がルールを言葉で伝える」練習をしたいので、最初に方針をそろえておきます。 プロンプト例は別紙「プロンプト例.md」を参照してください。
8. STEP 2 ：実装方針の作成 実装方針を作るため、AIに相談します。 プロンプト例は別紙「プロンプト例.md」を参照してください。 リンター・フォーマッター・自動テストなどをやるかどうかも、 AI と認識合わせをしておくとよいでしょう。
9. STEP 3 ：ゲームとして最低限の実装をする ここでいったん考えてもらいます。「五目並べの "最低限の完成" とは何か」です。 勝敗が決まるまでが最低限かもしれないですし、 先手・後手が決められるまでを最低限と考える方もいるでしょう。
10. 余談：AI駆動開発におけるテスト 先日、こんな質問をいただきました。 「AI駆動開発でテストはどうしていますか？テストにAIを使用していますか？」 自動テストをAIに書かせてはいますが、それは回答ではないと思ったので以下のように答えていま す。 に指示を出す時に、概要とテストケース（または受入基準）を出力させるようにしています。 テストケースは何を持ってOKとするかの判断基準です。 概要とテストケースを合わせて見ることで、AIが作るものをどう認識しているか把握できます。 これをレビューした上で、そのテストケースを満たすように実装するよう指示しています。 AI レビュアーはレビューする時、概要とテストケースを重点的にレビューします。 ちなみに、AIがテストを無理やり通すように書いてしまう問題については、 ミューテーションテストなどを導入するしかないのかな、と考えています。
11. STEP 4 ：ローカルルールを足す 次は、あなたが知っているローカルルールを足してください。 ただし、「三三」などのローカルルールそのものを示す単語は避けて指示してください。 ローカルルールの追加は既存の動作に影響します。 いきなり直させず、先に影響範囲を確認してから実装させるのがコツです。 プロンプトの進め方は別紙「プロンプト例.md」を参照してください。
12. STEP 4 の補足と余談 ローカルルールの実装、思い通りの実装になっていますか？ うまくいかない場合は、具体的なことに踏み込んだ指示が必要かもしれません。 あと、修正する度に見た目が微妙に変わっていませんか？ 実務では、変えないところは明確に指示する必要があります。 AI は良くも悪くも指示されたことについて一直線に進むのでわりと豪快に直しがちです。 今回は連続している作業なので気にならないと思いますが、 実際の仕事では一度稼働したものを豪快に直すのはNGです。 従って、改修の場合は一旦影響範囲やテストケースを出させて、 既存のものに影響を与えないような直し方や、既存のものがちゃんと動くことについての認識合わせ が必要です。
13. STEP 5 ：オレオレルールを足す 最後は、自分だけのルールを加えてください。 ルールは何個追加してもOKです。 STEP 4 と同じく、いきなり実装させず先に影響範囲を確認してから進めましょう。 ルールが複数ある場合は1つずつ確認しながら追加するとトラブルが起きにくいです。