🚀 導入：AI開発がもたらしたスピード革命と新たな課題
近年、生成AIを使用した開発フローの台頭によりWebアプリケーション開発のあり方は劇的に変化しました。私たち「みんなで麻雀帳」の開発チーム（人とAIアシスタントのペア）でも、GoogleAntigravity(Googleの統合型AIツール)を全面的に活用しています。
AIを活用した開発の最大のメリットは、何と言っても圧倒的な開発スピードです。
人間がゼロからコードを書く場合、仕様設計からボイラープレート、ライブラリの選定、および最初の一行を書き出すまでに多くの時間を要します。しかし、AIであれば仮に「ユーザー登録フォームを作って」と指示するだけでも、セキュリティ対策が施されたクリーンなコードが一瞬で生成されます。人間が数日かけていた作業が、数時間、時には数分で完了するのです。
しかし、その一方で「正確さ」についてはどうでしょうか？
AIが生成するコードは文法的には完璧で、一見するとそのまま動作するように見えます。しかし、システム全体の細かな文脈（コンテキスト）やフレームワークの暗黙のルール、および実際のユーザーが操作したときの細かな挙動（UX）までは、一度で完璧に考慮しきれないケースが多々あります。
AI開発は非常に便利ですが、「AIが出したコードが、一発で100%完璧であることは稀である」という前提に立つ必要があります。この記事では、実際に開発プロセスで実際に発生した不具合のエピソードを交えながら、人間がコードを直接修正することなく、AIの自律的な調査と修正を引き出すための「指示（プロンプト）のコツ」をご紹介します。
- ▪--
🔍 エピソードで振り返る：AIが自ら原因を突き止めた「まさか」の不具合
「みんなで麻雀帳」の開発では、人間側はプログラムコードを一切触らず、プロジェクトマネージャー（PM）としての役割に徹しています。そのため、バグが発生した際も「何が原因か」を人間が調査してコードを直すのではなく、「起きた現象」を正確にAIに伝え、原因の特定から横展開の調査までをすべてAIに任せることで解決しています。
その中から、AIが自律的に問題を調査・解決した代表的な2つの事例を紹介します。
# ① 「何も起きない」からAIが原因を見抜いた「パスワードリセット機能」
セキュリティ強化のため、メールリンクを通じたセキュアなパスワード再設定フローを導入したときのこと、
AIは即時にパスワード変更画面（HTMLテンプレート）をデザインしてくれました。プレビュー画面での見た目も完璧でした。
しかし、実際に実装させてテスト環境で送信ボタンを押してみると、エラーも出ずに画面がリロードされるだけで、パスワードが一切変更されないという不具合が発生しました。
コードを読まない人間（PM）側としては、「ボタンを押しても何も起きない」という事実しかわかりません。そこで、その挙動と「送信ボタンを押した直後の画面の状態」をありのままAIに伝え、原因の調査を依頼しました。
するとAIは、自身が生成したテンプレートコードとDjangoフレームワークの内部仕様を照らし合わせ、即座に原因を特定しました。Djangoの標準機能である `SetPasswordForm` は、送信されるパラメータ名が `new_password1` および `new_password2` であることを期待していますが、AIが生成したHTMLでは一般的な `password` や `confirm_password` になっていたのです。
AIは「私のパラメータ命名ミスでした」と原因を自己申告し、修正コードを提案しただけでなく、「他の登録フォームなどでも同様の不整合がないか横断的にチェックしました」と、自発的に影響範囲の調査報告まで完了させてくれました。
また、AIに再発防止の対応案まで検討してもらうことで現在では検証用のテストコードを生成、実行しその結果を以て改修完了とするフローに改善しています。
# ② 実機での違和感を伝えて解消した「待ち牌トレーニング」のゴーストクリック
もう一つの事例は、最近追加した機能である「待ち牌トレーニング」のモバイル対応を進めていたときのことです。
PC上のブラウザシミュレーターではスムーズに動作していましたが、スマートフォン実機でテストしたところ、牌を素早くタップしたりダブルタップしたりすると、意図しないタイミングで「クリアボタン」が反応し、手牌が消えてしまう問題が発生しました。
これも人間側はコードを解析せず、「スマートフォン実機で操作したとき、牌をタップすると2回押されたような挙動になり、ダブルタップでクリアされてしまう」という体感的な違和感と再現手順をAIにそのまま伝えました。
AIは実機を直接触ることはできませんが、この事象の報告から「モバイル特有のタッチイベント（`touchstart`/`touchend`）とクリックイベントの競合（ゴーストクリック）」および「ダブルタップ時のブラウザズーム動作」が原因であると推理。人間が一切コードを提案することなく、CSSの `touch-action: manipulation` の適用やJavaScript側での二重発火ガードロジックの実装といった専門的な解決策をAIが自ら提示し、見事に不具合を解消しました。
- ▪--
💡 対応：AIに不具合の調査・修正・横展開を自律的に行わせるプロンプトのコツ
人間がコードを書かない開発スタイルにおいて、AIに不具合を自律的に解決させるためのプロンプトには、いくつかの重要なポイントがあります。
# コツ1：現象を「再現手順」とともに客観的に伝え、原因調査と横展開をAIに指示する
AIに不具合を伝える際、「パスワードリセットが動きません」とだけ伝えるのはNGです。また、人間が「ここが間違っているのでは？」と中途半端にコードを推測して指示するのも、AIの視野を狭める原因になると考えています。
正しいアプローチは、「何をして、どういう結果になり、期待する挙動は何であるか」という事実を伝え、調査と類似箇所のチェックはAI自身に任せることです。
- ▪バグ調査をAIに任せる効果的なプロンプト例：*
> 「パスワード変更画面で『変更』ボタンを押してもエラーにならず、画面がリロードされるだけでパスワードが変更されません。
> 1. この現象が発生している原因を調査し、特定してください。
> 2. 原因の説明とそれに対する具体的な対応を簡単に説明してください。
> 3. 今回のような問題が、他のフォームや入力画面でも発生していないか、プロジェクト全体を横断的に調査して報告してください。
> 4. 今後同様の事象が発生しないように再発防止案を提示してください。
このプロンプトにより、AIは単なる「指定された対象のその場しのぎの修正」にとどまらず、システム全体に目を向けた「横展開調査」や「再発防止対応」まで自律的に行うようになります。
# コツ2：デバイス特有の「体感的な不具合」は詳細に言語化する
モバイル環境の挙動など、AIがシミュレートしにくい「体感的な問題」は、人間がその現象を詳細に言語化して伝える必要があります。解決策（CSSやJavaScriptの記述）を人間が指示する必要はありません。
- ▪モバイル不具合解決を依頼する効果的なプロンプト例：*
> 「スマートフォンの実機で操作した際、手牌をタップすると、時々2回連続でタップされたような（ゴーストクリック）の挙動になります。
> また、ダブルタップすると画面がズームしたり、クリア処理が誤作動します。
（以降は先ほどと同じプロンプトなので割愛）
AIは「実機を触る」ことはできませんが、言語化された現象から原因を論理的に特定し、最適なフロントエンドの修正コードを出力してくれます。
# コツ3：修正に伴う「サイドエフェクト（影響範囲）」を必ず確認させる
AIにコードを修正させる際、ある場所を直したことで別の場所が壊れてしまう（デグレード）のを防ぐため、以下の1文を必ず指示に含めます。
> 「この修正を適用した場合、他の既存機能への影響（サイドエフェクト）はありますか？ 影響範囲と、修正前後の差分を分かりやすく解説してください。」
AI自身に影響範囲を検証させることで、人間（PM）がコードを読まなくても安全なリリース判断ができるようになります。
- ▪--
🏁 まとめ：人間が「司令塔（PM）」になり、AIが「自律的なエンジニアチーム(チームリーダー)」になる
AIを活用した開発におけるデバッグとは、人間がコードを修正する作業ではありません。仮に人間側がバグの原因が分かっていたとしてもそれを伝える必要はありません。
- ▪人間（PM）の役割: 実際にアプリを触り、不具合の挙動を検知し、現象を正確に言語化して解決の方向性を指し示す「司令塔」。
- ▪AIの役割: 提示された手がかりをもとに自律的にコードを調査し、原因を特定して修正し、横展開まで行う「エンジニア」。
この役割分担が機能したとき、人間は一切コードに触れることなく、安全で高品質なプロダクトを驚異的なスピードで作り上げることができます。
これからもAIの圧倒的なパワーを活かしつつ、人間ならではの視点での動作確認によって、ユーザーの皆様が快適に使えるサービスへと進化し続けます。皆さんもAI開発で不具合にぶつかった際は、ぜひ「現象の正確な言語化」と「AIへの原因調査・横展開の丸投げ」を試してみてください！