【初心者向け】JavaScriptの配列の基礎的な使い方！プログラミングに配列は必須！

パソコンやスマートフォン、スマート家電など、私たちが生活の中で日々手にするものの多くで使われているプログラミング言語「JavaScript」。エンジニアにとっては、プログラミング技術を知る上では避けて通れないほどの存在感を持つ言語です。

そのJavaScriptの基本の一つである「配列」についてここでは解説します。

【関連記事】「未経験だけどIT業界に転職する方法! 職種や仕事内容もご紹介」

【求人特集】「システムエンジニアの転職」

1.JavaScriptの配列とは

配列(Array)とは、プログラミングにおいて複数の値を1つのデータのように取り扱うデータ構造のことです。

一般的にプログラミングでは、文字列や数値を変数に代入して処理しますが、そのデータが10個や20個、さらには100個以上もある場合、一つひとつ変数に代入するのが大変であるため、この配列がよく用いられます。

プログラミング言語であるJavaScriptでも、配列を利用することができるようArrayオブジェクトが用意されています。このArrayオブジェクトを活用することで、配列の作成や追加・削除などが簡単に行えるようになります。

2.配列の基本的な使い方

まずは、実際にJavaScriptで配列を利用するための基本的な手順について解説します。

JavaScriptの配列の宣言には、2種類の方法があります。

1つ目は、配列コンストラクタ「Array」を使う方法で、newでArrayの引数に格納したい値を設定します。

2つ目は、配列リテラルを使う方法で、配列に格納したい値を[]内に設定します。具体例として、それぞれコードの記述は次のようになります。

//配列コンストラクタ例
var array1 = new Array(‘東京’, ’大阪’, ’愛知’);


//配列リテラル例
var array2 = [‘東京’, ‘大阪’, ‘愛知’];

なお、数値を格納する場合は注意が必要です。例えば、配列コンストラクタで「new Array(3)」のように宣言すると、「3つの空の要素をもつ配列を宣言する」という命令になり、”3”という値は格納されません。配列リテラルではそのまま入力した数値が配列の要素として格納されるため、目的にあわせてうまく使い分けましょう。

配列を初期化するには、配列コンストラクタでも配列リテラルでも空の配列であることを宣言します。具体例として、次のようなコードになります。

//配列コンストラクタ例
var array1 = new Array();


//配列リテラル例
var array2 = [];

配列内の要素を取得する場合は、配列のインデックス番号を指定します。具体例として、次のようなコードになります。

var KantoArea = [‘東京’, ‘神奈川’, ‘千葉’, ‘埼玉’, ‘栃木’, ‘茨城’, ‘群馬’];


console.log(KantoArea［1]);　//実行結果は『神奈川』

注意点として、インデックス番号は0から始まります。したがってインデックス1を指定している上記の例では、2番目の要素である「神奈川」が実行結果として表示されます。

JavaScriptでは、配列内の要素を検索するためにindexOfメソッドが用意されています。

indexOfメソッドは、引数に指定した値が配列データに存在する場合、そのインデックスを返します。具体例として、次のコードを見てみましょう。

var city = [‘新宿’, ‘渋谷’, ‘池袋’];
var n = items.indexOf(‘渋谷’);


console.log(n);　//実行結果は『1』

この例では、配列cityに対してindexOfメソッドで文字列「渋谷」が存在するかを確認しています。配列city内で「渋谷」は2番目にあるため、インデックス番号の「1」がnに代入されたことになります。

3.pushメソッドを使って要素の追加

JavaScriptで配列に要素を追加したい場合は、pushメソッドを使用します。

pushメソッドは、引数に指定した値を配列の最後に追加します。具体例として次のコードを見てみましょう。

var curry = [‘じゃがいも’, ‘たまねぎ’, ‘にんじん’];
curry.push(‘豚肉’);

この例では、配列curry宣言時にあらかじめ「じゃがいも」「たまねぎ」「にんじん」の3つの要素が含まれていますが、その最後列に「豚肉」という要素を追加しています。

4.delete演算子を使って要素の削除

JavaScriptで配列の要素を削除したい場合は、delete演算子を使用します。

delete演算子は、指定したインデックス番号の要素を削除します。具体例として、次のコードを見てみましょう。

var fruits = [‘りんご’, ‘ぶどう’, ‘すいか’, ‘いちご’];
delete fruits［2];


console.log(fruits); //実行結果は『りんご,ぶどう,,いちご』

この例では、配列fruitsからdelete演算子によってインデックス番号2の値である「すいか」を削除しました。要素を削除すると空の要素になりインデックス番号は変化しない点に留意しましょう。

5.joinメソッドを使って配列の結合

JavaScriptで配列の要素を結合させたい場合、joinメソッドを使用します。

joinメソッドは、配列の各要素を結合させ、ひとつのString型の要素として出力します。具体例として、次のコードを見てみましょう。

var christmasValue = [2019, 12, 25];
var christmasDate = christmasValue.join(‘/’);


console.log(christmasDate);　//実行結果は『2019/12/25』

このように、joinメソッドは配列内の各要素を引数に指定した文字列で連結させることができます。なお引数に何も指定しなかった場合は、カンマ区切りの文字列となります。

6.sliceメソッドを使って配列の分割

JavaScriptで配列の要素を分割させたい場合、sliceメソッドを使用します。

sliceメソッドは、指定したインデックス番号を境目に、新たな配列要素として出力します。第1引数に境目の開始位置、第2引数に終了位置となるインデックス番号を指定します。なお、第2引数を指定しなかった場合は最後の配列要素まで分割されます。

具体例として、次のコードを見てみましょう。

