No.04 デバッグを行うために
03 エラーの原因の例
 
 スクリプトを作成していく上で、エラーは避けて通ることの出来ない事象となります。 となれば無論、デバッグに関する作業を行わなければならないわけで、幾つか注意しなくてはならないことが出てくることになります。
 スクリプトエラーは、基本的に行数とエラーの種目が表示されます。 IEの場合は日本語が、NSの場合は英語がエラーの種目として与えられますが、互いに行数が出るという意味ではデバッガとしての意味合いは同じと考えて良いでしょう。
 簡易なスクリプトであればメモ帳等で上から順に数えていっても良いのですが、比較的大きなスクリプト群になってくると、メモ帳のように行番号の出ないエディタでは作業効率が落ちてしまいます。
 本格的なスクリプトを組む場合には、私の使っているWZエディタ(ビレッジセンター製)かシェアウェアの秀丸、もしくはフリーで出回っているソフトなどを用いて、デバッグに備えておくことが良いでしょう。




 さて、デバッガとして用いることの出来るブラウザのエラー表示機能ですが、基本的には一度に1つのエラーしか表示することが出来ません。 IEの場合は、エラーウインドウ上で「以前」「次回」をクリックすることで履歴のエラーがチェックできますし、NSの場合は羅列して表示してくれるので、結果として幾つものエラーはチェックできますが、仮に複数のエラーが合った場合でも、一つ目のエラーでとまってしまって、他の潜在的なエラーが表示されない場合もありますので留意していく必要があります。
表示されないエラー
<Script Language = "Javascript">
  abc;
  def;
</Script>

	
 例えば上記の場合、エラーメッセージは 「abc is not defined」 つまり、宣言されていない識別子であるといった意味合いのエラーが発生しますが、潜在的に「 def 」のエラーがあるにも関わらず、表示はされません。
 [ abc ] のエラーを修正して、初めて、エラーメッセージに「def is not defined」と表示されることになります。



 また、エラーがひとつ発生すると、連鎖的に複数のエラーが発生する場合があります。
宣言ミスによるエラー
<Script Language = "Javascript">
  var commen = new Array();
  comment[1] = "TEST1";
  comment[2] = "TEST2";

  document.write(comment[1] + " / " + comment[2]);

</Script>

	
 上記の場合、 var ステートメントで宣言している「comment」の綴りが間違っていることで、comment が宣言されていないというエラーが発生しますが、発生箇所は comment[1] の行であり、 var commen の部分ではないことになります。
 ですから、宣言系のエラーが発生した場合は、その行番号は無論のこと、データの整合性や宣言状態のチェックを同時に行う必要性があります。



 文字列を作成する場合、 「"〜"」もしくは「'〜'」といった形式で書きますが、この場合のクォーテーションの閉じ忘れ等は、その行ではなく次の行でエラーとなる場合があります。
クォーテーションにまつわるエラー 1
<Script Language = "Javascript">
  var comment = new Array();
  comment[1] = "TEST1
  comment[2] = "TEST2";

  document.write(comment[1] + " / " + comment[2]);

</Script>

	
 上の例は、 [ comment[1] = "test ] となっているため、文字列の綴じが行われず、次の行数でエラーが発生する例を示したものです。



 エラーの中で最も厄介なのが、括弧の閉じ忘れによるエラーです。
 Javascruot では、[ function ] や [ for ] といた構文には、全て「 { 〜 } 」の括弧を用います。 このため、括弧の閉じ忘れ等のエラーが発生すると、スクリプトデバッガはどこでエラーが発生したかを特定出来ず、最終行などの行数でエラーを返すことになります。
括弧にまつわるエラー
<Script Language = "Javascript">
var count = 0
  function err(check){
    if (check == 1){
      for (x1=0 ; x1 < 10 ; x ++ ){
         count = count + 2
         if (count >=12){ 
            count2 = true
         }
      }
     } else 
      for (x1=0 ; x1 < 10 ; x ++ ){
         count = count + 3
      }
    }


  }

