JavaScriptの配列の使い方を2時間でマスターしよう！

JavaScriptの配列を理解しよう

JavaScriptはHTML、CSSの次に学習されることの多いプログラミング言語で、本格的なプログラミング言語学習の入り口になるケースも多いです。JavaScriptをマスターできるかどうかが今後他の言語をマスターできるかどうかにもつながってくるので、ぜひJavaScriptをマスターしてください。

ひとことにJavaScriptと言っても使い方はいろいろありますが、重要な概念の一つが配列です。そこでこのページでは、JavaScriptの配列の使い方を解説していきます。配列の使い方は他のプログラミング言語でもだいたい同じなので、JavaScriptの配列を理解すれば次のプログラミング言語学習でも役立ちます。

配列の目的

配列とは複数のデータを1つのデータのように扱うためのもので、わざわざ変数を複数用意せず効率的にデータを扱うことが配列の目的です。変数だとデータを1つしか格納できませんが、いわば複数データを格納できる仕組みが配列と言えます。

配列の使い方と実例

JavaScriptで配列を使用する際は、宣言、初期化、追加、削除、連結、分割、などの概念があります。それぞれの方法を紹介していきますが、わかりやすいようJavaScriptのソースコードの具体例とセットで紹介していきます。

配列の宣言方法

配列の宣言とはこういった配列を作成します、という宣言です。方法としては2種類あり、「Array」を使う方法と「[]」を使用する方法です。サンプルコードは以下になります。

「Array」を使った配列の宣言方法

まずArrayを使う方法は以下のようになります。

var arraySample = new Array('ラーメン',チャーハン','餃子');

以上のようになります。

arraySampleという名前の配列を作り、その中に3つのデータを格納しました。

「[]」を使った配列の宣言方法

次に、「[]」を使用した配列の宣言方法は以下のようになります。

var arraySample = ['ラーメン','チャーハン','餃子'];

以上のように、newでArrayを生成しなくても配列を宣言して中にデータを格納することが可能です。

次に、配列の個数だけを指定して中身は空のまま宣言することも可能です。具体的には以下のようになります。

var arraySample = new Array(5);

以上のように、new Arrayの配列コンストラクタで宣言することが可能です。上記の記述を行うと、5つ空きのある配列ができあがります。

配列を初期化する方法

次に、配列を初期化する方法を紹介します。配列を空にするコードは以下のようになります。

var arraySample = [];

これで配列は空になりました。厳密には、空になったというよりも配列の宣言の上に空の配列の宣言を上書きしたようなイメージです。もしくは、以下のようなコードでも配列を初期化することができます。

var arraySample = new Array();

これも理屈的には同じで、すでにある配列名で空の配列を宣言すれば、当然配列は空になります。

配列の要素を取得する方法

次に、配列の要素を取得する方法を紹介します。具体的には以下のようなコードになります。

var arraySample = ['チャーハン','ラーメン','餃子'];
console.log(arraySample[0]);
console.log(arraySample[1]);
console.log(arraySample[2]);

これでプログラムを実行すると、以下のように表示されます。

チャーハン
ラーメン
餃子

まず3つの要素が入った配列を宣言し、0番目、1番目、2番目の要素をそれぞれ表示するコードを記述しました。これは配列に限った話ではありませんが、基本的にプログラミングで要素数を数える際は0から数える仕様になっています。

あと念のために書いておくと、console.log()はJavaScriptで出力するためのコードです。

配列の要素を検索する方法

次に、配列の要素を検索するコードは以下のようになります。

var arraySample = ['チャーハン','ラーメン','餃子'];
var arrayResult = arraySample.indexOf('ラーメン');
console.log(arrayResult);

これでプログラムを実行すると、「1」と表示されます。まず3つの要素がある配列arraySampleを宣言します。次にarrayResultという変数を宣言し、そこにarraySampleのなかの「ラーメン」という要素が入った配列は何番目か、という結果を入れます。

最後にarrayResultを出力すると、ラーメンが入っている要素数1番目の1が出力されます。ちなみに、上記の通り0番目から数えての1番目です。

配列の要素を追加する方法

配列要素の追加方法は以下のようになります。

var arraySample = ['チャーハン','ラーメン','餃子'];
arraySample.push('唐揚げ');
arraySample[4] = 'ビール';
console.log(arraySample);

上記のプログラムを実行すると、「チャーハン,ラーメン,餃子,唐揚げ,ビール」と表示されます。まず、pushメソッドで唐揚げという要素を追加しました。その次に、要素数の4番目にビールを追加しました。

配列に要素を追加する際はpushメソッドを使っても、要素番号を指定して追加してもどちらでも構いません。ただしpushメソッドを使えば要素番号を数える必要がないので、その方が簡単かと思います。

配列の要素を削除する方法

次に要素削除の方法は以下になります。

var arraySample = ['チャーハン','ラーメン','餃子'];
delete arraySample[1];
console.log(arraySample);

これでコードを実行すると、[‘チャーハン’,’餃子’]と表示されます。delete演算子で1番目の要素であるラーメンを削除したので、ラーメンがなくなりました。繰り返しになりますが、0番目から数えての1番目になります。

配列を結合する方法

次に、配列を結合する方法を紹介します。

var arraySample = ['チャーハン','ラーメン','餃子'];
var arrayResult = arraySample.join('＋');
console.log(arrayResult);

上記のコードを実行すると、「チャーハン＋ラーメン＋餃子」と表示されます。joinの引数に「＋」を指定したため、各要素が「＋」で連結して表示されました。

配列を分割する方法

次に、配列を分割するコードは以下のようになります。

var arraySample = ['チャーハン','ラーメン','餃子'];
var arrayResult = arraySample.slice(1);
console.log(arrayResult);

上記のコードを実行すると、「”ラーメン”,”餃子”」と表示されます。sliceで配列を分割したため、引数の1番目であるラーメン以降のデータが分割されました。以下のように、先頭と末尾の両方を指定することも可能です。

var arrayResult = arraySample(0,1);

このように記述すると、「”チャーハン”,”ラーメン”」が取得されます。0番目から1番目の要素が取得されました。

まとめ

配列は以上のような形で自由にいろいろな機能が使えますが、これは当然ながら実装されたメソッドを引用している状態です。なので、メソッドをコピーしてきて書き換えることで、自分独自のメソッドを実装するようなことも可能です。

また今回紹介したもの以外にも、「concat」「filter」などのメソッドや、「length」でプロパティ表示することが可能です。いっぺんにすべてを把握する必要はないので、配列の基本的な使い方を理解し、詳細は必要になったタイミングで調べて実装してください。