Day22：デバッグの練習問題
デバッグは「バグを直す技術」ではなく、「バグの原因を見つける技術」です。
Day22 の学習内容である console.log と エラー確認 を中心に、
初心者でも確実に力がつく練習問題と解答・解説をまとめました。
console.log を使って値を確認する
問題1：足し算がうまくいかない原因を console.log で特定してください
次のコードは、2 と 3 を入力しても「23」と表示されてしまいます。
console.log を使って原因を突き止めてください。
<input id="aInput" type="text">
<input id="bInput" type="text">
<button id="calcButton">計算</button>
<p id="result"></p>
<script>
calcButton.addEventListener("click", () => {
const a = aInput.value;
const b = bInput.value;
const sum = a + b;
result.textContent = `結果：${sum}`;
});
</script>
解答と解説
calcButton.addEventListener("click", () => {
const a = aInput.value;
const b = bInput.value;
console.log("a:", a, "型:", typeof a);
console.log("b:", b, "型:", typeof b);
const sum = a + b;
console.log("sum:", sum, "型:", typeof sum);
result.textContent = `結果：${sum}`;
});
コンソールには次のように表示されます。
a: “2” 型: string
b: “3” 型: string
sum: “23” 型: string
原因は 文字列同士の結合になっている ことです。
修正は Number に変換すること。
const a = Number(aInput.value);
const b = Number(bInput.value);
console.log は「値」と「型」を同時に確認できるため、
こうしたバグの原因を一瞬で特定できます。
条件分岐が正しく動かないときのデバッグ
問題2：20 と入力しても「未成年です」と表示される原因を特定してください
次のコードをデバッグしてください。
checkButton.addEventListener("click", () => {
const age = ageInput.value;
if (age >= 20) {
result.textContent = "成人です";
} else {
result.textContent = "未成年です";
}
});
解答と解説
console.log("age:", age, "型:", typeof age);
コンソールには次のように出ます。
age: “20” 型: string
文字列の比較は意図しない動作をすることがあります。
修正は Number に変換すること。
const age = Number(ageInput.value);
条件分岐が怪しいときは、
「値」と「型」を必ず console.log で確認するのが鉄則です。
エラーを読んで原因を特定する
問題3：次のコードはクリックしても何も起きません。エラーを確認して原因を特定してください。
<button id="runButton">実行</button>
<script>
const button = document.getElementByID("runButton");
button.addEventListener("click", () => {
console.log("実行しました");
});
</script>
解答と解説
コンソールには次のエラーが出ます。
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
button が null になっているため、addEventListener を呼べません。
原因は getElementByID の D が大文字になっている ことです。
正しくは：
const button = document.getElementById("runButton");
エラー文の「null」「どのプロパティを読もうとしたか」を読むだけで、
原因がほぼ特定できます。
関数の中で起きているバグを追いかける
問題4：合計金額が NaN になる原因を console.log で特定してください
function calcTotal(priceText, countText) {
const price = Number(priceText);
const count = Number(countText);
return price * count;
}
button.addEventListener("click", () => {
const total = calcTotal(priceInput.value, countInput.value);
result.textContent = `合計：${total}`;
});
解答と解説
まずは calcTotal の中にログを入れます。
function calcTotal(priceText, countText) {
console.log("priceText:", priceText, "countText:", countText);
const price = Number(priceText);
const count = Number(countText);
console.log("price:", price, "count:", count);
return price * count;
}
コンソールに例えばこう出ます。
priceText: “”
countText: “3”
price: NaN
count: 3
原因は 空文字を Number に変換すると NaN になる ことです。
修正は空文字チェックを追加すること。
「何も起きない」バグの追い方
問題5：クリックしても反応しない原因を特定してください
<button id="startBtn">開始</button>
<script>
const btn = document.getElementById("startBTN");
btn.addEventListener("click", () => {
console.log("開始しました");
});
</script>
解答と解説
まずはイベントハンドラの先頭にログを置きます。
btn.addEventListener("click", () => {
console.log("クリックされた");
});
何も出ない場合、btn 自体を確認します。
console.log("btn:", btn);
コンソールには null と出ます。
原因は startBtn と startBTN のスペル違い です。
エラーの意味を理解する練習
問題6：次のエラーの意味を説明してください
Uncaught TypeError: Cannot read properties of undefined (reading 'length')
解答と解説
undefined の値に対して .length を読もうとしたために起きています。
つまり、
変数が undefined になっている
その変数に対して配列や文字列のように length を読もうとした
という状況です。
修正方法は、
その変数が undefined になっている原因を console.log で確認する
undefined の可能性があるならガードを書く
という流れになります。
Day22 練習問題まとめ
今回の練習問題で、デバッグの基礎がしっかり身につきます。
console.log で値と型を確認する
条件分岐の前でログを仕込む
関数の中にログを入れて「どこまで正しいか」を追う
エラーメッセージを読み、null / undefined の意味を理解する
「何も起きない」バグはイベント発火と要素取得を確認する
デバッグは「慣れ」がすべてです。
Day22 の内容を繰り返し練習すれば、
バグが怖くなくなり、むしろ「原因を探すのが楽しい」レベルに到達できます。