AIによるコード生成でWEB開発やアプリ開発が誰でもできる！
と煽り、このツールはすごい！こんなサービスが爆誕！！！
みたいに毎日タイムラインに流れてきていますよね。
でもね、本当に「自分が作りたいモノ」を作ろうと思ったら、基礎が必要なのです。
建物でも最初に図面引くでしょ？
あれと同じです。
WEB開発やアプリ開発の図面、それが「要件定義書」です。
この有無がバイブコーディングの成否を分けると言っても過言ではありません。
※2025年7月時点のお話。来年の今頃は必要なくなるかもしれません。
なぜか？
◯◯のアプリ作って！だけで作り始めると、上っ面の表面的な部分しか完成しません。そして、思いついて機能を追加しようとコードを生成させると、そのうち動かなくなっていきます。理由は簡単です。
「AIは効率的だから」です。指示されていないことは忘れていくのです。
AIからすれば「作ってほしいのですね、わかりました。作ります。」
それだけなのです。
だからこそ、常にAIがあなたの意図を汲み取れるよう、要件定義書が必要なのです。
では要件定義書と何なのか、どうやって実用的な要件定義書を作るのか、
それもAIと共に作れば良いのです。
やってみます。
STEP1.「◯✘ゲーム」の要件定義書を作る
「◯✘ゲーム」のWEBアプリを作りたいのですが、要件定義書を作ったことがないので、私の頭を整理する上でも要件定義書を作る上で必要なことをまず質問してください。
AIの回答
「◯✘ゲーム」のWEBアプリ開発、素晴らしいですね。要件定義はプロジェクトの成功に不可欠な工程です。要件定義書を作成するにあたり、まずプロジェクトの全体像を明確にするための質問をさせていただきます。これらの質問に答えることで、開発の目的、範囲、そして実装すべき機能が具体的になります。
プロジェクトの全体像と目的について
まず、このプロジェクトの根本的な部分を定義します。
開発の目的: この「◯✘ゲーム」アプリを開発する一番の目的は何でしょうか？
例：プログラミングスキルの学習のため、友人同士で遊ぶため、ポートフォリオとして公開するため、など。
対象ユーザー: 誰がこのアプリを使うことを想定していますか？
例：自分自身、友人・知人、インターネット上の不特定多数のユーザー、子供、など。
提供したい体験: ユーザーにどのような価値や体験を提供したいですか？
例：シンプルで手軽に遊べる体験、美しいデザインやアニメーションによる楽しい体験、オンライン対戦での熱い勝負、など。
機能に関する要件（何をできるようにするか）
次に、アプリが持つべき具体的な機能について考えます。
対戦形式: どのような対戦形式を実装しますか？（複数選択可）
-
ローカル対戦: 1台のPCやスマートフォンで、2人が交互に操作する形式ですか？
-
CPU対戦: プレイヤーがコンピュータ（CPU）と対戦する形式ですか？
-
オンライン対戦: インターネットを介して、離れた場所にいるプレイヤーと対戦する形式ですか？
ゲームの基本ルール:
ゲーム盤のサイズは一般的な3x3ですか？それとも変更可能な仕様にしますか？
先手（◯）と後手（✘）はどのように決まりますか？（ランダム、プレイヤーが選択、常に固定など）
勝利、敗北、引き分けの判定条件はどのように定義しますか？
ゲームの流れ（フロー）:
ゲーム開始から終了までの画面遷移はどのようなイメージですか？
例：トップページ → ゲーム画面 → 結果表示 → 再戦またはトップへ戻る
CPUの強さ（CPU対戦を実装する場合）:
CPUの思考ロジックはどのレベルを想定しますか？
例：ランダムに空いているマスを選ぶレベル、最低限の防御（相手がリーチなら防ぐ）を行うレベル、絶対に負けない（最善手を打つ）レベルなど。
その他の機能:
対戦成績（勝敗数）を記録する機能は必要ですか？
ゲームの設定を変更する機能（例：先手・後手の選択、BGMのON/OFFなど）は必要ですか？
非機能に関する要件（どのように動くか）
最後に、システムの品質や制約に関する点を明確にします。
対応デバイス: どのデバイス（PC、スマートフォン、タブレット）で快適に動作することを目指しますか？レスポンシブデザインは必要ですか？
デザイン: アプリケーションの見た目について、何か具体的なイメージはありますか？
例：ミニマルでシンプルなデザイン、ポップでカラフルなデザイン、未来的・サイバーなデザインなど。
パフォーマンス: プレイヤーの操作に対する応答速度はどの程度を求めますか？（通常、◯✘ゲームではミリ秒単位の応答は不要ですが、操作がカクつかないことは重要です）
技術的な制約:
開発に使用したい特定のプログラミング言語、フレームワーク、ライブラリなどはありますか？
（例：React、Vue.js、素のJavaScriptなど）
これらの質問への回答を一つずつ整理していくことが、そのまま要件定義書の骨子となります。まずはご自身の頭の中にあるイメージを、答えやすいものから書き出してみてください。
STEP2.質問に回答する
開発目的：絶対にユーザーに負けない最強頭脳の◯✘ゲームを遊んでもらいたいため。
対象ユーザー：◯✘ゲームに自信があるユーザー
提供したい体験：くそ！勝てない！と言わせたい
対戦形式：CPU対戦のみ
ゲームのルール：サイズは3×3。先手後手はユーザーが自由に選択可能。勝利は縦、横、斜めに◯か✘が3つ揃った場合のみ。揃わないことが明らかになった段階で引き分けとする。
ゲームの流れ：提案例の通りでOK。
CPUの強さ：最強。絶対に負けないCPUであること。
その他の機能：バージョンアップで追加できるようにしてほしい。
対応デバイス：スマートフォンからでもWEBアクセスで遊ぶことを想定しています。メインはPCでのプレイです。
デザイン：最強CPUにふさわしいデザインとしてください
パフォーマンス：CPUの思考は10秒以下としてください
技術的な制約：これまでの回答を実現できるものであれば技術要件はお任せします
この回答をベースにAIがコードを生成する上で必要となる要件定義書を.md形式で作成してください
AIの回答
要件定義書：最強AI ◯✕ゲーム
1. プロジェクト概要
| 項目 | 内容 |
|---|---|
| 1.1. プロジェクト名 | 最強AI ◯✕ゲーム（Ultimate Tic-Tac-Toe） |
| 1.2. 開発目的 | ◯✕ゲームにおいて絶対に負けない思考ロジックを持つAIを開発し、プレイヤーに挑戦的なゲーム体験を提供する。プレイヤーに「どうしても勝てない」という感覚を抱かせ、思考の限界に挑戦する楽しみを与えることを目的とする。 |
| 1.3. ターゲットユーザー | 自身の思考力やロジックに自信がある◯✕ゲーム経験者。難易度の高いパズルや戦略ゲームを好むユーザー。 |
| 1.4. 提供価値 | 従来の手軽な◯✕ゲームとは一線を画す、AIの完璧な戦略に挑むという高難易度の体験を提供する。 |
2. 機能要件
2.1. 機能一覧
| 機能ID | 機能名 | 概要 |
|---|---|---|
| F-001 | ゲーム開始設定 | プレイヤーが先手（◯）か後手（✕）かを選択してゲームを開始する。 |
| F-002 | ゲームプレイ | 3x3の盤上でプレイヤーがマスを選択すると、応答としてCPUが自動で手を打つ。 |
| F-003 | CPU思考ロジック | **絶対にプレイヤーに負けない（最善手を打つ）**思考ロジックを実装する。 |
| F-004 | 勝敗・引き分け判定 | 縦・横・斜めのいずれかで3マスが揃った時点で勝敗を判定。どちらの勝利条件も満たさずに全マスが埋まった場合、または理論上どちらも勝てないことが確定した時点で引き分けと判定する。 |
| F-005 | 結果表示と再戦 | ゲーム終了後、結果（敗北または引き分け）を表示し、同じ設定で再戦するか、トップ画面に戻るかを選択できる。 |
2.2. 画面構成と画面遷移
ユーザーの操作に伴い、以下の順で画面が遷移します。
トップ画面 → ゲーム画面 → 結果表示モーダル
- トップ画面で先手/後手を選択し「対戦開始」ボタンを押すと、ゲーム画面に遷移します。
- ゲームが終了すると、ゲーム画面上に結果表示モーダル（ポップアップ）が表示されます。
- 結果表示モーダル内の「再戦する」ボタンでゲーム盤がリセットされ、再度ゲームが開始されます。「トップに戻る」ボタンでトップ画面に遷移します。
2.3. 各画面の仕様
2.3.1. トップ画面
- 表示要素
- タイトル：「最強AIへの挑戦状」など、挑戦意欲を掻き立てる文言
- 説明文：「このAIに勝利することは不可能だ。君は引き分けに持ち込むことができるか？」といった趣旨のテキスト
- 先手/後手選択ボタン：「先手（◯）で挑む」「後手（✕）で挑む」
- アクション
- いずれかのボタンをクリックするとゲーム画面へ遷移する。
2.3.2. ゲーム画面
- 表示要素
- 3x3のゲーム盤：クリック/タップで入力可能。
- ターン表示：「あなたの番です」「AI思考中...」など、現在のステータスがわかるテキスト。
- 思考中インジケーター：CPUの思考中にアニメーションなどを表示し、処理中であることを明示する。
- アクション
- プレイヤーのターン中、空いているマスをクリック/タップすると、そのマスに自分の石（◯または✕）が置かれる。
- プレイヤーが石を置くと、即座にCPUのターンに移り、CPUが自動で石を置く。
2.3.3. 結果表示モーダル
- 表示要素
- 結果テキスト：
- プレイヤー敗北時：「あなたの負けです」
- 引き分け時：「引き分けです...惜しかったな」
- ※プレイヤーの勝利はロジック上発生しないため、勝利メッセージは不要。
- 再戦ボタン：「もう一度挑む」
- トップへ戻るボタン：「トップに戻る」
- 結果テキスト：
2.4. ゲームロジック詳細
- 基本ルール
- 盤面サイズ：3x3
- 勝利条件：縦、横、斜めのいずれかで、自身の石が3つ連続で並んだ状態。
- CPU思考ロジック（最重要要件）
- アルゴリズム: **ミニマックス法（Minimax Algorithm）**を実装する。これは二人零和有限確定完全情報ゲームにおいて、自身が常に最善手を選択し、相手も常に最善手を選択すると仮定して、最終的な勝敗を予測し、自身にとって最も有利な手を選択するアルゴリズムである。
- 実装方針:
- CPUは自身の手番において、勝利できる手があればそれを選択する。
- 上記でない場合、相手が次にリーチになるのを防ぐ手があればそれを選択する。
- 上記を再帰的に探索し、「負けない手（勝利または引き分けに繋がる手）」の中から最善手を選択する。
- このアルゴリズムにより、CPUはプレイヤーのミスを逃さず勝利し、ミスがない場合は必ず引き分け以上に持ち込むため、「絶対に負けない」という要件が満たされる。
3. 非機能要件
| 項目 | 内容 |
|---|---|
| 3.1. デザイン・UI/UX | **「最強の頭脳」「サイバー」「挑戦」**をテーマとする。ダークモードを基調とし、アクセントにネオンカラー（青、緑など）を使用することで、未来的で知的な印象を与える。フォントはシャープでモダンなものを選定し、操作時には滑らかなアニメーションを加えてリッチな体験を演出する。 |
| 3.2. パフォーマンス | CPUの思考時間は10秒以下とする。ただし、3x3の◯✕ゲームにおけるミニマックス法の計算量は非常に小さいため、実際には1秒未満の応答を目標とする。UI操作は常にスムーズで、カクつきがないこと。 |
| 3.3. 対応デバイス | PCの最新版モダンブラウザ（Chrome, Firefox, Safari, Edge）を主要ターゲットとする。スマートフォンのブラウザでもレイアウトが崩れず、快適にプレイできるようレスポンシブデザインを採用する。 |
| 3.4. 将来の拡張性 | 初期リリースではCPU対戦のみ実装するが、将来の機能追加（例：対戦成績の記録、盤面サイズの変更、CPUの強さレベル設定など）を考慮し、機能ごとにコンポーネントを分割して開発する。ゲームロジックとUIは完全に分離した設計とする。 |
| 3.5. 技術スタック（推奨） | フロントエンド: HTML, CSS, JavaScriptフレームワーク: React または Vue.js （コンポーネントベース開発による高い拡張性のため推奨）インフラ: バックエンドは不要。Netlify, Vercel, GitHub Pagesなどの静的サイトホスティングサービスでの展開を想定。 |
と、こんな感じで要件定義書ができました。
「◯✘ゲーム」作って！
と
「この要件定義書を基に、◯✘ゲーム作って！」
と指示するのと、
あなたはどちらを選びますか？
