MENU
＞ 作業効率UP!! オススメのモバイルモニターを紹介
  1. ホーム
  2. プログラム
  3. JavaScript
  4. 【JavaScript】配列（Array）の基本的な使い方を紹介！

【JavaScript】配列（Array）の基本的な使い方を紹介！

当ページのリンクには広告が含まれています。
  • URLをコピーしました！

プログラミングでデータを格納する方法として「配列（Array）」というものがあります。

複数のデータを1度に扱うとき、効率よくデータを操作することができるので、とても便利です。どんな高度なプログラムにおいても利用される頻度が高いので、把握しておきたい仕組みの１つです。

この記事では「配列（Array）」の基本的な使い方を解説します。

記事の内容

JavaScriptの配列について

配列（Array）とは、複数のデータを１つの変数で管理するためのデータ構造のことです。

プログラミングでは文字列や数値等のデータを変数に代入して処理をします。ただ、そのデータが複数ある場合はひとつの変数に代入するのが大変であるため、配列を使って複数のデータをまとめて代入します。

イメージしやすいように図で表現すると次のような図になります。

複数ある箱の中に1つずつデータを入れることができ、この箱の塊を１つの変数として扱うことになります。

この配列はプログラミングを行う上で頻繁に使用されることが多く、JavaScriptでも利用する頻度が高いです。

JavaScriptで利用することができるようにArrayオブジェクトが用意されており、配列の作成や追加・削除などを開発者が簡単に扱えるようになっています。

配列の使い方

JavaScriptで配列を扱うための基本的な使用方法について紹介します。

配列の作成

配列の作成には角括弧[]を使ったリテラル記法もしくはArrayのコンストラクタを使います。

  • 配列リテラル記法：格納したい値を[]内に設定します。
  • 配列コンストラクタ：new演算子でArrayの引数に格納したい値を設定します。
// 配列リテラル記法 （文字列）
const array1 = ['足立区', '新宿区', '渋谷区', '墨田区', '品川区'];

// 配列コンストラクタ（文字列）
const array2 = new Array('足立区', '新宿区', '渋谷区', '墨田区', '品川区');

上のコードは文字列の配列を作成する例です。文字列であることを明示するためにシングルクォーテーションで文字列を括ります。

次の例は数値の配列を作成する例です。
// 配列リテラル記法 （数値）
const array3 = [1, 2, 3, 4, 5];

// 配列コンストラクタ（数値）
const array4 = new Array(1, 2, 3, 4, 5);

配列コンストラクタの注意点として、数値の引数が１つの時は配列のサイズ（要素数）を指定したことになります。

下の例だと、5つの要素を格納できる配列が作成されます。
const array5 = new Array(5);

以上が配列を作成する方法です。

配列の初期化

配列を初期化するには、空の配列（要素が無い）を作成します。配列リテラル記法と配列コンストラクタどちらでも利用可能です。

次のようにコードを記述します。
// 配列リテラル記法
const array1 = [];

// 配列コンストラクタ
const array2 = new Array();
初期化は空の配列になります。JavaScriptでは、ある要素だけが空である配列を作成することが可能です。
const array = [1,,3];  // [1, empty, 3]

配列の要素取得

配列の要素を取得する場合は、配列のインデックス番号（index）を指定することで、その番号に対応した要素を取得することができます。

インデックス番号は０から始まるので、注意が必要です。
const array = [1, 2, 3, 4, 5];
console.log(array[0]);  // 1
console.log(array[1]);  // 2
console.log(array[2]);  // 3
console.log(array[3]);  // 4
console.log(array[4]);  // 5
存在しないインデックス番号を指定するとundefinedとなります。
const array = [1, 2, 3, 4, 5];
console.log(array[6]);  // undefined

配列へ要素代入

インデックス番号を利用すれば、配列へ値を代入することができます。

代入を行うということは、元々の配列要素は上書きされます。
const array = [1, 2, 3, 4, 5];
array[2] = 9;        // 3番目に9を代入する
console.log(array);  // [1, 2, 9, 4, 5]

要素数の変更

JavaScriptの配列は全て格納できる要素数を変更できます。配列のサイズは固定ではなく可変長ということです。

現在の配列の長さを知るにはlengthプロパティを使用します。
const array = [1, 2, 3, 4, 5];
console.log(array.length);  // 5
このlengthプロパティに値をセットすることで、配列のサイズを変更できます。
const array = [1, 2, 3, 4, 5];

