JavaScriptで学ぶ文系の人にもわかるプログラミング入門

第10章以降は現在改訂作業中です。少し古い内容が入っていますので、注意してお読みください。問題なく動作はしますので、プログラミングの学習としては無駄にはなりません。ただし、現在は「よい」とはみなされていない表記方法などが、その旨の注意書きなしで使われている箇所があります。

実践のプログラムを書かれる際には『初めてのJavaScript 第3版』などをご覧になって、よりよい方法を身につけられることをおすすめします。

第11章デバッグ

前の章でみたように，利用者から入力を受け取ったり，結果を表示したりするのにフォームが使えますが， JavaScriptのプログラムを作る際にとても役に立つフォームの利用法があります。それは「デバッグ（debug）」用に使うというものです。この章では，デバッグに焦点を当ててみましょう

メモ

デバッグ（debug）とはプログラム中にある構文的な間違いや論理的な間違いを直していく作業のことを言います。 "bug"は英語で「虫」のことで， "de"は「離す」「取り除く」という意味を持つ接頭辞です。プログラムのエラーはどこかに隠れている小さな虫のようになかなか見つけにくくそれを取り除くのが大変なので，エラーを取り除くことをdebug（虫取り）と呼ぶようになりました。

フォームを使ったデバッグ

第9章で表（テーブル）を表すHTMLコードをJavaScriptを使って生成しましたが（プログラム9-1），生成されたコードが正しいものか確認できるとうれしいと思いませんでしたか？　表をつくるには<tr><td>などタグを順序よく並べないといけないので，エラーが起こってうまく表示されないと，いったいどこが悪いのは見つけるのはなかなか大変です。フォームを使うとJavaScriptで出力しようとしているHTMLコードが簡単に確認できます。どのようにするかコードを見てみましょう。

プログラム11-1　example11-01.html　計算問題10

1  <!DOCTYPE html>
   2  <html>
   3  <head>
   4  <meta charset="utf-8">
   5  <title>けいさん11</title>
   6  
   7  <script type="text/javascript">
   8  var mondaiSu = 2*2; // 問題数
   9  var kotaeNoSaidaiChi = 19; // 答えの最大値
  10  var debugging = true; // falseにすればデバッグ情報は書かない
  11  
  12  function keisanPrintHyoji() {
  13    var mondai = new Array();
  14    for (var i=0; i<mondaiSu; i++) {
  15      mondai[i] = mondaiSeisei(kotaeNoSaidaiChi);
  16    }
  17  
  18    var code = '<h2 align="center">けいさんれんしゅう</h2>\n' +
  19      '<table width="500" border="0" align="center">\n';
  20    for (var i=0; i<mondaiSu/2; i++) {
  21      code += '<tr>\n  <td align="right">' + mondai[i*2] +
  22        '</td>\n  <td>＝ </td>\n  <td align="right">' +
  23        mondai[i*2+1] + "</td>\n  <td>＝ </td>\n</tr>\n";
  24    }
  25    code += '</table>\n<p align="right">せいかい_____ まちがい　_____ </p>'
  26    document.write(code);
  27    var debugMojiretsu = "<form>" + 
  28      "<textarea name='debug' rows='20' cols='70'>" + code +
  29      "</textarea>\n</form>";
  30    document.write(debugMojiretsu);
  31  }
  32  
  33  // 足し算か引き算をひとつ生成
  34  // 引数  -- kotaeNoSaidaiChi 答えの最大値（正数）
  35  // 戻り値　-- 生成した問題。例 "1+1"
  36  function mondaiSeisei(kotaeNoSaidaiChi) {
  37    var no1, no2;
  38    var mondai, seikai, kotae;
  39    var enzan;  // "+" か "-" 
  40    
  41    do {
  42      no1 = randomInt(kotaeNoSaidaiChi-1);
  43      if (randomInt(2) == 1) { //足し算の場合
  44        enzan = " ＋ ";
  45        no2 = randomInt(kotaeNoSaidaiChi-no1);
  46        seikai = no1 + no2;
  47      }
  48      else {  // 引き算の場合
  49        enzan = " ー ";
  50        if (no1 > 10) {
  51          no2 = randomInt(no1-10);
  52        }
  53        else {
  54          no2 = randomInt(no1);
  55        }
  56        seikai = no1 - no2;
  57      }
  58      mondai = no1 + enzan + no2;
  59    }
  60    while (mondaiChofuku(mondai));
  61    return mondai;
  62  }
  63  
  64  var MondaiKioku = new Array(); //これまでに出した問題を記憶
  65  var MondaiBangou = 0; //これまでに出した問題数を記憶
  66  
  67  //これまでに生成した問題と重複があるかをチェックする
  68  //引数   mondai -- チェック対象の問題。たとえば"1+1="
  69  //戻り値 true  -- すでに生成した問題と重複していた
  70  //       false -- 重複はなかった
  71  function mondaiChofuku(mondai) {
  72    var i;
  73    for (i=0; i<MondaiBangou; i++) {
  74      if (MondaiKioku[i] == mondai) {
  75        return true;
  76      }
  77    }
  78    MondaiKioku[MondaiBangou] = mondai;
  79    MondaiBangou++;
  80    return false;
  81  }
  82  
  83  // 1以上i以下の整数を返す
  84  function randomInt(i) {
  85    return( Math.floor(Math.random()*i) + 1 );
  86  }
  87  </script>
  88  </head>
  89  <body onload="keisanPrintHyoji();">
  90  </body>
  91  </html>

