JavaScriptのループを例にしたコードデバッグのコツ

これから、コード内のエラーを見つける方法を教えます。何らかの誤解で前のレッスンのアドバイスに従わず、動作しないコードができてしまったと想像してみてください。エラーを見つけて、動作させる方法を見てみましょう。

多くの初心者は、誤ったエラー検索方法を使っています。コードを見つめ、エラーに気づくことを期待します。それを数時間も続けます。これはうまくいきません。

正しい方法は、コンソールに変数を出力し、そこに必要なものが入っているかどうかを確認することです。その際、問題が発生していると思われる場所から始めて、コードを上に遡っていく必要があります。実際に見てみましょう。

例として、2桁の数字の配列を走査し、 1桁目の数字が2桁目より1大きい数字を見つけるタスクがあったとします。簡単のため、配列には数字が文字列として格納されているとします。

あなたがこの問題を解き、次のコードを得たとします:

let arr = ['21', '32', '34', '43', '45', '54', '55'];
let sum = 0;

for (let elem of arr) {
	if (elem[0] === elem[1] + 1) {
		sum += elem;
	}
}

console.log(sum); // 0を出力

しかし、コードは0を出力します。この場合、まず確認すべきは、コードの実行がif文の中に入っているかどうかです。コンソールに何かを出力してみましょう:

let arr = ['21', '32', '34', '43', '45', '54', '55'];
let sum = 0;

for (let elem of arr) {
	if (elem[0] === elem[1] + 1) {
		console.log('!'); // 何も出力しない
		sum += elem;
	}
}

console.log(sum);

コンソールに何も表示されなかったので、コードの実行が単に条件分岐内に入っていないことを意味します。自分たちの目で、何を比較しているのか見てみましょう:

let arr = ['21', '32', '34', '43', '45', '54', '55'];
let sum = 0;

for (let elem of arr) {
	console.log(elem[0], elem[1] + 1); // '2' と '11', '3' と '21' ...
	
	if (elem[0] === elem[1] + 1) {
		sum += elem;
	}
}

console.log(sum);

結果として、2番目の項が2桁の数字になっていることが一目でわかります。これは、1が文字列として加算されているためだと簡単に理解できます。問題を修正しましょう:

let arr = ['21', '32', '34', '43', '45', '54', '55'];
let sum = 0;

for (let elem of arr) {
	if (+elem[0] === +elem[1] + 1) { // 修正
		sum += elem;
	}
}

console.log(sum); // '021324354'

修正後、変数sumに何かが入っているのがわかります。ただし、正しくありません。しかし、必要なものが入っているものの、数字ではなく文字列として連結されてしまったことがわかります。問題を修正しましょう:

let arr = ['21', '32', '34', '43', '45', '54', '55'];
let sum = 0;

for (let elem of arr) {
	if (+elem[0] === +elem[1] + 1) {
		sum += +elem; // 修正
	}
}

console.log(sum); // 正常に動作

次のコードで発生しているエラーを修正してください:

let obj = {a: 10, b: 20, c: 30, d: 40, e: 50};
let sum = 0;

for (let elem in obj) {
	if (elem[0] === '1' && elem[0] === '2') {
		sum += +elem;
	}
}

console.log(sum);