array.length = 6;           // 長くする
console.log(array.length);  // [1, 2, 3, 4, 5, empty]

array.length = 4;           // 短くする
console.log(array.length);  // [1, 2, 3, 4]

配列のサイズを長くした場合、追加された部分の要素は空になります。また短くした場合、配列に入りきれない部分の要素は削除されます。

スプレッド演算子

配列の値を展開するには、スプレッド演算子（…）を利用します。

配列を使って関数呼び出しの引数を渡すなどの用途があります。
const array1 = [1, 2, 3, 4, 5];
array.array2 = [...array1, 6];  // [1, 2, 3, 4, 5, 6]

function foo(x, y ,z) { }
const array3 = [1, 2, 3];
foo(...array3);

分割代入

配列のそれぞれの値を別々の変数に代入する機能があります。

この分割代入を利用することで残りの要素を簡単に取得できます。
const [x, y, ...result] = [1, 2, 3, 4];
console.log(x, y, result);  // 1, 2, [3, 4]

連想配列

配列の種類のひとつに連想配列があります。この連想配列は「キー」と「値」の組み合わせによって構成される配列のことです。

通常配列の要素はインデックス番号０から始まる数値が自動的に割り当てされます。

一方で連想配列のインデックスは、数値ではなく文字列の「キー」を指定し、値を代入・取得を行います。

次のような表を連想配列にすることが可能です。

項目（キー） 内容
date 2021-1-10
name イヤホン
price 10000 
const item = {date:'2021-1-10', name:'イヤホン', price:10000 };
console.log(item.name);  // イヤホン

連想配列を利用すればキーを指定して、そのキーに一致する値を出力することができます。

様々なデータ型を一括で管理したい場合などに連想配列が活躍します。

配列のメソッドの使い方

要素の検索（最初にヒットする要素を検索）

配列内の要素を検索するには、indexOfメソッドを利用します。

indexOfメソッドの引数に検索したい値もしくは文字列を指定します。
const array = ['足立区', '新宿区', '渋谷区', '墨田区', '品川区'];
const index = array.indexOf('渋谷区');
console.log(index);  // 2

配列内に指定した値が存在する場合は、その値が格納されている配列のインデックス番号を返します。指定した値が複数あった場合は、最初にヒットしたインデックス番号のみを返します。

配列内に指定した値が存在しない場合は、-1を返します。
const array = ['足立区', '新宿区', '渋谷区', '墨田区', '品川区'];
const index = array.indexOf('千代田区');
console.log(index);  // -1

要素の検索（配列の最後から検索）

先ほどとは逆で配列の最後から検索を行うには、lastIndexOfメソッドを利用します。

lastIndexOfメソッドの引数に検索したい値もしくは文字列を指定することで、最初に見つかったインデックス番号を返します。
const array = ['足立区', '新宿区', '渋谷区', '墨田区', '品川区'];
console.log(array.lastIndexOf('足立区'));  // 0

検索したい要素有無の判定

配列内に検索したい要素が存在するかしないかを判定するには、includesメソッドを利用します。

includesメソッドの引数に検索したい要素を指定します。この引数に渡された値が1個以上が配列に含まれるとtrueが返します

それ以外はfalseが返します。
const array = ['足立区', '新宿区', '渋谷区', '墨田区', '品川区'];
console.log(array.includes('足立区'));    // true
console.log(array.includes('千代田区'));  // false

要素の追加（先頭へ）

配列に要素を新たに追加するには、unshiftメソッドを利用します。

unshiftメソッドの引数に追加したい値もしくは文字列を指定します。要素は複数個、指定することができます。
const array = ['足立区', '新宿区', '渋谷区'];
array.unshift('千代田区', '中央区');
console.log(array);  // ['千代田区', '中央区', '足立区', '新宿区', '渋谷区']

unshiftメソッドで追加された値は配列の先頭に追加されます。

要素の追加（末尾へ）

配列に要素を新たに追加するには、pushメソッドを利用します。

pushメソッドの引数に追加したい値もしくは文字列を指定します。このメソッドもunshift同様、要素は複数まとめて指定することができます。
const array = ['足立区', '新宿区', '渋谷区'];
array.push('墨田区', '品川区');
console.log(array);  // ['足立区', '新宿区', '渋谷区', '墨田区', '品川区']

