#6 変数と代入
#6 変数と代入前回、行をコメントアウトすることにより、
const g = ca.getContext( '2d' ); // gを定義
の処理が「gを定義」しているというところまでは推定できました。これで処理の不明な文は、3行目のみとなったので、最後に３行目も同様の方法で推理してしまいましょう！
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へ文字列を描画
} // 不明な行
この状態でindex.htmlを表示すると、
SCRIPT5009: SCRIPT5009: 'ca' is not defined
となるので、前回と同様の理屈により、
「caを定義」
している処理だと推定出来ます。
不明な「文」は無くなりました。あらためてプログラム全体を眺めてみます。
window.onload = function( ev ) // 文ではない何か
{ // 不明な行
const ca = document.getElementById( 'main' ); // caを定義
const g = ca.getContext( '2d' ); // gを定義
g.font = "80px monospace"; // gの書体を80ドットへ変更
g.fillStyle = "#00ff00"; // gの描画色を緑へ
g.fillText( "こんにちは世界", 40, 80 ); // gへ文字列を描画
} // 不明な行
１行目も気になるところですが、今回の注目は３、４行目です。それぞれ、「ca/gを定義」とコメントしましたが、本当に定義だけしかしていないのでしょうか？
３行目と４行目に共通している部分は、前半の「const～」部分です。そして「=」を挟み、後半は全く別物ですよね。そうなると、後半部分は何か別の意味を持っているのでは？ と想像できると思います。
また、「=」は５、６行目でも使用されています。そして、５、６行目に関しては、処理内容がもっと明確に判明しています。試しに、５、６行目の「=」右側部分を下記のように変更してみて下さい。
window.onload = function( ev ) // 文ではない何か
{ // 不明な行
const ca = document.getElementById( 'main' ); // caを定義
const g = ca.getContext( '2d' ); // gを定義
g.font = "40px monospace"; // gの書体を40ドットへ変更
g.fillStyle = "#ff0000"; // gの描画色を赤へ
g.fillText( "こんにちは世界", 40, 80 ); // gへ文字列を描画
} // 不明な行
５、６行目に関しては、コメントの位置を工夫すると、もう少し分かりやすくなりそうです。
// gの書体 を 40ドットへ
g.font = "40px monospace";
// gの描画色 を 赤へ
g.fillStyle = "#ff0000";
こう書くとより明確になると思うのですが、「=」はコメント文てきには「を」に該当し、「=」の左側のものに対して、右側のものを設定する、といったような意味になります。
そして、このような「=」の使い方は
「代入」
と呼び、その文のことは、
「代入文」
と呼びます。これは推理の話ではなく、単純に知識の話ですね。用語を覚えることも重要ですので、是非ここで覚えて下さい。
３、４行目に関しては、「ca/gを定義」していることには間違いありません。と同時に、「=」が使われているので、「代入」も行なっているわけです。つまり、1つの文で複数の処理を行うことも出来るということです。
そして、先ほど「代入」という用語を学びましたが、今まで、「ca/gを定義」と言っていた部分の「ca」や「g」に該当する部分は「変数」と呼びます。これも用語の話ですので覚えて下さい。
最後に、今回学んだ用語を踏まえて、ソースのコメントを書き換えておきます。
window.onload = function( ev ) // 文ではない何か
{ // 不明な行
const ca = document.getElementById( 'main' ); // 変数caを定義。代入内容は不明
const g = ca.getContext( '2d' ); // 変数gを定義。代入内容は不明
g.font = "40px monospace"; // 変数gの書体を40ドットへ
g.fillStyle = "#ff0000"; // 変数gの描画色を赤へ
g.fillText( "こんにちは世界", 40, 80 ); // 変数gへ文字列を描画
} // 不明な行