#10 関数の書式#10 関数の書式戻る

window.onload

　前回、JavaScript言語自体の話と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へ文字列を描画
}                                                   //  不明な行

　「不明」の残りは１、２、８行目ですね。１行目は「=」が使われているので、代入をしています。そして、=左側の変数部分に着目すると、「window.～」という記述から、変数windowが存在し、その宣言部分がプロクラム上に存在しないことから、前回の「document」同様、Web APIの機能であることが予想できます。

　実際、window.onloadはWeb APIの機能で、Mozillaの公式マニュアルも当然存在します。

　window.onload

　概要には「window の load イベントに対応するイベントハンドラです。」と書かれています。「window」はリンクで、その解説を読んでみると、前回同様、documentがどーのこーのと書かれているので、やはりWeb APIであったことが分かります。

　「load イベント」とは何なのかというと、まず、「イベント」はJavaScript言語自体の用語です。前回、言語自体の話は後でそれぞれ詳しく解説すると言いましたので、そうしたいと思います。ただ、「window.load」はWeb APIの話ですので、ここで簡潔に説明しておきます。「ブラウザが起動したとき」という意味になります。「ブラウザウィンドウが起動（ロード）されたとき」ということです。

関数

　代入文の左側は分かりました。では右側の「function( ev )」は何なのでしょうか？ window.loadに何を代入すべきかどうかは、Mozillaマニュアルの「構文」の項目に書かれています。 

load イベント発生時に呼び出す関数への参照または関数式

　「関数への参照」又は「関数式」を代入すべきと言っていますね。「参照」や「式」の話は置いておいて、とりあえず「関数」を代入すべきのようです。

　「関数」は言語自体の機能です。そしてその中でも非常に重要な機能で、その内容規模も大きいです。今後、関数を話題にしたパートが何度も登場してきます。とてもじゃないですが、１回で覚えられるような機能ではないですね。

　なので関数に関しては、じっくり構えて攻略する必要があります。逆に言うと焦る必要はないです。というわけで今回は、関数の表面的な部分に関してのみ、解説したいと思います。「関数を理解した！」という状態になるまでには、長い道のりが待っていることを覚悟しておいて下さい。

関数の書式

　「関数」は英語で言うと「ファンクション(function)」ですね。なので１行目の代入内容は「function( ev )」そのものズバリですw　こういう点に関しては、英語ネイティブの方のほうがプログラミング習得にかかる労力が少ないんだろうなぁと想像できますが、まあ仕方ありません。で、関数のことを「関数」と呼ばずに「ファンクション」と言っても別に構いません。「メソッド」と呼んだりもします。ファンクションとメソッドは、厳密には違うと言えなくもないのですが、まあ好みの問題ですね。この講座では「関数」を使用していきます。

　「( ev )」の部分は「関数の引数」と言います。そしてその中の「ev」の部分は変数です。変数名は、このプログラム上の「ca」や「g」と同様、私が勝手に決めた名前です。なので「ev」でなくても構いません。試しに他の名称に変えてみて下さい。問題なく動くと思います。ただ、既存の変数名と被ってはダメですけどね。

　最後に、２行目と８行目についてですが、これらの記号は関数の始まりと終わりを意味します。ただの括りですね。

まとめ

　パート３で「手始めに」記述していただいたプログラムの解説が、やっと終わりました！　とは言っても表面上だけですけどね。最終的なコメントは以下の通りです。 

window.onload = function( ev )                      //  ブラウザloadイベントに関数を設定
{                                                   //  関数の始まり
    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へ文字列を描画
}                                                   //  関数の終わり

　コメントは外国語翻訳で言うところの直訳、っぽく記述しましたが、意訳風にするのであれば、こんな感じでしょうか？ 

//  ブラウザを起動したときに、40ドットの赤色で、指定の文字列が描画されるよう、関数を定義
window.onload = function( ev )
{
    //  ブラウザの要素を取得して、変数に代入しておく
    const   ca = document.getElementById( 'main' );

    //  取得したブラウザ要素の描画コンテキストを取得して、ブラウザに対して描画処理を行えるようにしておく
    const   g = ca.getContext( '2d' );

    //  取得した描画コンテキストに対して、使用すべき書体を「40ドットの等幅フォント」へと指示する
    g.font = "40px monospace";

    //  取得した描画コンテキストに対して、使用すべき色を「赤」へと指示する
    g.fillStyle = "#ff0000";

    //  取得した描画コンテキストに対して、「(X,Y)=(40,80)の座標へ『こんにちは世界』というテキストを描画するよう指示する
    g.fillText( "こんにちは世界", 40, 80 );
}

　意訳の場合、どういった書き方が好ましいかどうかというのは主観の話になってしまいますが、例えば仕事でプログラムを組む場合などは、意訳が求められたりしますね。そもそも、直訳に関しては、ある程度のプログラマであればそのコードを見れば直ぐにわかるわけですから。それよりも他者が知りたいのは、そのプログラマがどういう意図でそのコードを記述したのか？　ということですからね。

　ただ、プログラムの学習という観点では、まずは直訳から始める必要があると思いますので、この講座では、今後も直訳のコメントを記述していきたいと思います。

　とりあえず今回のパートで、第１章というか導入の章は完了、といった感じです。ここまで挫折せず付いてきていただいた皆様、どうもありがとうございました！　次回のパートからは、JavaScript言語仕様に該当する個々の機能を個別に解説していきたいと思います。

　ソースファイル

　前: #9 Web API 　 目次 　次: #11 関数の引数
最終更新日時:2022/02/24
戻る戻る back