配列の初期化について(JavaScript)

TOP
コラム
配列の初期化について(JavaScr

JavaScript(js)とは

まず初めに、名前が似ていますが、JavaとJavaScriptは全くの別物です。
Javaの利用分野はさまざまな大規模システムです。例えば、SNSなどのWeb関連サービスやAndroidのスマホ向けアプリなどがあります。
一方JavaScriptの利用分野は、Webブラウザ上で動くシステムやサービスなど、Webサイトのページ制作です。また、ページの再読み込みなしで新しいコンテンツを読み込んでくれたり、Twitterなどでは再読み込みなしでサーバーに投稿することができます。簡単に書くと、WEBページの動作、WEBアプリ開発、スマホアプリ開発、ゲーム開発などが基本となります。
ちなみに「js」というのは「JavaScript」のことです。

配列とは

配列とは、ある変数にいくつかの値を格納するためのJavaScriptオブジェクトのことです。
配列を使うことによって、複数のデータを一つの変数に格納することができます。例えば…
var animals = ["dog", "cat", "elephant"];　のようになります。
また、配列はArrayオブジェクトを利用しているので、Arrayオブジェクトに標準で実装されているメソッドを使うことができます。

初期化とは

配列を初期化するには、①Arrayクラスのインスタンスとして初期化する方法と、②「 [ ] 」を使って初期化する方法があります。

①Arrayクラスのインスタンスとして初期化する方

　var array1 = new Array();

②「 [ ] 」を使って初期化する方法

　var array2 = [];

Arrayと[ ]について

文字列で配列の宣言と初期化を行った場合は同じ結果が返ります。

　var array1 = new Array('I like dog.');
　　console.log(array1);

　実行結果　…　["I like dog."]

　　　--------------------

　var array2 = ['I like dog.'];
　　console.log(array2);

　実行結果　…　["I like dog."]

①Arrayクラスのインスタンスとして初期化する方法と②「 [ ] 」を使って初期化する方法では、数字で配列の宣言と初期化を行った場合に違いが現れます。

　var array1 = new Array(5);
　　console.log(array1);

　実行結果　…　[]　　　　　　(⇦ 何も表示されない)

　　　--------------------

　var array2 = [5];
　　console.log(array2);

　実行結果　…　[5]

array1の方では長さが5の配列を宣言していることになります。例えるならば、5つの空の箱を用意した段階であり、中には何も入っていないので実行結果は何も表示されないということです。

array2の方は、「[ ]」で初期化と生成した配列は代入することになります。つまり、5が入った箱を新しく用意したというイメージです。なので実行結果では5が表示されます。
文字列の場合では①と②の方法のどちらで初期化しても大丈夫ですが、数字の場合には②「 [ ] 」を使ってを使って初期化する方が良いでしょう。

具体的な配列

ではより具体的に説明していきます。ここまで使ってきた配列
var animals = ["dog", "cat", "elephant"];
から「dog」だけを出力したい場合、どのようにすれば良いでしょうか。正解は…

　var animals = ["dog", "cat", "elephant"];
　　console.log(animals[0]);

です。これの実行結果は「dog」になります。
なぜ「[0]」なのかというと、配列は「0」から数えるからです。よって「elephan」を出力したい場合は「animals[2]」となります。
間違えて「animals[3]」と入力してしまうと、「3番の箱なんてないですよ」ということで、エラーになってしまいますので注意してください！

上記の内容を踏まえた上で、初期化した配列に値を入れる方法を紹介します。

　var animals = new Array(3);
　　animals[0] = "dog";
　　animals[1] = "cat";
　　animals[2] = "elephant";

先ほど説明したように「0」から始まって今ます。さて、ここまでは理解できたでしょうか。

追加する方法(push)

最後におまけで配列に追加する方法を紹介しておきます。 配列.push(値);です。

　var animals = ["dog","cat","elephant"];
　　animals.push("monkey");　　　　(⇦ animalsの配列の一番後ろに「monkey」を入れる)

　実行結果　…　 [ dog , cat , elephant , monkey ]

最後に…

ちなみに①Arrayクラスのインスタンスとして初期化する方法を使う場合、 var array1 = new Array(-1);とするとエラーになりますので気をつけてください！ JavaScriptで配列を使う時は、変数を定義する際には初期化が必要ですのでしっかりと身につけて、使いこなしていきましょう！最後に紹介した「push」という配列の後ろに追加するためのメソッド以外にも、配列の先頭に追加するメソッドもあるので気になる方は調べてみてください。