JavaScriptのエラーを調査しよう | JavaScript応用

エラーは推測で直すのではなく、発生箇所、入力値、処理の流れを順番に確認します。

今回は、意図的に不具合のある合計金額計算を調査します。エラーメッセージが出る不具合だけでなく、動くものの結果が間違う論理エラーも扱います。

今回使用するファイル構成

javascript-practice/
├── index.html
└── js/
    └── script.js

DevToolsで原因を絞り込む

Consoleのエラーを読む

const button = document.querySelector('#missing-button');
button.addEventListener('click', () => {});

要素が存在しない場合、buttonはnullです。Consoleにはエラーの種類、メッセージ、ファイル名、行番号が表示されます。

確認する順序は次のとおりです。

最初に発生したエラーを読む
ファイル名と行番号を開く
エラー直前の変数を確認する
HTMLのセレクターやデータを確認する

ブレークポイントで停止する

DevToolsの「Sources」で行番号をクリックすると、処理をその行で停止できます。

停止中は、変数へカーソルを合わせるかConsoleから値を確認します。Step overで一行ずつ進み、どの行で期待と異なる値になるか探します。

debuggerを使う

function calculateTotal(price, quantity) {
  debugger;
  return price * quantity;
}

DevToolsを開いて実行するとdebuggerの行で停止します。調査後は削除します。

スタックトレースを読む

スタックトレースには、エラーへ至るまでに呼び出された関数が表示されます。自分のファイルにある最初の行から確認します。

不具合のあるコードを調査する

練習用コードを実行する

<label for="price">単価</label>
<input id="price" type="number" value="1000">
<label for="quantity">数量</label>
<input id="quantity" type="number" value="2">
<button id="calculate-button" type="button">計算する</button>
<p id="total"></p>

const priceInput = document.querySelector('#price');
const quantityInput = document.querySelector('#quantity');
const calculateButton = document.querySelector('#calculate-button');
const total = document.querySelector('#total');

function calculateTotal(price, quantity) {
  return price + quantity;
}

calculateButton.addEventListener('click', () => {
  const price = priceInput.value;
  const quantity = quantityInput.value;
  const result = calculateTotal(price, quantity);
  total.textContent = `合計：${result}円`;
});

1000円を2個と入力しても「10002円」になります。エラー表示はありませんが、期待結果と異なる論理エラーです。

Consoleで型を確認する

console.log({
  price,
  priceType: typeof price,
  quantity,
  quantityType: typeof quantity,
});

入力欄のvalueは文字列です。+は文字列が含まれると連結を行います。さらに、合計なので足し算ではなく掛け算が必要です。

const price = Number(priceInput.value);
const quantity = Number(quantityInput.value);

function calculateTotal(price, quantity) {
  return price * quantity;
}

一つの症状に、型変換と演算子という二つの原因がありました。値と型を観察すると推測だけで修正せずに済みます。

ブレークポイントを使う手順

DevToolsのSourcesでscript.jsを開く
calculateTotal()を呼ぶ行の番号をクリックする
計算ボタンを押す
Scope欄でpriceとquantityを確認する
Step intoで関数内へ入り、戻り値を確認する
Resumeで処理を再開する

Watch欄へprice * quantityを登録すると、停止するたびに式の結果を確認できます。

ログを残すときの工夫

値だけでなく名前も一緒に出します。

console.log({ price, quantity, result });
console.table([{ price, quantity, result }]);
console.assert(result >= 0, '合計金額が負数です', { result });

調査用ログへパスワードや個人情報を出してはいけません。本番公開前には不要なログとdebuggerを削除します。

まとめ

エラーメッセージ、行番号、変数、呼び出し順を根拠に原因を絞ります。次の記事では、調査しやすいコードへ整理します。