Web制作を進めていると、「ボタンを押したのに何も反応しない」「スマホで見ると画像が大きくはみ出してしまっている」といったトラブル（バグ）に必ず遭遇します。
かつてはエラーの原因を自力で探すのに何時間もかかっていましたが、AntigravityなどのAIアシスタントを活用すれば、数秒で原因が特定でき、スムーズに修正コードへ書き換えることが可能です。この記事では、バグを効率よく退治するためのデバッグ手順をご紹介します。
初心者のコードで発生するバグの多くは、非常に単純なミスです。 「ファイルの読み込みパスが間違っている」「HTMLの閉じタグ（`
バグが発生したときは、焦らずに以下の3ステップで対応しましょう。
ブラウザ（Chrome等）でバグが起きているページを開き、キーボードの「F12キー」を押して「デベロッパーツール（開発者ツール）」を起動します。「コンソール（Console）」タブを選択すると、赤字でエラーログが表示されていることがあります。この赤字の部分が、エラー解決のための重要な手がかりです。
デバッグのコツは、AIに「エラーの現状」と「実際のコード」をセットで提供することです。
プロンプト例：「お問い合わせフォームの送信ボタンを押しても何も起こりません。ブラウザのコンソールには『Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')』と赤字で表示されています。関係するHTMLとJavaScriptのコードは以下の通りです。原因と修正案を教えてください。 [コードを貼り付け]」
Antigravityはエラーの原因（例：「JavaScriptがロードされた時点で、HTMLのフォーム要素がまだ生成されていないためです」など）を説明し、正しいコードを提示してくれます。エディタ上でコードを適用し、正しく動作するか確認しましょう。
サーバーにアップロードした後に表示が崩れたりアクセスできなくなったりする場合は、サーバー自体の管理ツールやSSL設定が原因のこともあります。初心者にも管理画面が分かりやすく、不具合対応も充実している「Hostinger」のようなサーバーを選ぶことで、環境側のトラブルを未然に防ぐことができます。
JavaScriptが動作しない場合、HTML内での読み込み位置や `defer` 属性の有無が関係していることが多いです。 AIに「HTMLのどの部分でJSを読み込むべきか、現在のHTMLファイル全体の構成を見せて相談」すると、正しいタグ位置へ修正してくれます。
特定の要素がスマホサイズで崩れるときは、`width: 100%` などのレスポンシブなCSS設定が漏れていることが原因です。 崩れている要素のCSSコードを切り出してAIに見せ、「スマホ幅になったときに折り返されるように flex-wrap を追加したい」などと指示を出してみましょう。
バグに遭遇することは、Web制作において失敗ではありません。AIを使ってデバッグを繰り返すことで、「このエラーのときはここを確認すればいいんだな」という実践的な知見が自然と蓄積されていきます。
次回は、作成したWebサイトをいよいよインターネット上に公開するための、「AntigravityとNetlifyの連携デプロイ手順」について解説します。