Lesson 11 デバッグ
前のLessonでみたように， 利用者から入力を受け取ったり， 結果を表示したりするのにフォームが使えますが， JavaScriptのプログラムを作る際にとても役に立つフォームの利用法があります。 それは「デバッグ（debug）」用に使うというものです。 このLessonでは， デバッグに焦点を当ててみましょう
メモ
デバッグ（debug）とはプログラム中にある構文的な間違いや論理的な間違いを直していく作業のことを言います。 "bug"は英語で「虫」のことで， "de"は「離す」「取り除く」という意味を持つ接頭辞です。 プログラムのエラーはどこかに隠れている小さな虫のようになかなか見つけにくくそれを取り除くのが大変なので， エラーを取り除くことをdebug（虫取り）と呼ぶようになりました。
フォームを使ったデバッグ
Lesson 9で表（テーブル）を表すHTMLコードをJavaScriptを使って生成しましたが（プログラム9-1）， 生成されたコードが正しいものか確認できるとうれしいと思いませんでしたか？ 表をつくるには<tr><td>などタグを順序よく並べないといけないので， エラーが起こってうまく表示されないと， いったいどこが悪いのは見つけるのはなかなか大変です。 フォームを使うとJavaScriptで出力しようとしているHTMLコードが簡単に確認できます。 どのようにするかコードを見てみましょう。
プログラム11-1 example11-01.html 計算問題10
メモ
上のコードの17行目で， 「var i=0;」と変数iの宣言をforループの中に入れています。 Lesson 9の例ではループの外で「var i;」と宣言してからforループの中でiを用いていましたが， このようにループの中でiを宣言して使うこともできます。
Lesson 9の例題と何が違っているかというと， 15行目から始まっている関数keisanPrintHyoji()の最後に次の部分が付加されています。
30 var debugMojiretsu = "<form>" + 31 "<textarea name='debug' rows='20' cols='70'>" + code + 32 "</textarea>\n</form>"; 33 document.write(debugMojiretsu);
ここで， 変数debugMojiretsuに代入されるのは次のような文字列になります。
"<form> <textarea name='debug' rows='20' cols='70'>【変数codeの内容】</textarea> </form>"
<textarea>タグはフォーム内で用いて「テキスト領域（text area）」を表します。 これは複数行にわたるテキストの入出力に使われるものです。 rows属性で行数， cols属性で横幅を指定します。
たとえば次のようなコードで図11-1のような10行×50文字の領域が表示されることになります。
<form>
<textarea rows='10' cols='50'>ここに入力することができます。 </textarea>
</form>"
|
| 図11-1 デバッグにフォームを利用 |
プログラム11-1の33行目では， <form><textarea ...>...</textarea></form>というコードで囲まれて， 変数codeの内容が出力されるので， ブラウザのウィンドウには図11-2のようにcodeの内容が表示されることになります。 このような手法を使えば， 出力される内容や途中経過などを自由に見ることができるので， 大変便利なのです。
プログラムが完成したらこのようなデバッグの情報は消さなければならないので， 上の４行を次のように「コメントアウト（comment out）」します。
// var debugMojiretsu = "<form>\n" + // " <textarea name='debug' rows='20' cols='70'>" + code + // "</textarea>\n</form>"; // document.write(debugMojiretsu);
あるいは， スクリプトの冒頭で次のような変数を用意して初期化しておいて，
var gDebugging = true; // 大域変数。 デバッグが終わったらfalseにする
次のようにif文を使ってgDebuggingがtrueのときだけテキスト領域を作って生成したコードを出力するようにするのもひとつの方法です。
if (gDebugging) {
var debugMojiretsu = "<form>\n" +
" <textarea name='debug' rows='20' cols='70'>" + code +
"</textarea>\n</form>";
document.write(debugMojiretsu);
}
メモ
前に使ったalert()やprompt()など， ダイアログボックスを表示する関数もデバッグに使えます。 引数に確認したい変数などを指定すれば， 途中経過を表示できます。 なお， FirefoxというブラウザにFirebugという「アドオン」機能を追加すると大変便利なデバッグ環境が利用できます。 初心者には少し難しいかもしれませんが， 慣れてきたらトライしてみてください。
デバッグ時の心構え
次のLessonでは， かなり長いプログラムを作成します。 プログラムが長くなってくると， 思いどおりに動かなくなることも多くなります。
「おかしい。 これなら絶対にうまくいくはずだ」と思っても， うまくいかないということも何度も経験することになります。 ごくまれに， JavaScriptなどの処理系（インタプリタやコンパイラ）自体にバグがある場合もありますが， 初心者がまずこのようなバグに出会うことはないと考えてよいでしょう。 初心者が出会うようなバグならば， ベテランユーザーがそれよりも前に見つけている確率の方がはるかに高いのです。 したがって， うまく動かない場合は， 自分に責任があると考えてまず間違いはありません。
前にも触れましたが， 構文的なエラー（キーワードの綴りの間違いや引用符の書き忘れなど）は， ある程度時間をかければなくなるはずですが， 論理的なエラーがある場合は， なかなか解決できないことがあります。 ある特殊なケースがあるのに， そのようなケースに対する対策を考えていなかったというような場合です。
このような場合は途中の変数の状態などを調べることにより， 自分の考えていた筋書きどおりに推移しているかどうかを途中でチェックしてみるとよいでしょう。 その手段として， 上で紹介したフォームが使えます。 変化をチェックしたい， 変数の値を記憶しておいて， フォーム内のテキスト領域に出力して， その値が自分の想定と同じように変化しているかをチェックします。 すでに書いたように， alert()などの関数もこの目的に使えますが， 一度表示するたびに実行が止められるので不便なことがあります。 逆に， alert()などで実行を止めて， そのときの状態をテキストエリアに表示するという手もあります。
メモ
デバッグ方法としてもっとも有効なのは， 「招き猫」を使う方法だという説があります。 招き猫をどう使うかというと， 自分の前に置いて， プログラムを頭から順を追って， 招き猫に向かって説明していくのです。
「まず， この変数をここで初期化して， forループに入って， forループはこの条件で抜けて...」と招き猫に向かって説明しているうちに， 「あっ。 ここで変数の値を増やすのを忘れている」とかいった間違いに， 自分で気づくというわけです。
本当は， プログラムのわかる人に説明して助言をもらうのが一番よいのですが， そのような人が近くにいない場合， 「招き猫デバッガ」を試してみるのも悪くはないかもしれません。
まとめ
このLessonでは， JavaScriptにおけるデバッグの方法について， いくつか方法を説明しました。 <textarea>... </textarea>などフォームを使ったり， alert()などの関数を使うとデバッグが比較的簡単に行えます。
HTML ── フォーム関連のタグ
- <textarea>...</textarea> ── テキストエリア（複数のテキスト入力欄）。 デバッグに便利