メモ

上のコードの17行目で，「var i=0;」と変数iの宣言をforループの中に入れています。第9章の例ではループの外で「var i;」と宣言してからforループの中でiを用いていましたが，このようにループの中でiを宣言して使うこともできます。

第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という「アドオン」機能を追加すると大変便利なデバッグ環境が利用できます。初心者には少し難しいかもしれませんが，慣れてきたらトライしてみてください。

デバッグ時の心構え

次の章では，かなり長いプログラムを作成します。プログラムが長くなってくると，思いどおりに動かなくなることも多くなります。

「おかしい。これなら絶対にうまくいくはずだ」と思っても，うまくいかないということも何度も経験することになります。ごくまれに， JavaScriptなどの処理系（インタプリタやコンパイラ）自体にバグがある場合もありますが，初心者がまずこのようなバグに出会うことはないと考えてよいでしょう。初心者が出会うようなバグならば，ベテランユーザーがそれよりも前に見つけている確率のほうがはるかに高いのです。したがって，うまく動かない場合は，自分に責任があると考えてまず間違いはありません。

前にも触れましたが，構文的なエラー（キーワードの綴りの間違いや引用符の書き忘れなど）は，ある程度時間をかければなくなるはずですが，論理的なエラーがある場合は，なかなか解決できないことがあります。ある特殊なケースがあるのに，そのようなケースに対する対策を考えていなかったというような場合です。

このような場合は途中の変数の状態などを調べることにより，自分の考えていた筋書きどおりに推移しているかどうかを途中でチェックしてみるとよいでしょう。その手段として，上で紹介したフォームが使えます。変化をチェックしたい，変数の値を記憶しておいて，フォーム内のテキスト領域に出力して，その値が自分の想定と同じように変化しているかをチェックします。すでに書いたように， alert()などの関数もこの目的に使えますが，一度表示するたびに実行が止められるので不便なことがあります。逆に， alert()などで実行を止めて，そのときの状態をテキストエリアに表示するという手もあります。

メモ

デバッグ方法としてもっとも有効なのは，「招き猫」を使う方法だという説があります。招き猫をどう使うかというと，自分の前に置いて，プログラムを頭から順を追って，招き猫に向かって説明していくのです。

「まず，この変数をここで初期化して， forループに入って， forループはこの条件で抜けて...」と招き猫に向かって説明しているうちに，「あっ。ここで変数の値を増やすのを忘れている」とかいった間違いに，自分で気づくというわけです。

本当は，プログラムのわかる人に説明して助言をもらうのが一番よいのですが，そのような人が近くにいない場合，「招き猫デバッガ」を試してみるのも悪くはないかもしれません。

まとめ

この章では， JavaScriptにおけるデバッグの方法について，いくつか方法を説明しました。 <textarea>... </textarea>などフォームを使ったり， alert()などの関数を使うとデバッグが比較的簡単に行えます。

HTML ── フォーム関連のタグ

<textarea>...</textarea> ── テキストエリア（複数のテキスト入力欄）。デバッグに便利

JavaScriptで学ぶ文系の人にもわかるプログラミング入門
第11章次の章へ

JavaScriptで学ぶ 文系の人にもわかるプログラミング入門

第11章 デバッグ

メモ