pushメソッドで追加された値は配列の最後に追加されます。

要素の削除（先頭）

先頭の要素を削除するには、shiftメソッドを利用します。

shiftメソッドは最初の要素を配列から取り出して返します。
const array = ['足立区', '新宿区', '渋谷区', '墨田区', '品川区'];
array.shift();
console.log(array);  // ['新宿区', '渋谷区', '墨田区', '品川区']

先頭の要素（インデックス番号＝０）が削除されます。

要素の削除（末尾）

最後の要素を削除するには、popメソッドを利用します。

popメソッドは最後の要素を配列から取り出して返します。
const array = ['足立区', '新宿区', '渋谷区', '墨田区', '品川区'];
array.pop();
console.log(array);  // ['足立区', '新宿区', '渋谷区', '墨田区']

末尾の要素（上の例だとインデックス番号＝４）が削除されます。

要素の置換

要素の置換を行うには、spliceメソッドを利用します。またspliceメソッドは要素の削除が可能です。

shiftメソッドは先頭を削除し、popメソッドは末尾を削除しますが、spliceメソッドは任意の要素を取り除けます。

第1引数に削除を開始するインデックス番号、第2引数に削除を終了するインデックス番号を指定します。第2引数を指定しなかった場合は最後の配列要素までが削除の対象となります。

次の例は配列内の任意の要素を削除する例です。
const array = ['足立区', '新宿区', '渋谷区', '墨田区', '品川区'];
array.splice(1, 3);  // 1番目の要素から3個を削除（1番目と2番目と3番目を削除）
console.log(array);  // ['足立区', '品川区']
続いてspliceメソッドで取り除いた後に要素を付け加える例が以下です。
const array = ['足立区', '新宿区', '渋谷区', '墨田区', '品川区'];
array.splice(1, 2, '千代田区', '中央区');  // 1番目の要素を千代田区、2番目の要素を中央区へ置換
console.log(array);  // ['足立区', '千代田区', '中央区', '墨田区', '品川区']
またindexOfメソッドを利用して、特定の条件に一致する要素を取り除くには次のようにします。
const array = ['足立区', '新宿区', '渋谷区', '墨田区', '品川区'];
const index = array.indexOf('新宿区');  // '新宿区'を検索
array.splice(index, 1);  // '新宿区'を削除
console.log(array);  // ['足立区', '渋谷区, '墨田区', '品川区']

配列の連結

配列同士を結合するには、concatメソッドを利用します。

元の配列と引数に渡した配列を連結させて新しい配列を生成するメソッドです。
const array1 = ['足立区', '新宿区'];
const array2 = ['渋谷区', '墨田区', '品川区']
const array3 = array1.concat(array2);
console.log(array3);  // ['足立区', '新宿区', 渋谷区', '墨田区', '品川区']

配列の結合

配列内の全ての要素をある特定の区切り文字で結合したい場合は、joinメソッドを利用します。

第1引数に区切り文字を指定することで、その区切り文字で結合した文字列を返します。

引数に何も渡さない場合は、カンマ（,）で繋いだ文字列を返します。
const array1 = [1, 2, 3, 4];
joinArray1 = array1.join();     // 1,2,3,4

const array2 = [1, 2, 3, 4];
joinArray2 = array2.join('');   // 1234

const array3 = [1, 2, 3, 4];
joinArray3 = array3.join('-');  // 1-2-3-4

const array4 = [1, 2, 3, 4];
joinArray4 = array4.join('/');  // 1/2/3/4

配列のチェック

配列かどうかをチェックするには、Array.isArrayメソッドを利用します。

メソッドに渡された引数が配列ならtrueを返し、そうでなければfalseを返します。
console.log(Array.isArray([1, 2, 3]));  // true
console.log(Array.isArray(4));          // false
console.log(Array.isArray('5'));        // false

配列をソート

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

このsortメソッドは、対象となる配列」の要素を文字列として昇順に並び替えをします。並び替え後は元の配列はソートされた配列に変更されます。

