[Claude Code] 入門講座 #04：Claudeでエラーを直してもらう：デバッグ体験

テーマ：Claudeでデバッグ体験

今回は、エラーがあるコードをClaudeに見せて修正を依頼する方法を学びます。
プログラミングにおいてバグの修正（=デバッグ）は避けて通れない工程。
Claudeを使えば、コードの間違いを見つけて丁寧に説明＋修正案まで出してくれます。

今回使う題材：バグ入りのJavaScriptコード

以下の簡単なJSコードは「カウントアップボタン」を作ろうとしていますが、うまく動きません。

<!DOCTYPE html>
<html>
<head>
  <title>バグ付きカウントアップ</title>
</head>
<body>
  <p id="count">0</p>
  <button onclick="increaseCount()">カウント</button>

  <script>
    function increaseCount() {
      let count = document.getElementById("count").innerText;
      count++;
      document.getElementByID("count").innerText = count;
    }
  </script>
</body>
</html>

Claudeへの依頼文（プロンプト例）

以下のHTML＋JavaScriptコードにバグがあります。
ボタンを押しても数値がカウントアップしません。
原因を分析し、コードを修正してください。

[コードを貼る]
[Claude Code] 入門講座 #04：Claudeでエラーを直してもらう 01 [Claude Code] 入門講座 #04：Claudeでエラーを直してもらう 02

ポイント

  • **「どこがどう動かないか」**を明記
  • Claudeに**「修正コードの出力もお願い」**する

修正点

スクショでも映っていますが、

  • document.getElementByIDをdocument.getElementByIdに修正しました。
  • countを整数として扱うために、parseIntを使用しました。

これでボタンを押すとカウントが正常に増加するはずです。

との事で、問題点を明確に記載されており非常にわかりやすいです。 1つ目は、視覚的に分かりにくいバグなのでAIならではの、素早く正確な修正かなと感じました。

2つ目は、戻り値が文字列のままだと、count++;でカウントアップできない為、parseIntで型キャストを行う処理で恐らくInt型に整数として変換されているのだと思います。

Claude Sonnetの返答（想定）

原因は2点あります：

1. `getElementByID` は正しくは `getElementById`（dは小文字）です。
2. `innerText` で取得した値は文字列なので、数値に変換する必要があります。

修正後のコードはこちらです：

修正コード：

<script>
  function increaseCount() {
    let count = parseInt(document.getElementById("count").innerText);
    count++;
    document.getElementById("count").innerText = count;
  }
</script>

検証・確認

ブラウザで実行すると、ボタンをクリックするたびに「0 → 1 → 2 → …」と正しく増加します。
Claudeは バグの説明＋理由＋修正案をセットで提示してくれるため、初心者でも安心して使えます。

応用例：もっと複雑なバグにも対応可能？

たとえば：

  • 間違ったスコープ（var/let/const）
  • DOM操作のタイミングミス（DOMContentLoaded前）
  • 無限ループの原因調査

などにも対応可能。エラーが出たときに 「原因が分からない…」→ Claudeに投げる！ という流れが基本です。

補足Tips

状況 アドバイス
エラー文が出たけど意味が分からない Claudeに貼り付けて「このエラーの意味は？」と聞いてみる
修正案が動かない 「このコードをブラウザで動かすと別のエラーが出ます」と詳細を伝える
長いコードがある エラー箇所だけに絞って貼り付ける or 分割して送る

締めのひとこと

Claudeは、単なる生成AIではなく“先生＋先輩エンジニア”のような存在。
バグが出た時に「うわ…」と思わず、**“Claudeと一緒に解く”**ことで、着実に理解が深まります。

次回予告

→ #05：Claudeと一緒にブログテンプレートを作る …HTML＋CSS＋簡単な構造化レイアウトを一緒に設計してみます。