#4 基本文法
#4 基本文法今回のパートでは、具体的なプログラムを記述するためのルールを学びたいと思います。プログラムというのはコンピューターに様々な命令を指示することにより、こちらの意図した動作をさせるわけですが、その指示のしかたの説明をしていきたいと思います。具体的な命令の種類などは次回以降のパートですね。パート３で使用したmain.jsを例にとって解説していきたいと思います。
前回のパートのプログラムを見返してみます。
window.onload = function( ev )
{
const ca = document.getElementById( 'main' );
const g = ca.getContext( '2d' );
g.font = "80px monospace";
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";
g.fillStyle = "#00ff00";
g.fillText( "こんにちは世界", 40, 80 );
}
こうやって記述しても、全く同じ動作をします。JavaScriptプログラムは見やすさの為だけに空白を入れることが許されていて、どのように空白を入れるかどうかは、プログラムを組む人の癖というか主観にかかってきます。私はこの記述スタイルが良いと思って書いていますが、下記のような書き方でも構わないわけです。
window.onload=function(ev)
{
const ca=document.getElementById('main');
const g=ca.getContext('2d');
g.font="80px monospace";
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";g.fillStyle="#00ff00";g.fillText("こんにちは世界",40,80);}
これでも構わないんです。ただ、流石にこれだと「個人の主観」レベルを通り越して、誰が見ても分かりづらいですよね。ただ、動作自体に支障は無いんです。で、この記述のほうがファイルサイズが少し小さくなりますので、例えばスマホ向けサイトで少しでもパケ代を節約してあげたい！ みたいな話だと、この記述はアリです！ ただ、流石に書きづらいので、最初は普通に記述して、完成してからこのスタイルに書き直す、みたいなことになると思うんですけど、実はその作業を行なう専用のツールがあったりします。ただそれは「超入門」の範疇を超えているので、ここでは紹介しませんけど。
で、改行が意味を持たないことはわかりましたが、そうなるとじゃあ「文」の区切り目は一体何なのかというと、それはセミコロン（;）になります。３行目から７行目の終わりには必ずセミコロンがありますよね。これによって文の終わりを認識しているわけです。日本語の文章であれば、句点「。」に該当します。
そうなると今度は３～７行目以外の文にセミコロンが無いじゃないか！ といった疑問が出てくると思いますが、それは日本語の文章であっても、句点が無い箇所ってありますよね？ 例えばこのページで言えば、見出しの青い部分みたいな。言い換えるとこれは、１行目の内容が、３～７行目と違った扱いであることが分かるのではないかと思います。
１行目と、３～７行目が違った意味合いだということまでは分かりましたが、じゃあ具体的にどんな意味を持つのか？ といった話は次回以降のパートで解説していきます。が、今回判明した事実（１行目と３～７行目が違うということ）だけでも書き止めておくと、次回以降の理解が早まりそうですよね。
日本語の文章が書かれた紙の本や資料などに「付箋」を貼って、理解の手助けをしたりすることってありますよね？ それに該当するようなことがJavaScriptのプログラムでも出来ます。「//」と記述すると、その行のそれ以降の文字が、命令とは無関係の注釈になります。
window.onload = function( ev ) // 文ではない何か
{ // 不明な行
const ca = document.getElementById( 'main' ); // 文
const g = ca.getContext( '2d' ); // 文
g.font = "80px monospace"; // 文
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"; // 文
// 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"; // 文
g.fillText( "こんにちは世界", 40, 80 ); // 文
} // 不明な行
このように、「//」には注釈を入れる目的以外にも、特定の処理を削除する、といった使い方もできます。また、こういった操作のことを「コメントアウトする」といった言い方をします。
「そんなことしなくても、行ごと削除すれば良いだけですよね？」と聞かれれば確かにその通りなんですが、長いプロクラムを組んでいくと、
「特定の処理を一時的に削除して、動作を確認する」
といったことを行ないたい場面が出てくるんです。ただ、それが具体的にどういった場面なのかどうかは、現状では説明できないです。その場面になってみないと有用性が分からないので。なので、ここではそういったことも出来るんだ～、といったことだけ頭に入れておいてください。
今回使用した９行からなるプログラムですが、具体的な内容はまだ一切説明していませんよね。ただ、今回までの学習内容を駆使すれば、一部を予想することが出来ます。
「なんでわざわざ『予想』なんてするの？ さっさと教えてくれればいいじゃん！！」
と言われたら、全くもってその通り、としか答えるしかないんですけど、こういった発想は今後のプログラミング作業で躓いた場合、とても役立つはずなので、是非ここで覚えて下さい。
先ほどの６行目をコメントアウトしたプログラム
window.onload = function( ev ) // 文ではない何か
{ // 不明な行
const ca = document.getElementById( 'main' ); // 文
const g = ca.getContext( '2d' ); // 文
g.font = "80px monospace"; // 文
// 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"; // 文
g.fillStyle = "#00ff00"; // 描画色を緑へ
g.fillText( "こんにちは世界", 40, 80 ); // 文
} // 不明な行
結果が小さくてわかりづらいですが、今度は緑の文字がすごく小さく表示されたと思います。つまり５行目は、フォントを変更する処理だったんです！ まあ、「g.font」とか「80px」といった記述で、なんとなく想像出来ちゃいますけどね。
また、当然ながら、５行目と６行目、両方ともコメントアウトした場合、「黒の小さい文字」で描画されます。
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 ); // 文
} // 不明な行
この記述方法でも、同じ意味合いになります。初めのうちは「//」より使用頻度が低いかもしれませんが、こちらのやり方の習得も必須だと思っておいて下さい。
戻る back