まずは文字列を昇順した例です。
const array1 = ['c', 'a', 'd', 'b', 'e'];
array1.sort();
console.log(array1);  //  ['a', 'b', 'c', 'd', 'e']
次は数値を昇順に並び替えをしてみます。
const array2 = [3, 20, 5, 1, 0];
array2.sort();
console.log(array2);  //  [0, 1, 20, 3, 5]

数値が昇順に並び替えができていないことが分かります。そのため数値をソートする場合は、工夫が必要です。

compareFuncに任意の比較関数を渡すことで、ソートの挙動を変更できます。compareFuncは負の数、0、正の数のいずれかを返します。

  • compareFunc(a,b)が負の数（-1など）：aはbより先に並び替えされます。
  • compareFunc(a,b)が0：aはbと同じ値であるので並び替えされません。
  • compareFunc(a,b)が正の数（1など）：bはaより先に並び替えされます。
単純な数値のソートをしたい場合は、a-bまたはb-aを計算する関数を渡します。
const array1 = [3, 20, 5, 1, 0];
array1.sort((a, b) => a - b);
console.log(array1);  //  [0, 1, 3, 5, 20]

const array2 = [3, 20, 5, 1, 0];
array2.sort((a, b) => b - a);
console.log(array2);  //  [20, 5, 3, 1, 0]

配列の反転

配列を反転させるには、reverseメソッドを利用します。

単純に配列の順番を反転することができます。このメソッドは元の配列データを変更します。
const array = [0, 1, 2, 3, 4];
array.reverse();
console.log(array);  // [4, 3, 2, 1, 0]

元の配列データから新しい配列を作成

配列の各要素を取り出して新しい配列を作成するには、mapメソッドを利用します。

あわせて読みたい
【JavaScript】新しい配列を生成するmapメソッドを理解する map メソッドの使い方を知りたい。。。 JavaScript では配列の処理を行うメソッドとして、map()が頻繁に使用されています。 このmapメソッドは与えられた関数を配列デー...
mapメソッドは元の配列データの各要素を取り出して、Callback関数で実行された結果をまとめた配列を新しく作成して返します。
const array = [1, 2, 3, 4, 5];
const newArray = array.map(value => value * 2);
console.log(newArray);  // [2, 4, 6, 8, 10]

配列要素の抽出

配列内の特定の要素を抽出したい場合は、filterメソッドを利用します。

このfilterメソッドはコールバック関数に取得したい条件の内容を指定し、その条件を通過した要素のみを新たな配列の要素として抽出することができます。

例えば、奇数だけを配列の中から取り出すことができます。
const array1 = [0, 1, 2, 3, 4, 5, 6];
const array2 = array1.filter((value) => value % 2 == 1);
console.log(array2);  // [1, 3, 5]

配列のループ処理

配列の要素に対して順番にコールバック関数を行うには、forEachメソッドを利用します。

あわせて読みたい
【JavaScript】forEachメソッドで配列の要素を取得する方法 javaScriptの配列を繰り返して処理する方法として、forEachメソッドがあります。 今回はforEachメソッドの使い方をはじめ、メリットや使うにあたってのポイントや注意点...
このメソッドを利用した例が下のコードです。
const array = [0, 1, 2, 3, 4, 5, 6];
array.forEach((value) => console.log(value));

array.forEach((value) => {
    const num = value * 100;
    console.log(num);
});

forEachメソッドと同じようにループ処理することが構文として、for文があります。

for文のメリットとして、ループ処理を中断する break文や実行する処理をスキップする continue文が扱えることです。

for文の詳しい使い方はこの記事を参考にしてみてください。。

あわせて読みたい
【JavaScript】配列の繰り返し処理でfor文を扱う方法 JavaScript の for 文の使い方を知りたい。。。 JavaScript で条件に応じて繰り返しの処理をするために用意されているのが for 文です。 for 文は基本となる構文ですが...
for文を利用した例が下のコードです。
const array = [0, 1, 2, 3, 4, 5, 6];
for(let i = 0; i < array.length; i++){
    console.log(array[i]);
}

まとめ

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

Arrayクラスには多くのメソッドが用意されており、これらを理解して活用していけば、開発の効率化に繋がっていきます。

配列はどんなプログラムにも登場するので基本的な使い方を、ぜひマスターしておきましょう。

以上、最後まで読んでいただきありがとうございました。

プログラム JavaScript
Array JavaScript 基本 配列
よかったらシェアしてね！
  • URLをコピーしました！
記事の内容