本日の自習勉強では、『10日で覚えるjavascript入門教室』の本のCHAPTER3を勉強しました。ここでは、「関数」を使い、列数、行数、データを格納した配列変数を渡すと、自動的に表を作成するwriteTable関数を作ります。
関数とは、一連のコードをブロックにまとめて名前を付け、他から呼び出して実行できるようにしたものです。メソッドも関数の一種であり、オブジェクトに所属している関数をメソッドと呼びます。メソッド＝命令と考えると、関数を作るということは、「新しい命令を作る」ことになります。関数を作ることを「関数の定義」といい、下記のように「function」を使って記述します。
function 関数名(引数名、引数名、引数名){
関数内で実行する処理
return 返値;
}
上記の表は、配列変数のデータをもとに、表を自動作成しています。
ソースを見てみます。まず初めに、配列変数を作成します。これを作ることによって、表に記載したいデータは２つの配列変数に記憶しています。次に、writeTable関数では,col(列数),row(行数),data(データを収めた配列変数)の3つの引数を呼び出し元から受け取ります。作成した関数を利用するには、「関数名(引数)」と書きます。頭にオブジェクトがないだけで、利用方法はメソッドと同じです。ここでは、writeTable(2,3,prod_data)というやつです。
今まで勉強してきたコードは基本的に上から順に実行されてきましたが、関数を利用するとその流れが変わります。関数のブロック内のコードは、関数が書かれた位置とは関係なく、関数が呼び出されたときに実行されます。ソースのコメント部分に番号が書いてあるのでそれが順番になっています。
続いてwriteTable関数が実際に行う処理では、まず先頭の配列変数の作成部分からです。無名オブジェクトの配列変数の作成に似ていますが、よく見るとプロパティ名の指定がなく、内側のカッコが｛｝ではなく[]となっています。実はここでは、配列変数の中で配列変数を作成しています。このような配列変数を「多次元配列」と呼びます。この多次元配列の要素を利用したいときは、「[0][1]」といった具合に、添字を並べて書きます。
writeTable関数は、この多次元配列を受け取って、それを表のデータとして表示しています。多次元配列から個々の要素を取り出すために、for文の中にfor文を書いています。
この他に、関数内でvarキーワードを使って作成した変数は関数脱出時に消滅する「ローカル変数」やそのメリット、関数から関数を呼び出し、「価格×購入個数」を表示するwritePriceSim関数の呼び出し方法などを勉強しました。
11月1日 宮本 勇