コードを書いていると、思ったように動かないことがよくあります。
コードを見直してみても、なかなか自分では間違いを見つけられないこともありますよね。
今回は、デバッグについてまとめてみました。
デバッグとは
～Crebitテキストより～
デバッグとは、原因を調べて、コードを修正し、正しく動くか確認する一連の作業のことをいいます。
デバッグの方法は以下3つあります。
①コンソールを使う
エラーの発生場所を示す
②console.log()を使う
変数の中身や、処理の流れがどう変化しているのかを調べる
③”use strict”;を書く
JavaScriptがより厳密なモードで実行され、バグを未然に防ぐ
今回は、この中でも②console.logについて深堀りします。
デバッグconsole.logの使い方
console.logはチェックポイントです。
コードが「どこまで実行されているか」を確認できます。
値を見るときは説明文を一緒に出すとわかりやすくなります。
console.log(x); ←画面には値だけが表示される。この数字あるいは文字は何？？となる
console.log(“xの中身：”, x ); ←xの中身の数字あるいは文字であることがわかる！
文法ごとの使い方
①if文での使い方
if (age >= 20) {
console.log(’20歳以上の処理に入りました’);
} else {
console.log(’20歳未満の処理に入りました’);
}
ifに入ったのか、elseに入ったのかがわかります。
②関数が呼ばれているか確認
function hello() {
console.log(‘hello関数が呼ばれました’);
}
hello();
もし表示されない場合、関数が呼ばれていないとわかります。
③エラーの手前を探す
console.log(‘①ここは通る’);
let result = price * count;
console.log(‘②ここも通る’);
let total = result + tax;
console.log(‘③ここは通らない’);
①②は表示されるが③が表示されない場合、②～③の間で何か問題があると特定できます。
④for文での使い方
for (let i = 0; i < 100; i=i+1) {
if (i == 0 || i == 99) {
console.log(‘i:’, i);
}
}
最初と最後だけ確認すれば十分な場合が多いです。
まとめ
今回はデバッグ、特にconsole.logを使ったデバッグ方法を紹介しました。
動かないとついコードを目で追ってしまいがちですが、console.logでチェックポイントを入れることで、バグを見つけやすくなります。
少しずつデバッグに慣れていきたいですね。