二次元配列とcanvas

複数の配列を一つの配列にまとめる

データの集まりを一纏めに扱うことのできる配列ですが、複数の配列も一つの配列に纏めることができます。つまり各要素が配列である配列として纏めます。
複数の配列をまとめた配列は多元配列と呼びます。
今回は多元配列のうちの二次元配列について記したいと思います。

二次元配列について

var a =[date1,date2,date3,date4];
var b =[date5,date6,date7,date8];
var c =[date9,date10,date11,date12];

このような三つの配列a、b、cをそれぞれ制御文を用意して参照したり操作したりするのは面倒です。
これを一つの配列に纏めれば制御文は一つのもので済みますし扱いも楽になります。
これらの配列を纏めた書式は

var abc = [[date1,date2,date3,date4],[date5,date6,date7,date8],[date9,date10,date11,date12]];

このようになります。
改行すれば

var abc = [
[date1,date2,date3,date4],
[date5,date6,date7,date8],
[date9,date10,date11,date12]
];

このように表みたいな形になります。
このような配列を二次元配列といいます。

二次元配列の要素にアクセスする方法

配列は各要素の順番を参照してアクセスしますが、二次元配列はまずどの順番の配列を参照するか決めて、その配列のどの順番のデータを参照するか決定してデータにアクセスします。
書式は

配列名[配列の番号][配列の中の番号]

このようになります。番号は0から始まります。
例えば上の配列abcでは

abc[1][2]

これでdate7にアクセスします。





このJavaScriptは5×5にグリッドを並べるようにCanvasによる描写を行っています。
それぞれのグリッドは配列colorの要素に対応しており、for文で要素を参照して色を決定しています。
五つの配列を一つに纏めたことにより、制御文のfor文をネスティング（入れ子状）にした一つの文で制御できています。