この記事はシリーズ構成となっており▶️マークが現在の記事となります
プロローグ
AIは「新人」であり「Web開発」である - 成果を最大化する生成AIとの付き合い方
第1部 僕がAIを最高の相棒にするまで：ブログ運営改善プロジェクト全記録
第2部 PMP資格の学習教材を、AIを相棒にしてゼロから作り上げる
【第1回】AIは優秀な壁打ち相手になるか？自作教材の構成レビューと改善提案
【第2回】AIとの開発で品質を担保する！20章超の教材デザインを統一したHTMLテンプレート設計秘話
【第3回】ただのテキスト変換じゃない！AIに複雑な概念を「図解」させるプロンプト術
▶️【第4回】AIは完璧じゃない！生成コードのエラーと向き合い、修正・改善した実践録
【第5回】総仕上げはAIと！試験対策用の「チートシート」を高密度レイアウトで作り上げた方法
【第6回】AIとのプロジェクト完遂！一連の体験から学んだAI時代のプロジェクトマネジメント術
第3部 AIを相棒にしたシステム開発プロジェクト全記録
テーマ: 現実的な課題解決
前回の記事はこちら:https://axis.migalo.co.jp/column/k020
① はじめに
こんにちは。AIと一緒にPMPのオリジナル教材を作るプロジェクト、その開発記録をお届けする連載の第4回です。
前回は、AIを「デザイナー」として活用し、タックマンモデルなどの複雑な概念をHTMLとCSSで見事に「図解」させるプロンプト術をご紹介しました。共通テンプレートとカスタム図解のテクニックを武器に、プロジェクトは順調に進んでいるように見えました。
しかし、開発の現実は常に順風満帆とはいきません。今回は、プロジェクトの「開発〜デバッグ」フェーズに焦点を当てます。AIが生成したコードに潜んでいたエラーや意図しない表示崩れに、どのように向き合い、解決していったのか。この記事を読めば、AIの「不完全さ」を前提とした、実践的なデバッグとコード修正のプロセスが分かります。
② 課題・目的
AI（Gemini）は、私の指示に応じて驚くほど高品質なHTMLとCSSを生成してくれました。しかし、特に複雑なレイアウトを要求した際に、いくつかの問題点が浮かび上がってきました。
遭遇した問題の例： * レスポンシブ対応の崩れ： 第15章で作成した「49のプロセスマッピング表」は、PCの広い画面では完璧に見えましたが、スマートフォンの狭い画面で見ると表が画面からはみ出してしまい、非常に見づらい状態でした。
細かいスタイルの不整合： ある章ではリストの行間が他より少し広く、ある章ではアイコンのサイズが微妙に違うなど、テンプレートを使っているにも関わらず、稀に細かいデザインの不整合が発生しました。
これらの問題は、AIが常に完璧なコードを生成するわけではない、という現実を突きつけてきました。生成されたコードを鵜呑みにせず、人間の目で品質をチェックし、必要に応じて修正・改善していくプロセスが不可欠です。
目的： AIが生成したコードをテストし、発見されたバグや表示崩れをAIとの対話を通じて修正するプロセスを確立すること。
③ AIへの具体的な指示（プロンプト）
問題を発見した際、重要なのはAIにどうやってその問題を伝えるかです。「表示が崩れているから直して」という曖昧な指示では、AIは何をすべきか判断できません。優れたバグ報告を心がけることが、迅速な解決の鍵となります。
以下は、前述の「プロセスマッピング表のレスポンシブ対応」を修正してもらった際の実際のやり取りです。
【私からの指示】 第15章で作成してもらった「49のプロセスマッピング表」のCSSに問題があります。
現状： PCの画面では綺麗に表示されますが、ブラウザの横幅を狭めていくと、表が画面内に収まらず、ページ全体に横スクロールバーが出てしまいます。
期待する動作： 画面が狭くなった場合は、表を囲むコンテナ（.table-container）の中だけで横スクロールできるようにし、ページ全体のレイアウトは崩れないようにしてください。
以下が現在のHTMLとCSSです。
<div class="table-container"> <table class="custom-table"> <thead> <tr> <th>知識エリア</th> <th>立上げ</th> <th>計画</th> <th>実行</th> <th>監視・コントロール</th> <th>終結</th> </tr> </thead> <tbody> <tr> <td>統合マネジメント</td> <td>プロジェクト憲章作成</td> <td>プロジェクトマネジメント計画書作成</td> <td>プロジェクト作業の指揮・マネジメント</td> <td>プロジェクト作業の監視・コントロール</td> <td>プロジェクトやフェーズの終結</td> </tr> </tbody> </table> </div>/* 問題のCSSスニペット */css .table-container { margin: 25px 0; } .custom-table { width: 100%; border-collapse: collapse; } .custom-table th, .custom-table td { border: 1px solid #dee2e6; padding: 12px; text-align: left; white-space: nowrap; /* ←原因: セル内が改行されないため、表が画面幅を超えてしまう */ }このプロンプトのポイントは、「現状」と「期待する動作」を明確に分けて記述し、問題となっているコードを具体的に提示したことです。これにより、AIは問題の再現と解決策の検討を正確に行うことができます。
④ AIの応答と結果
この「バグ報告」を受け、Geminiは即座に問題点を理解し、的確な修正案を返してきました。
【Geminiからの応答】 ご指摘ありがとうございます。承知いたしました。 .table-container クラスに overflow-x: auto; を追加することで、内容がコンテナの幅を超えた場合のみ、コンテナ内部に水平スクロールバーが表示されるようになります。
以下が修正後のCSSです。css .table-container { overflow-x: auto; /* この行を追加 */ margin: 25px 0; }この提案は完璧でした。私がこのCSSを適用すると、PC画面ではこれまで通り、そしてスマートフォンなどの狭い画面では、表の部分だけを指でスワイプして全体を見ることができるようになり、ページ全体のレイアウトが崩れることはなくなりました。
細かいスタイルの不整合についても同様に、「第X章のリストの行間が、テンプレートで定義した1.8ではなく2.0になっているので修正してください」といった具体的な指示を出すことで、一つ一つ問題を潰していくことができました。
⑤ 考察・ポイント
AI生成コードのデバッグ経験を通じて、AIとの上手な付き合い方が見えてきました。
・AIを「レビュー必須のジュニア開発者」と考える AIは驚異的なスピードでコードを書きますが、そのコードが常に最適でバグがないとは限りません。生成されたコードは必ず人間の目でレビューし、テストするという前提でプロジェクトを進めることが重要です。AIを信頼しつつも、最終的な品質責任は人間が持つという意識が必要です。
・エラー報告は「再現可能な手順」を意識する 良いバグ報告の基本は、開発者がその問題を再現できることです。これは対AIでも同じです。「何が」「どうなっていて」「どうなってほしいのか」を、可能であれば問題のコードを添えて伝えることで、AIの修正精度は劇的に向上します。
・AIを「デバッグの先生」にする 「なぜこのCSSで直るの？」と追加で質問すれば、AIは overflow-x: auto; の役割を丁寧に解説してくれます。単に修正してもらうだけでなく、その背景にある技術的な理由を学ぶことで、自身のスキルアップにも繋がります。AIとのデバッグは、最高のOJT（On-the-Job Training）になり得るのです。
あなたのプロジェクトで試すには あなたが今、直面している技術的な問題や、原因不明のバグはありませんか？ その状況を「現状（どうなっているか）」と「期待する動作（どうなってほしいか）」に整理してAIに伝えてみましょう。可能であれば、関連するコードやエラーメッセージを添えると、AIは優秀なデバッグパートナーとして、解決の糸口を示してくれます。
⑥ まとめと次回予告
AIは完璧な存在ではありません。しかし、その不完全さを受け入れ、人間が適切にレビューし、具体的な指示で導いてあげることで、AIは最高の開発パートナーになります。「生成→テスト→修正」というイテレーションを高速で回せることこそが、AI開発の真の強みと言えるでしょう。
さて、数々のバグを乗り越え、全24章のインフォグラフィック化がついに完了しました。プロジェクトもいよいよ最終盤です。しかし、学習の総仕上げには、全章を高速で復習できる「まとめノート」が不可欠です。この膨大なコンテンツを、どうやって試験直前用の「チートシート」に凝縮するのか？
次回は、「総仕上げはAIと！試験対策用の『チートシート』を高密度レイアウトで作り上げた方法」と題し、AIを「超高速編集者」として活用したプロセスをご紹介します。
(シリーズ第２部第３回の記事はこちら：https://axis.migalo.co.jp/column/k020)
