第8回 配列の取り扱い方：TypeScriptで学ぶJavaScript入門（3/4 ページ）
配列の落とし穴
すでに述べたように、たとえ要素数を指定して配列を宣言しても、配列には後から要素を追加できる。また、配列のインデックスは0番から順に並んでいるとは限らない（途中が抜けている場合もある）。さらには、lengthプロパティで取得できる値は配列の要素数を表しているわけではないことにも注意が必要だ。
以下の例で見てみよう。
var a: Array<number> = new Array( 3 );
a[0] = 0;
a[1] = 10;
a[10] = 100; // 10番というインデックスは範囲外のはずなのに……
a[20] = 200; // 要素数は3のはずなのに……
alert( "2番は" + a[2] + "、10番は" + a[10] + "、配列のサイズは" + a.length );
実行結果はどうなるだろう。a[2]という要素は存在しないので「undefined」となるのは想像に難くない。a[10]に100を代入しようとしても、10というインデックスは範囲外なのでエラーになりそうな気がする。しかし、問題なく10というインデックスは使える。さらにa[20]に200を代入しようとすると、配列の要素数を3に指定していたにもかかわらず、配列の要素が4個になってしまう。だが、これも問題なく代入できる。
また、配列のサイズはlengthプロパティで取得できるはずなので、a.lengthプロパティの値は宣言したときの要素数の「3」になるか、実際に存在する要素数の「4」になるかのどちらかだろうと思われるかもしれないが、実は「21」になる。lengthプロパティの値は「インデックスの最大値＋1」になるからだ。以下の実行例を見て、一つ一つ確認しておこう。
図7 配列のインデックスが連続でないことや、要素を追加できることを確認するためのプログラムの実行例［コラム］配列の要素数を知るには
上で述べたように、lengthプロパティの値は配列の要素数を表していません。では、配列の要素数を知りたいときにはどうすればいいのでしょう。通常は、Objectのkeysメソッドに配列名を指定し、プロパティの配列を取得してその大きさを求めます。
var a: Array<number> = new Array( 3 );
a[0] = 0;
a[1] = 10;
a[10] = 100;
a[20] = 200;
alert( "配列のサイズは" + Object.keys( a ).length );
この例であれば、結果は「配列のサイズは4」と表示されます。なお、lengthプロパティは読み取り専用ではなく、値の代入もできます。上の例で「a.length = 5;」のようなコードを書くと、配列の要素が5個に減らされてしまう（a[10]やa[20]は削除されてしまう）ことに注意してください。
配列と繰り返し処理
冒頭にも述べたように、配列と繰り返し処理は相性がいい。配列の要素を全て処理する場合にfor文が使えるからだ。これについては、簡単な例を示しておくだけで理解できるだろう。以下のプログラムは0〜9の数値をランダムに並べ替える例だ。すごろくや15パズルなどのゲームを作るときには、マスやパネルの状態を記憶しておく必要があるが、そういう場合によく使う。
var board: Array<number> = new Array( 10 );
var temp, r1, r2: number;
for ( var i = 0; i < 10; i++ ) { // （1）
board[i] = i; // （2）
}
for ( var count = 0; count < 100; count++ ) { // （3）
r1 = Math.floor( Math.random() * 10 ) // （4）
r2 = Math.floor( Math.random() * 10 )
temp = board[r1]; // （5）
board[r1] = board[r2];
board[r2] = temp;
}
alert( board ); // （6）
（1）では、変数iの値が0から10未満である間、値を1ずつ増やしながら、処理を繰り返す。処理の内容は（2）の文のみで、board[i]に変数iの値を代入している。従って、board[0]〜board[9]には0〜9が代入される。
（3）の繰り返し処理では、変数countの値を0〜99まで変える。変数countはインデックスなどに使うわけではなく、単に繰り返しの中身を100回実行するためだけに使っている。繰り返しの中身では（4）以降で0〜9の乱数を二つ作り、（5）以降でその乱数をインデックスとする要素同士の値を入れ替える。要するに、0〜9まで並んでいる数字からランダムに二つ取り出してそれらを入れ替えるという操作を100回繰り返しているということ。これで、配列内の数字がバラバラに並ぶ。
最後の（6）ではalertメソッドを使って配列の全ての要素の値を表示している。実行例は以下の通り。
図8 0〜9の数値をランダムに並べ替えるプログラムの実行例Copyright© Digital Advantage Corp. All Rights Reserved.
注目のテーマ
ITmediaはアイティメディア株式会社の登録商標です。