#5 エラーの意味
#5 エラーの意味前回のパートでは、特定の行をコメントアウトすることによって、その内容を推定するという方法を学びました。その結果、一部の命令に対する具体的なコメントを記述することが出来ました。
window.onload = function( ev ) // 文ではない何か
{ // 不明な行
const ca = document.getElementById( 'main' ); // 文
const g = ca.getContext( '2d' ); // 文
g.font = "80px monospace"; // 書体を80ドットへ変更
g.fillStyle = "#00ff00"; // 描画色を緑へ
g.fillText( "こんにちは世界", 40, 80 ); // 文
} // 不明な行
５行目と６行目の処理内容が推定できましたよね。では、このやり方で他の行も推理してみましょう！ ７行目をコメントアウトしてみます。
window.onload = function( ev ) // 文ではない何か
{ // 不明な行
const ca = document.getElementById( 'main' ); // 文
const g = ca.getContext( '2d' ); // 文
g.font = "80px monospace"; // 書体を80ドットへ変更
g.fillStyle = "#00ff00"; // 描画色を緑へ
// g.fillText( "こんにちは世界", 40, 80 ); // 文
} // 不明な行
何も文字列が描画されませんね。これにより、７行目の処理内容は、「文字列を描画」であることが推定できます。が、こういったケースの場合、これだけの確認だけで特定してしまうのは早計です。なぜかというと、このブラウザ表示結果は、プログラムにエラーがあった場合と同じだからです。エラーのせいで描画されていないだけかもしれませんからね。なので、F12キーを押して、「コンソール」タブにエラーが出力されていないことを念のため確認しておきましょう。
７行目の処理内容を無事推定出来たので、次は４行目に対しても同様の実験をしてみます。
window.onload = function( ev ) // 文ではない何か
{ // 不明な行
const ca = document.getElementById( 'main' ); // 文
// const g = ca.getContext( '2d' ); // 文
g.font = "80px monospace"; // 書体を80ドットへ変更
g.fillStyle = "#00ff00"; // 描画色を緑へ
g.fillText( "こんにちは世界", 40, 80 ); // 文字列を描画
} // 不明な行
ブラウザを起動すると、先ほどと同様、何も描画されず青いだけです。が、今回はコンソール画面にエラーが出力されています。こんな感じで、たとえブラウザ表示結果が同じでも、内部的には意味合いが異なる、といったケースもあるんだなぁ、っていうことが分かったと思います。
この結果、４行目の処理内容が７行目と違って「文字列の描画」ではないことは分かりましたが、じゃあ４行目は一体何なのでしょうか？ 流石にこうなってしまうと「推理」は出来ない？ ような気もしますが、折角なので頑張ってみたいと思います。
パート３で、エラーが出た場合の対処方法を少しだけ学びましたが、今回はもう少し踏み込んでみます。コンソール画面での赤文字部分は、
SCRIPT5009: SCRIPT5009: 'g' is not defined
です。ここでは後半部分の「'g' is not defined」に注目しましょう！ ちなみに、前半部分の「SCRIPT5009」はエラーコードと言い、エラー内容ごとに割り振られた管理番号のようなものです。なので例えば、ググってエラーの意味を調べてみよう！ なんていうときは、この部分は非常に重要になりますけど、今回は無視します。
ところで、皆さんは英語は得意でしょうか？ 私は苦手ですw なのでここはGoogle翻訳先生の出番ですね！
「'g'は定義されていません」。だから何なのでしょうか？ この１文だけでは良くわかりませんねぇ。他の情報も見てみましょう！ コンソールタブで右青文字の「main.js (5,5)」をクリックし、「デバッガー」タブを表示します。
ここで重要なことは２点。１つ目は、エラー箇所が「５行目」であることです。コメントアウトしたのは４行目でしたよね？ まあこれは当たり前と言えば当たり前なのですが、４行目はコメントアウトしてしまったので、４行目自体に問題が起きた、ということではないんですね。４行目は何もしない行、ということにしてしまった訳ですからね。つまり、４行目を失くしてしまったせいで、５行目に弊害が現れた、ということになります。
もう１つ重要なことは、５行目の「'g'」にカーソルが合わさっていて、エラーメッセージも、何やら「'g'」が問題だ！ と言っていることですね。
エラーメッセージの内容を、もう一度考えてみます。
「'g'は定義されていません」
と言っていますが、それがエラーだということは、言い換えると、
「'g'が定義されていないのでダメです！！」
と言っていますよね。要するに、
「ちゃんと'g'を定義してね！！」
ということです。何故'g'を定義しないとダメなのでしょうか？ これに関してはJavaScriptのエラーメッセージが少々不親切というか言葉足らずだと思うのですけど、デバッガーが５行目の「'g'」にカーソルを合わせていることに注目すると、
「５行目で'g'ってありますけど、ちゃんと'g'を定義してないのでダメです！！」
となります。つまり、
「'g'を定義していないのにも関わらず、５行目で'g'を使おうとしたからダメ！！」
という訳です。結果、分かったことは、
・４行目では、'g'を「定義」している。
・定義していないものを使おうとするとエラーになってしまう。
長くなりましたが、今回判明したことは、４行目の処理内容が
「gを定義」
していることと、５行目で
「gを使用」
しているということだけです。頑張った割には何も進んでいないように感じるかもしれませんが、こういったことが「バグ修正は大変！」ということなんだと感じていただけれたら幸いです。
ちなみに、４行目と５行目、両方コメントアウトすると、６行目で同じエラーが発生します。７行目も同様です。そして、５～７行目は全て「g.～」という書き出しですよね。つまり「g.～」と記述するためには、gを定義しないとダメだということです。
最後に、今回判明したことをコメントに反映しておきます。
window.onload = function( ev ) // 文ではない何か
{ // 不明な行
const ca = document.getElementById( 'main' ); // 文
const g = ca.getContext( '2d' ); // gを定義
g.font = "80px monospace"; // gの書体を80ドットへ変更
g.fillStyle = "#00ff00"; // gの描画色を緑へ
g.fillText( "こんにちは世界", 40, 80 ); // gへ文字列を描画
} // 不明な行