var fruitsList = [‘りんご’, ‘ぶどう’, ‘すいか’, ‘いちご’];


var newFruitsList1 = fruitsList.slice(1);
console.log(newFruitsList1);　//実行結果は『ぶどう,すいか,いちご』


var newFruitsList2 = fruitsList.slice(1, 2);
console.log(newFruitsList2);　//実行結果は『ぶどう,すいか』

この例では、newFruitsList1では第1引数のみ指定しているためインデックス番号1以降の要素が、newFruitsList2では第1引数と第2引数を指定しているためインデックス番号1〜2の要素が、新たな配列データとして分割されています。

7.配列のループ処理

配列内のデータをループ処理するには、for文を利用するのが一般的です。for文は、指定した回数だけ処理を繰り返すための構文で、『for(初期値; 条件式; 増減値)』と記述します。具体例として、次のコードを見てみましょう。

var array = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’];


for(var i = 0; i < 5; i++) {
　console.log(array[i]);
}

このコードでは、iが0以上5未満の場合にiを1ずつ増加して繰り返し処理をするため、実行結果としては配列lists内のデータが順に出力されます。

8.もっと配列を便利に扱う方法

応用編として、JavaScriptで配列データを扱うために覚えておくと便利な方法について解説します。

JavaScriptにおいて、作成済みの配列をコピーして別の配列として使用したい場合はconcatメソッドを使うと便利です。

concatメソッドは指定した配列を対象の配列に連結するためのものですが、対象の配列が空だった場合指定した配列と同一の内容になります。具体例として、次のコードを見てみましょう。

var array = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’];
var newArray = array.concat();


console.log(array);　//実行結果は『a,b,c,d,e』
console.log(newArray);　//実行結果は『a,b,c,d,e』

このように、引数を空にすることで元の配列データをそのまま新しい配列へコピーできます。

JavaScriptの配列内における特定の要素を抽出したい場合、filterメソッドを使います。

filterメソッドは、コールバック関数に取得したいデータの内容を指定し、任意のデータを抽出するためのメソッドです。具体例として、次のコードを見てみましょう。

var array = [2, 7, 3, 9, 8, 1, 5];
var result = array.filter(function(value) {
　return value < 5;　//5より小さい数値を抽出
}


console.log(result);　//実行結果は『2 3,1』

このコードでは5未満という条件を指定しているように、コールバック関数内に指定した条件だけをデータとして抽出できます。

なお、該当するデータが見つからない場合は空の配列が返ることになります。

JavaScriptの配列にて、要素数をカウントするにはlengthプロパティを使用します。具体例として次の例を見てみましょう。

var array = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’];


console.log(array.length);　//実行結果は『5』

上記の例では要素が少ないためわかりやすいですが、動的に要素数が増えていく場合などはlengthプロパティを使用すると様々な処理に応用できて便利です。

9.配列を比較

JavaScriptでは、配列の比較に「==」や「===」のような比較演算子では正常な比較ができません。なぜなら、配列を格納した変数は、中身ではなく配列内を参照するためのメモリ上のアドレスが代入されているからです。

そこで、配列を比較したい場合にはJSON文字列に変換して比較すると便利です。

具体例として次のコードを見てみましょう。

var array1 = [1, 2, 3, 4, 5];
var array2 = [1, 2, 3, 4, 5];
var array3 = null;


JSON.stringfy(array1) JSON.stringfy(array2);　//実行結果は『true』
JSON.stringfy(array1) JSON.stringfy(array3);　//実行結果は『false』

JSON文字列に変換すれば型の種類まで正確になるうえ、nullやundefinedなどの場合でもエラーにならずに変換されます。

10.配列をソート

JavaScriptで配列の要素をソートしたい場合、sortメソッドを使用します。

sortメソッドは、対象となる配列の要素を昇順に並び替えてくれます。ただし、sortメソッドは文字列としてソートするため、数値の場合は比較関数(compareFunction)を指定する必要があります。具体例として、次のコードを見てみましょう。

var strArray = [‘b’, ‘a’, ‘e’, ‘c’, ‘d’];
str.sort();
var numArray = [5, 10, 2, 9, 8];


function compareFunc(a, b) {
　return a - b;
}
numArray.sort(compareFunc);


console.log(strArray);　//実行結果は『a,b,c,d,e』
console.log(numArray);　//実行結果は『2,5,8,9,10』

なお、数値のソートの応用として、compareFunc内の戻り値をb - aにすると降順で並び替えることもできます。

11.JavaScriptの連想配列とは

プログラミングにおいて配列の種類のひとつに連想配列があります。ここでは、JavaScriptにおける連想配列について解説します。

連想配列とは、「キー」と「値」のペアによって構成される配列のことです。

通常の配列では値が連続した構造になっていますが、連想配列では要素が「キー名称:値」という構造になります。値にデータの型の縛りがないため、ひとつの連想配列の中に文字列や数値の値を格納することもできます。

連想配列の要素は「キー名称:値」のような構造になっており、キー名称を指定することでその値を出力することができます。具体例として、次のコードを見てみましょう。

var user = {name:’太郎’, age:20, country:’日本’};


console.log(user.name);　//実行結果は『太郎』

このように、キー名称に紐付いた値を出力することができるので、様々な型のデータを一括して管理したい場合などに連想配列は便利です。

12.まとめ

この記事では、JavaScriptにおける配列の使い方について解説しました。

配列はデータをまとめて管理することができるため、処理が複雑になればなるほど必須ともいえます。また、変数1つ1つに値を代入していくよりも、配列に格納したほうが処理が軽いといったメリットもあります。

ぜひ、この記事を参考に配列を使いこなしてください。