JavaScriptのトラブルシューティング

開発者ツールを使ったデバッグ方法

今回のゴール

• コードが意図しない動き方をした際に、調査する方法を理解する

エラーの種類

JavaScriptのコードが意図しない動き (エラー) となる場合、大きく分けて2種類のエラーがあります。

※ 例外処理、エラーハンドリングといった内容については今回の対象外です

例外とは

例外 は、プログラムが想定していない状態となり、処理を途中で止める必要があるエラーです。

例えば、JavaScriptのコードの文法に誤りがある場合、構文エラー (Syntax Error) という例外が発生します。

// 例: 括弧が足りない
function sayHello {
  return "こんにちは";
}

例外の例

構文に誤りがなくても、実行中に想定外の状態となった場合に例外は発生します。

// querySelector("button") と書くところが querySelector("bbutton") となった
// => 要素が見つからず、変数 button は空 (null) になる
const button = document.querySelector("bbutton");

// 空の button に対して .addEventListener を呼び出そうとした
// => 例外の発生
button.addEventListener("click", handleClick);

論理エラー（Logic Error）とは

論理エラーは、コードの書き方は正しくても、意図した動作をしない場合に発生します。

// 例: 税込価格を計算したい
const price = 1000;  // 元の価格
const taxRate = 0.1; // 税率 (10%)

// 間違い: 足し算をしてしまっている
const totalPrice = price + taxRate;  // 結果: 1000.1（間違い）

// 正しくは掛け算で税額を計算して足す
const correctTotal = price + (price * taxRate);  // 結果: 1100（正しい）

こうした類のエラーはバグとも呼ばれます。

開発者ツールで例外やバグを調べる

プログラムが期待した通りに動かないと思ったら、開発者ツール（DevTool） を使いましょう。開発者ツールには、以下のような機能があります。

• コンソール: エラーメッセージやログを確認でき、その場でJavaScriptを実行することもできる
• 要素の検証: HTMLやCSSを確認・編集できる
• ネットワーク: 通信内容を確認できる
• ソース: JavaScriptのコードを確認し、実行を一時停止したりして調査できる

今回は主にコンソールとソースを使ったデバッグ方法を学びます。

開発者ツールで例外を確認する (1)

例外があると、開発者ツールのコンソールにエラーメッセージが表示されます。

以下のJavaScriptコードにはエラーがあります。開発者ツールからエラーを確認しましょう。

const button = document.querySelector("button");
button.addeventlistener("click", showMessage);
function showMessage() {
  alert("ボタンがクリックされました！");
}

デモページ

開発者ツールで例外を確認する (2)

開発者ツールのコンソールを開くと、以下のようなエラーが表示されます:
(※ ブラウザによってエラーメッセージは異なる場合があります)

Uncaught TypeError: button.addeventlistener is not a function
    at 04-typo-error.js:3:8

このエラーメッセージから分かること:

• button.addeventlistener is not a function: button.addeventlistener は関数ではない
• 04-typo-error.js:3:8: 04-typo-error.js の3行目、8文字目でエラーが発生

=> addeventlistener ではなく addEventListener だった！

エラーメッセージをAIに聞く

エラーメッセージを見ても原因がわからない場合、AIにエラーメッセージについて聞くのも良いでしょう。ソースコードと一緒にAIに渡すと効果的です。
(Chrome の場合、開発者ツールでAI機能を使うこともできます (参考ページ))

論理エラーを調査する: console.log の利用

console.log() は、変数の値やプログラムの状態をコンソールに出力する関数です。

論理エラーを見つけるために、「今、変数にどんな値が入っているか」を確認するのに使います。

const price = 1000;
const taxRate = 0.1;
const total = price + taxRate;

console.log("price:", price);     // price: 1000
console.log("taxRate:", taxRate); // taxRate: 0.1
console.log("total:", total);     // total: 1000.1 ← おかしい！

デモページ

論理エラーを調査する: ソース機能の利用

開発者ツールのソース機能を使うと、以下のようなデバッグを行うことができます。

• HTMLが読み込んでいるJavaScriptコードを確認する
• ブレークポイント (Breakpoint) によってコードを一時停止する
• 一時停止した状態で変数の値を確認したり、一行ずつ処理を実行する

ソース機能の利用、ブレークポイントの設定方法

1. 開発者ツールを開く（F12）
2. Sources（ソース）タブをクリック
3. 左側のファイル一覧から対象のJavaScriptファイルを選択
4. 調査したい行の行番号をクリックすると、青い印がつく

ブレークポイントで一時停止したときにできること

• 変数の確認: 右側の「Scope(範囲)」パネルで変数の現在の値を確認
• 続行 (▶️ のようなアイコン): 次のブレークポイントまで実行を続ける
• ステップオーバー: 次の行に進む
• ステップイン: 関数の中に入る

ブレークポイントとコンソールの併用

開発者ツールのコンソールでは、一時停止中に直接コードを実行することもできます。

// ブレークポイントで一時停止中にコンソールで入力
> price
1000
> taxRate
0.1
> price * taxRate
100
> price + price * taxRate
1100

これにより、正しい計算式を試してから、コードを修正できます。

デモページ

デバッグの流れまとめ

1. エラーが発生したら、まず開発者ツールを開く
2. コンソールでエラーメッセージを確認する
3. エラーメッセージから、ファイル名と行番号を特定する
4. 該当箇所のコードを確認する
5. 必要に応じて console.log() で変数の値を確認する
6. 複雑な場合はブレークポイントを使って詳しく調査する
7. 原因を特定したら、コードを修正する

デバッグのコツ: 「何が予想通りに動いているか」「何が動いていないか」一つ一つ確認する

以下のようなコードに対して、どうして動いていないのか確認しましょう。

const button = document.querySelector("#myButton");
button.addEventListener("click", handleClick);

function handleClick() {
  const input = document.querySelector("#myInput");
  const message = input.textContent;
  document.querySelector("#result").textContent = message;
}

デモページ

まとめ

• JavaScriptがうまく動かない場合、例外や論理エラー(バグ)の場合がある
• 例外は開発者ツールのコンソールでエラーメッセージを確認できる
• console.log() で変数の値を表示し、論理エラーを確認できる
• 開発者ツールのブレークポイントを使うと、より詳細な調査ができる
• デバッグでは、「何が予想通りに動いているか」「動いていないか」を一つ一つ確認して原因を突き止める

さらに調べるには

• 何が間違っている? JavaScript のトラブルシューティング (MDN)
• JavaScriptをデバッグする (Chrome DevTools)