基本的なデバッグ方法/JavaScript

JavaScriptでスクリプトを作っていると、思ったように動作しない事があります。このような時、どこでエラーになっているか確認する、処理途中の値を確認する等してデバッグする必要があります。

本項では、基本的なJavaScriptのデバッグ方法について説明します。

バグとデバッグ

 プログラミングの間違いをバグと言います。バグがあるとエラーで処理が止まったり、正常な結果が得られなかったりします。

 デバッグとは、バグを見つけて修正する事です。

バグとデバッグの概要

 デバッグは、バグがどこにあるか見つける事が重要ですが、簡単なスクリプトであれば専用のツールを使わなくても、基本的な探し方があります。

コメントアウト

 スクリプトを何行か追加した際、エラーになったとします。

間違った処理の追加

 この時、どの行が疑わしいか目安を付けるには、コメントが役に立ちます。

【コメントアウトの例】
<script>
var x = 1;
var y = 2;
/*
x+;
*/
y = y + 3;
var z = x + y;
document.write(z)
</script>

 /*と*/に囲まれた範囲がコメントとなり、処理されません。複数行に跨ってもコメント扱いになります。又、1行内であれば//を使うと以降がコメントになるため、//x+;と書き換えてもコメントに出来ます。

 スクリプトをコメントにして処理させないようにする事をコメントアウトと言います。削除するのと違って、元に戻す時は/*や*/、//を削除するだけなので簡単です。又、少しずつコメントアウトする場所を変える事で、バグの箇所を特定する事も出来ます。

 上記では、x+;をコメントアウトした事でエラーにならなくなるため、バグの箇所が特定出来ます。x++;に書き換え、赤字部分を削除すれば正常に動作するようになります。

変数の値を確認

 スクリプトを作成している時、変数の値が思った通りになっていないと感じる事は良くあります。

 例えば、変数xの値が思った通りになっているか確認する場合は、document.write(x);を疑わしい箇所に記述します。

 ブラウザで表示すると、その時点でのxの値が表示されるため、値が思った通りになっているか確認出来ます。

デバッグ時の変数表示

 思った値になっていない場合は、その前の処理に間違いがないか確認が必要です。これは、document.writeを疑わしい処理の前後に記述する事で確認出来ます。

 もし、処理前が正常な値で、処理後が思った値になっていない場合は、そこがバグの可能性が高いと言えます。

セミコロンとコロンの間違い

 デバッグしている時に、良くあるのがセミコロン(;)と、コロン(:)の間違いです。

【間違ってコロンを使った例】
<script>
var x = 1:
var y = 2;
var z = x + y;
document.write(z);
</script>

 上記は、var xの行で最後がコロンになっています。これだけでエラーになって、処理が中断されます。これは、セミコロンに書き換える必要があります。

 ぱっと見ると、正確に記述しているように見え、見落としやすいので注意が必要です。

  • このエントリーをはてなブックマークに追加