配列とは

みなさまどうもこんにちは。

続きまして『配列』について解説していきます。これまで変数を勉強してきましたね。

今回勉強する配列というのは『連番が付けられた変数の集合体』です。ちょっと言葉にするとイメージしづらいのですが変数と同じようにかなり利便性の高い概念となります。配列の利便性は先の記事で解説していくのでまずは記述方法から軽くみていきましょう。

あ、前回の変数の時と同じように外部JavaScriptファイルに記述していく事とします。準備はよろしいでしょうか。

まず配列の作成方法からいきますね。作成方法は以下のように『var』を記述して配列名を記述し、それに『[]』を代入すればそれは配列として扱われます。途中までは変数と一緒ですね。

var x = [];

//以下のように文を分けちゃってもOKです。
// var x;
// x = [];

console.log(x);

さてこのソースでコンソールに出力されたものを確認するとこのような表記がでます。

なんだか『[]』がちょこんと表示されていますね。これでOKです。この『x』は配列として扱われています。先程もちょっと出てきましたが、変数名のように配列の名前は『配列名』と呼ばれたりします。まあそのままなんですが覚えておきましょう。配列名のネーミングルールも変数と同じです。
※変数のネーミングルールについてはこちらへ

配列は連番が付けられた変数の集合体、というわけでこの『x』は連番付きで色々なデータを代入することができるようになりました。

では配列『x』の0番目に『0』という数値を代入してみましょう。ついでに1番目にも『1』をいれてみます。 このような記述になりますね。

var x = [];
x[0] = 0;
x[1] = 1;

console.log(x);

上記のように『配列名』の後に『[]』を置き、そこに数値を入れます。これだけでOKです。

さてここで注意点がひとつ。プログラミングにおいて連番は『0』から数え始めます。『1』からではないのです。慣れないと気持ち悪いかもしれませんが頑張って慣れましょう。これはほぼ全てのプログラミング言語共通の事柄だったりします。慣れてくると『0』から数え始めないと逆に気持ち悪くなってきます。

さてさて、ではコンソールを確認してみるとこうなっています。

これでOKです。ちゃんと配列として代入されています。

配列に振られた連番の事を『インデックス』といいます。例えば配列『x[0]』の場合のインデックスは『0』です。『インデックス番号』とも呼ばれたりしますね。そして配列グループの中にあるひとつひとつの値を『要素』といいます。これも覚えておきましょう。

変数の時と同じように『[]』の中に値を入れることで配列宣言と同時に初期値を代入することができます。値と値は『,』で区切ります。

var x = [0, 1, 2]; // これは3つの配列を生成しそれぞれ値が入っています。

配列の値を呼び出すときは以下のように『[]』の中に呼び出したいインデックスを記述すればOKです。

var x = [0, 1, 2];

console.log(x[2]); // これは2が出力されます。

ではちょっと変則系でいきなり配列要素の2番目に値をいれてみましょう。

var x = [];
x[2] = 2;

これはエラーになりそうですがJavaScriptではエラーになりません。0番目と1番目の要素は値が『undefined』となっている未定義の空の要素として同時に生成されます。上記の場合の配列の数は全部で3つとなりますね。

もういっちょ変則系で以下のようにそれぞれの値を空白にすると未定義の要素を生成できます。

var x = [,,];

ここでちょっと注意点ですが、上記の配列数は全部で2つです。3つな気がしますが3つではありません。この理由はJavaScriptでの配列の記述ルールでは、末尾に『,』を記述してもよいことになっていることからだったりします。

// これらはどちらでも同じです。
var x = [0, 1, 2];
var x = [0, 1, 2,]; // JavaScriptでは配列の生成の際に末尾に『,』を置いてもOKです。

console.log(x); // [0, 1, 2]と出力されます。

まあこの書き方は分かりづらく意図して書くこともないのであまり目にすることもないかと思いますが一応覚えておきましょう。

JavaScriptでの配列宣言は別のパターンがあり、以下のような『new Array()』を使った記述でもOKです。

var array = new Array(); // これで配列を生成できます。

『array』は英語での配列という意味です。読み方は『アレイ』となります。『あらい』ではありませんので間違えないようにしましょう。『array』は分かりやすいのでよく配列名として使用されることが多いです。

『new Array()』を使用した場合でも『()』の中に数値をいれるとそのまま配列を生成できるのですが、この『new Array()』と『[]』では挙動が異なります。

以下の例をみてください。

var array = [3];
console.log(array); // これは[3]と出力されます。

配列リテラルで記述した場合はarray[0]に『3』が初期値として生成されるという挙動をします。配列の数は全部で1つになります。

ですが『new Array()』の括弧の中に数値(自然数)を入れた場合、値が『undefined』となっている空の要素を数値分だけ生成するという挙動をします。以下が例です。

var array = new Array(3); // これは値が『undefined』となっている要素を3つ作成します。つまり配列の数は全部で3つです。

// これらは全部『undefined』と出力されます。
console.log(array[0]);
console.log(array[1]);
console.log(array[2]);

そんでもって『new Array()』を使用した場合で配列リテラルで記述したような場合と同じように初期値を生成しつつ配列宣言させるには2つ以上の値を『,』で区切って渡すか、数値(自然数)以外の値を渡してあげればOKです。

var array = new Array("0", "1", "2", "3", "4");
console.log(array); // これは["0", "1", "2", "3", "4"] と出力されます。

var array1 = new Array(1, 2, 3, 4);
console.log(array1); // これは[1, 2, 3, 4] と出力されます。

var array2 = new Array("1");
console.log(array2); // これは["1"] と出力されます。

var array3 = new Array(-1);
console.log(array3); // これは「-1個の配列を生成する」という扱いになってしまうためエラーです。ひとつだけ数値を渡す場合の数値は自然数である必要があります。

こんな感じで『new Array()』の挙動はちょっと掴みづらかったりします。というわけで最近の『new Array()』の扱いとしては記述が長くなるし挙動がややこしかったりするしで書くメリットが全くなく、非推薦とされていることが多いです。私も余程のことがない限りは配列リテラルで実装していますので良ければ参考にしてやって下さい。

というわけで基本的な配列の作り方はこのような感じですね。記述方法は大丈夫そうでしょうか。

次の記事では配列の便利な機能や利便性などを紹介したいと思います。これまで見てきた記述例ではまだ配列にするメリットが全くないので配列の利便性が全く分かりませんからね。

ではまたお会いしましょう。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

Tweet

シェア