JavaScript超入門2019 #9 Web API

　ここ数回、「とりあえず」記述したプログラムの意味を解読していく、というスタイルで進めてきましたが、今回のお話が後半の山場です。３、４行目の不明部分を解読したいと思います。

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へ文字列を描画
}                                                   //  不明な行

　プログラムを前々回の物に戻しました。前回のletやvarの話は、今回出てきませんので。今回の話題は、３、４行目の「代入内容は不明」部分です。

　ところで話は少し変わりますが、JavaScriptの「公式マニュアル」というものは存在しないのでしょうか？　「JavaScript 入門」等でググると様々なサイトがヒットしますが、この私のサイト同様、個人が独自に解説しているものばかりが出てきますよね。

　wikipediaのJavaScriptページを見てみると、「開発者」は「ネットスケープコミュニケーションズ、Mozilla Foundation」となっています。ネットスケープという会社は、昔からインターネットを使っている方であればご存知かもしれませんが、今現在(2019年)の開発者は、「Mozilla Foundation」と言っても良いでしょう。ですので、Mozillaのサイトにある情報が、JavaScriptの「公式マニュアル」に該当するのではないでしょうか。

ブラウザ上のJavaScript

　３行目の不明部分は「document.getElementById」ですよね。これを解説しているMozillaのページは、

です。ここの解説を理解できるようになれば、私のこの解説からは卒業ですね！w　ただ、流石にどんな天才でも、いきなりこれをスラスラ読める人は居ないのではないかと思います。ちなみに、Mozillaの解説が完全初心者に理解し辛いのは、説明が下手……だからではなく、その対象読者が、ある程度のプログラミングが出来る方に向けて、要点だけを抑えた内容になっているからです。言い換えると、Mozillaの解説が理解できるようになるまでが、「入門者」に該当するということですかね？

Document の getElementById() メソッドは、……

という書き出しで始まっています。「Document」部分はリンクですね。そして、細かい話ですが「D」が大文字になっていたりして少々ヘンです。そもそも、プログラム３行目の記述は、今まで学んだ知識で考えても明らかに不自然な部分があります。「.」が使われているので、「document」は変数であると想定できますが、その変数を宣言している箇所が見当たりません。変数は宣言しない限り使えない、というルールは絶対です。

　当然、変数「document」は宣言されています。ただ、この変数はブラウザが起動したとき、自動的に宣言されている特殊な変数なのです。「ブラウザ」が自動で行なってくれている機能であり、「JavaScript」の機能ではありません。JavaScript自体は、ブラウザ以外でもサーバサイドで動かしたりできますが、そういった場合、当然ながら変数「document」は使用できません。

JavaScriptの言語仕様とWeb API

　JavaScript言語を学ぶ目的は様々だと思います。JavaScriptは幅広く使われていますからね。そして、その使われ方によって、当然ながら学ぶべき内容も異なるわけですが、それは大きく分けて、JavaScrpit言語自体の話と、それ以外の部分に分けられます。前回の「const/let/var」の話などは「JavaScript言語自体の話」です。そして今回の「Document.getElementById」の話は、「それ以外の話」に該当します。つまり、JavaScriptをブラウザ上以外で使用するための知識としては無駄なものになります。

　ブラウザ上でのJavaScriptにおいて、今回のようなもののことを「Web API」と呼びます。もし、この講座をサーバサイド用など、ブラウザ以外の目的でご覧になっている方がいらっしゃいましたら、Web APIの話はやめて欲しいと思われるかもしれません。

　が、JavaScript言語自体の解説をするにあたって、ブラウザ上のJavaScriptは話の都合上、とても解説しやすいのです。ですので、今後もブラウザ前提で話をしていきたいのですが、ただ、その内容が言語自体の話なのか、Web APIの話なのかは事前に説明したうえで解説していく、というスタイルで進めていきたいと思います。そして、Web APIに関しては、知識としての簡単な解説、言語自体の話はじっくりと、という感じですね。

Web API部分のコメント

……Element オブジェクトを返します。

で終わっています。Elementが何なのかという話は、Web APIの話なので割愛しますが、日本語に訳すと「要素」とすることが多いようです。「要素」のほうが何となく雰囲気が掴める気がするので、今後は「要素」で統一します。

　「オブジェクト」という名詞と、「返します」という動詞は、言語自体の話ですので、今後のパートで詳しく解説したいと思います。

　４行目の内容「ca.getContext( '2d' )」もWeb APIの話です。「ca」は自らが宣言した変数ですけどね。getContextはその名の通り、
「コンテキストを取得する」
というWeb APIです。「ca.」に続いて書かれているので、
「変数caのコンテキストを取得する」
ですね。そして変数caの中身は、「要素」でしたよね。ただ、「要素」だけだと不明すぎるので、ここでは「ブラウザの要素」と訳したいと思います。「コンテキスト」も言語自体の話ではないので、とりあえずは「コンテキスト」のままで進めたいのですが、それだけだと流石に訳が分からないですし、Mozillaの解説には「drawing context」とありますので、「描画コンテキスト」にしておきたいと思います。

window.onload = function( ev )                      //  文ではない何か
{                                                   //  不明な行
    const   ca = document.getElementById( 'main' ); //  変数caを宣言し、ブラウザ要素を代入
    const   g = ca.getContext( '2d' );              //  変数gを宣言し、変数caの描画コンテキストを代入
    g.font = "40px monospace";                      //  変数gの書体を40ドットへ
    g.fillStyle = "#ff0000";                        //  変数gの描画色を赤へ
    g.fillText( "こんにちは世界", 40, 80 );         //  変数gへ文字列を描画
}                                                   //  不明な行