</Script>

	
 このエラーの場合、 if { 〜 } else { 〜 } の構文に間違いがあるので、本来なら { else } の行でエラーが発生したことを告げてきそうなものですが、実際のデバッガは、最終行で「構文エラー (syntax Error)」として返してくることになります。
 また、デバッガには 「 ( 〜 ) 」のエラーの行数なども正確に返してこない場合もあるので、階層化を使ってわかりやすく、エラーの起きないようなプログラム開発をしていく必要性が高いことが分かると思います。



 さて、<script>でくくられるスクリプトは、ひとつのブラウザで複数の位置にスクリプトを挿入することが可能になります。グローバル変数は同一HTML上であれば互いに共有されますが、HTMLはその特性上、上から順に動作していきますので、下記のような表記はエラーになります。
宣言位置にまつわるエラー
<Html>
<Head>
  <Script Language = "Javascript">
    abc = 10;
  </Script>
</Head>
<Body>
  <Script Language = "Javascript">
    var abc = new Array();
  </Script>
</Body>
</Html>

	
 上記の例は、グローバル変数である「abc」に10を代入するスクリプトですが、<Body>〜</Bodyd>の中にあるJavascriptで「abc」変数が宣言されている関係上、<Head>〜</Head>の中のJavascriptが呼び出された時点では宣言が行われていないことになり、実行時にエラーとなります。
 実際はここまで露骨なエラーを出すことは少ないでしょうが、「function」オブジェクトなどが絡んでくると意外と陥りやすいエラーになったりします。



 文字列は、基本的に”〜”(ダブルクォーテーション)などを用いますが、文字列の中で文字列を指定する場合など、
クォーテーションにまつわるエラー 2
<Script Language = "Javascript">
  var data = "<Table Bgcolor="#EFEFFF">"
</Script>

	
 上記のような記述を行うとエラーとなります。 これは、最初のクォーテーションである「"」の綴じ位置を「"」で終了と誤認識してしまい、その後ろの「 #EFEFFF 」等を不明文字列として返してしまっていることが原因です。
 最も簡単な回避方法としては、
クォーテーションにまつわるエラーの回避例1
<Script Language = "Javascript">
  var data = "<Table Bgcolor='#EFEFFF'>"
</Script>
	
 上記のように、中のクォーテーションを、シングルクォーテーション「'」にすることでが、最も一般的に用いられている回避方法といえます。
 この他の方法としては上記以外に特殊文字として表記することで、Javascriptインタープリタに特殊文字を認識させる手法もあります。
クォーテーションにまつわるエラーの回避例2
<Script Language = "Javascript">
  var data = "<Table Bgcolor=\"#EFEFFF\">"
</Script>
	
 Javascriptでは、そのままでは認識することができない特殊文字に関して、一連の定義があります。 クォーテーションはこの特殊文字の部類に含まれるので、「\"」とすることで、Javascriptが特殊文字として認識することが可能になります。



 上記でも触れましたが、Javascriptでは特殊文字を扱うには特別な手法が必要になることがあります。
特殊文字にまつわるエラーの例
<Script Language = "Javascript">
  document.write("合計金額は \23,100 です");
</Script>
	
表示例
合計金額は ,100 です
 上記の例は金額を[ write ]メソッドで書き込みをした例です。 ところが、「\」記号は特殊文字をjavascriptインタープリタに知らせるためのエスケープ文字と呼ばれる記号に属しているため、「¥」の後ろに記載されている23,100 を特殊文字のコードとして扱ってしまい、正常に表示されないといった現象が発生することになります。
 これを回避するためには、
特殊文字にまつわるエラーの回避例
<Script Language = "Javascript">
  document.write("合計金額は \\23,100 です");
</Script>
	
表示例
合計金額は \23,100 です
 上記のように、「\\」(円記号を重ねる)といった記述を行う必要があります。

この他、特殊文字は下記の種類があり、これらを扱うには「¥」を用いる必要があります。
特殊文字一覧
\b
バックスペース
\f
フォームフィード
\n
改行
\r
キャリッジリターン
\t
水平タブ
\"
ダブルクォーテーション
\'
シングルクォーテーション
\\
円記号


ページの最上段へ移動します