プログラミングの基本となるのが配列という考え方です。
配列とはざっくり言うと、複数の項目を1まとめにして扱えるようにするためのもの。
JavaScriptではArrayオブジェクトで配列を扱います。
「配列を使うと何ができるの？」
「JavaScriptでの配列の扱い方を知りたい！」
そんなあなたに向けて、この記事ではJavaScriptの配列の基本を解説していきます。
この記事を参考に、是非JavaScript配列マスターを目指しましょう！
山田ねこ現役システムエンジニアの山田ねこが解説します！
そもそも配列とは？
プログラミングの世界では変数を箱に例えることが多いですよね。
同じような内容の変数を複数扱いたいとき、変数の箱を一つ一つばらばらに用意するのではなく、同じ箱の中に仕切りを作ってまとめて扱えるようにしよう！というのが基本的な配列の考え方です。
配列は、各項目の配列の中での位置を表す番号と、各項目の中身の値を持っています。
| 配列に関する用語 | 説明 |
|---|---|
| インデックス(Index) | 各項目の配列の中での位置を表す番号。 |
| 要素 | 各項目。中身の値を持つ。 |
配列を使うことで次のようなメリットがあります。
- 同じような内容の項目をひとまとめにしてわかりやすくする
- ひとまとめにした項目に対してループ処理を行うことができる
- 要素を特定の文字でつなげたり、ソートをかけたりなど便利な処理が行える
JavaScriptで配列を扱うにはArrayオブジェクトを使う
JavaScriptで配列を扱うにはArrayオブジェクトを使います。
操作や処理の対象となるもののことを、プログラミングの世界ではオブジェクトといいます。
Arrayオブジェクトには次の3つの特徴があります。
- 要素数をあとから変えることができる
- 異なるデータ型を混ぜて格納することができる
- インデックスは0始まり
要素数をあとから変えることができる
Arrayオブジェクトでは要素数をあとから変えることが出来ます。
この後で説明するpushやdeleteを使うことで、配列に要素を追加したり、削除することが可能です。
その際、配列の要素数も変わります。
異なるデータ型を混ぜて格納することができる
Arrayオブジェクトでは、同じ配列の中に異なるデータ型を混ぜて格納することができます。
同じ配列の中に、数値の要素と文字列の要素どちらも含めることができる…といった具合です。
ただし、分かりやすいコードにするため、同じ配列では１つの型のみ扱うべきでしょう。
プログラミングとしてできることと、わかりやすさは分けて考えたほうが良いんだね。
インデックスは0始まり
Arrayオブジェクトのインデックスは0始まりです。
つまり、一番はじめの要素のインデックスが0になるということです。
画像の例だと、要素の数（＝箱の数）は5つですが、インデックスが0から始まっているので、最後のインデックスも4になっています。
ここから先は、JavaScriptでの具体的な配列の操作を確認していきましょう。
読みながら実際にJavaScriptを実行して試してみたい！という人には、PlayCodeというサービスがおすすめです。
コーディングしたその場でJavaScriptの実行結果を確認することができます。
JavaScriptの配列の基本操作
配列の宣言と初期化
まずは配列の宣言をして、新しい配列を作成しましょう。
JavaScriptでの配列の新規作成方法は大きく分けて次の2つの方法があります。
- Arrayコンストラクターを使う方法
- 配列リテラルを使う方法
Arrayコンストラクターを使う方法
const array1 = new Array();
console.log(array1);new Array()で新しい配列を作成します。
new Array()のことをArrayコンストラクターといいます。
上の例では、要素数を持たない（＝要素数が０の）配列を作成しています。
実行結果
[]const array1 = new Array(2);
console.log(array1);new Array()の()の中に整数を指定することで、要素数を指定して配列を作成することもできます。
要素数を指定しただけなので、中身の値はまだありません。
実行結果
(2) []fillメソッドを使うことで、配列のすべての要素に同じ値を設定することができます。
const array1 = new Array(2);
array1.fill(0);
console.log(array1);実行結果
(2) [0, 0]同じ値を複数個持つ配列を作るのに便利だね！
new Array()の()の中にカンマ区切りで複数の値を指定すると、配列の中身の値を設定することができます。
const array1 = new Array(1, 2);
console.log(array1);実行結果
(2) [1, 2]もちろん、指定する値は数値以外の型でも大丈夫です。
const array1 = new Array("a", "b");
console.log(array1);実行結果
(2) ["a", "b"]配列リテラルを使う方法
Arrayコンストラクターの代わりに[ ]を使って配列の宣言をすることもできます。
[ ]のことを配列リテラルといいます。
const array2 = [];
console.log(array2);この例では、要素を持たない空の配列を作成します。
実行結果
[]配列の要素数を指定したい場合は、空の配列を作成した後にlengthメソッドで要素数を指定します。
const array2 = [];
array2.length = 2;
console.log(array2);実行結果
(2) []もちろんfillメソッドも使用可能です。
const array2 = [];
array2.length = 2;
array2.fill(0)
console.log(array2);実行結果
(2) [0, 0]Arrayコンストラクターと同様に、配列の中身の値を指定して作成することも可能です。
const array2 = [1, 2];
console.log(array2);実行結果
(2) [1, 2]const array2 = ["a", "b"];
console.log(array2);実行結果
(2) ["a", "b"]Arrayコンストラクターと配列リテラルどちらを使用するかですが、一般的には配列リテラルを用いるケースが多いです。
配列リテラルの方が感覚的に分かりやすいため、こちらが採用されることが多くなっています。
配列の要素の取得
配列内の要素を取得する際は、配列名[インデックス番号]と記載します。
const arrayOfProductName = ["テレビ", "PC", "洗濯機", "電子レンジ"];
console.log(arrayOfProductName[2]);実行結果
洗濯機インデックス番号は0始まりです。
arrayOfProductName[2]は、arrayOfProductName配列の3番目の要素を取り出します。
| インデックス | 0 | 1 | 2 | 3 |
| 要素 | テレビ | PC | 洗濯機 | 電子レンジ |
ここまでの例で何度か登場していますが、インデックス番号を指定せず、単純に配列名だけを記載した場合は、配列全体を取り出します。
const arrayOfProductName = ["テレビ", "PC", "洗濯機", "電子レンジ"];
console.log(arrayOfProductName);実行結果
(4) ["テレビ", "PC", "洗濯機", "電子レンジ"]配列の要素を検索する：indexOfメソッド
配列の中の要素を検索するには、indexOfメソッドを使います。
配列名.indexOf(検索したいデータ）と書くことで、配列の中でのデータのインデックス番号が取得できます。
const arrayOfProductName = ["テレビ", "PC", "洗濯機", "電子レンジ"];
const indexOfPC = arrayOfProductName.indexOf("PC");
console.log(indexOfPC);実行結果
1インデックス番号が1、つまり配列の2番目に「PC」というデータが存在することがわかります。
検索したデータが配列の中に存在しない場合も確認してみましょう。
const arrayOfProductName = ["テレビ", "PC", "洗濯機", "電子レンジ"];
const indexOfrefrigerator = arrayOfProductName.indexOf('冷蔵庫');
console.log(indexOfrefrigerator);実行結果
-1検索したデータが配列の中に存在しない場合は、「-1」が返ってきます。
indexOfの結果が-1かそれ以外かで処理の分岐ができそうだね！
配列の要素の追加と削除
要素の追加：pushメソッド
配列に要素を追加するにはpushメソッドを使います。
const arrayOfProductName = ["テレビ", "PC", "洗濯機", "電子レンジ"];
arrayOfProductName.push("エアコン");
console.log(arrayOfProductName);実行結果
(5) ["テレビ", "PC", "洗濯機", "電子レンジ", "エアコン"]| インデックス | 0 | 1 | 2 | 3 | 4 |
| 要素 | テレビ | PC | 洗濯機 | 電子レンジ | エアコン |
配列の一番最後に「エアコン」という要素が追加されました。
要素の削除その１：delete演算子
配列から要素を削除するには、delete演算子を使います。
delete 配列名[削除するインデックス番号]で、指定したインデックス番号の要素を削除できます。
const arrayOfProductName = ["テレビ", "PC", "洗濯機", "電子レンジ", "エアコン"];
delete arrayOfProductName[2];
console.log(arrayOfProductName);| インデックス | 0 | 1 | 3 | 4 | |
| 要素 | テレビ | PC | 電子レンジ | エアコン |
インデックス番号：２の洗濯機が削除されるので、結果は次のようになります。
(5) ["テレビ", "PC", "電子レンジ", "エアコン"]このとき、インデックス番号：２は中身が消えただけで、要素としては残っています。
const arrayOfProductName = ["テレビ", "PC", "洗濯機", "電子レンジ", "エアコン"];
delete arrayOfProductName[2];
console.log(arrayOfProductName[2]);実行結果
undefinedundefinedとは、変数が宣言だけされて、実際の値を持っていない状態のことです。
削除した要素を詰めるには、削除した後に、filter(Boolean)メソッドを使用します。
const arrayOfProductName = ["テレビ", "PC", "洗濯機", "電子レンジ", "エアコン"];
delete arrayOfProductName[2];
const arrayOfProductNameChanged = arrayOfProductName.filter(Boolean);
console.log(arrayOfProductNameChanged);実行結果
(4) ["テレビ", "PC", "電子レンジ", "エアコン"]filterメソッドを使用することで配列が作り直しになります。
別名の配列を作るか、最初の配列の宣言でconstではなくletにしておく必要があることに注意してください。
delete演算子はindexOfと組み合わせても使えそうだね！
インデックス番号が分からない要素を削除したい場合は、indexOfメソッドを使用しましょう。
const arrayOfProductName = ["テレビ", "PC", "洗濯機", "電子レンジ", "エアコン"];
const indexOfWashingMachine = arrayOfProductName.indexOf("洗濯機");
delete arrayOfProductName[indexOfWashingMachine];
console.log(arrayOfProductName);実行結果
(5) ["テレビ", "PC", "電子レンジ", "エアコン"]要素の削除その２：spliceメソッド
delete演算子ではなく、spliceメソッドを使って要素を削除することもできます。
配列名.splice(削除を開始するインデックス番号, 削除する要素数)で指定します。
const arrayOfProductName = ["テレビ", "PC", "洗濯機", "電子レンジ", "エアコン"];
arrayOfProductName.splice(2,1);
console.log(arrayOfProductName);実行結果
(4) ["テレビ", "PC", "電子レンジ", "エアコン"]spliceメソッドでは、削除した要素の後続の要素が詰まるのが特徴です。
配列の結合と分割
配列を結合する：joinメソッド
joinメソッドを使うと、配列の要素を結合して1つの文字列として取り出すことができます。
const arrayOfProductName = ["テレビ", "PC", "洗濯機", "電子レンジ", "エアコン"];
const stringOfJoinedProductName = arrayOfProductName.join()
console.log(stringOfJoinedProductName);実行結果
テレビ,PC,洗濯機,電子レンジ,エアコンjoin()の( )の中に何も指定しないで実行すると、,(カンマ)で区切られます。
join()の( )中には、それぞれの要素の間に付ける文字を指定することができます。
const arrayOfProcessDate = ["2022","6","25"];
const stringOfJoinedProcessDate = arrayOfProcessDate.join("/");
console.log(stringOfJoinedProcessDate);実行結果
2022/6/25もし間に何も付けたくない場合は、join(“”)と指定すればOKです。
const arrayOfProductName = ["テレビ", "PC", "洗濯機", "電子レンジ", "エアコン"];
const stringOfJoinedProductName = arrayOfProductName.join("")
console.log(stringOfJoinedProductName);実行結果
テレビPC洗濯機電子レンジエアコン配列を分割する：sliceメソッド
配列を分割するにはsliceメソッドを使用します。
sliceメソッドは指定の仕方が複雑なので、いくつかのパターンに分けて例を紹介するね。
開始位置と終了位置を指定する
配列名.slice(取り出しを開始するインデックス番号, 終了位置のインデックス番号)で、指定した開始インデックス番号～終了位置のインデックス番号の1つ手前までを新しい配列に取り出します。
const arrayOfProductName = ["テレビ", "PC", "洗濯機", "電子レンジ", "エアコン"];
const arrayOfProductNameSliced = arrayOfProductName.slice(1, 3);
console.log(arrayOfProductNameSliced);実行結果
(2) ["PC", "洗濯機"]| インデックス | 0 | 1 | 2 | 3 | 4 |
| 要素 | テレビ | PC | 洗濯機 | 電子レンジ | エアコン |
開始位置：１なので、インデックス番号１の「PC」から取り出しを行います。
終了位置：３なので、インデックス番号３の「電子レンジ」が終了位置ですが、「電子レンジ」は含まれず、１つ手前の「洗濯機」までの取り出しとなるので、注意が必要です。
開始位置のみ指定する（正の数）
終了位置を省略して、開始位置のみ指定することもできます。
開始位置のみ指定した場合、開始位置のインデックス番号以降の要素が取り出されます。
const arrayOfProductName = ["テレビ", "PC", "洗濯機", "電子レンジ", "エアコン"];
const arrayOfProductNameSliced = arrayOfProductName.slice(1);
console.log(arrayOfProductNameSliced);実行結果
(4) ["PC", "洗濯機", "電子レンジ", "エアコン"]| インデックス | 0 | 1 | 2 | 3 | 4 |
| 要素 | テレビ | PC | 洗濯機 | 電子レンジ | エアコン |
この場合、インデックス番号：１の「PC」以降が取り出されます。
開始位置のみ指定する（負の数）
開始位置には負の数を指定することも可能です。
const arrayOfProductName = ["テレビ", "PC", "洗濯機", "電子レンジ", "エアコン"];
const arrayOfProductNameSliced = arrayOfProductName.slice(-2);
console.log(arrayOfProductNameSliced);実行結果
(2) ["電子レンジ", "エアコン"]| インデックス | 0 | 1 | 2 | 3 | 4 |
| 要素 | テレビ | PC | 洗濯機 | 電子レンジ | エアコン |
この場合、開始位置として-2を指定しているので、末尾の2要素分が取り出されます。
開始位置を負の数にすると、末尾から数えて何項目めか？という意味になります。
終了位置を負の数にする
開始位置だけではなく、終了位置にも負の数を指定することができます。
考え方は開始位置のときと同じで、末尾から数えて何項目めか？という意味です。
const arrayOfProductName = ["テレビ", "PC", "洗濯機", "電子レンジ", "エアコン"];
const arrayOfProductNameSliced = arrayOfProductName.slice(1,-2);
console.log(arrayOfProductNameSliced);実行結果
(2) ["PC", "洗濯機"]| インデックス | 0 | 1 | 2 | 3 | 4 |
| 要素 | テレビ | PC | 洗濯機 | 電子レンジ | エアコン |
開始位置：１なので、インデックス番号：１の「PC」から取り出します。
終了位置：－２なので、末尾から数えて２項目目の「電子レンジ」が終了位置です。
ただ、終了位置は１つ手前までを取り出すので、電子レンジの１つ手前の「洗濯機」までが取り出されます。
配列のループ処理
次に、配列の各要素を使ってループ処理を行ってみましょう。
配列の要素を繰り返し処理する：forEachメソッド
配列名.forEachで配列の各要素に１つずつ処理を行うことができます。
const arrayOfProductName = ["テレビ", "PC", "洗濯機", "電子レンジ", "エアコン"];
arrayOfProductName.forEach(name => console.log(name));実行結果
テレビ
PC
洗濯機
電子レンジ
エアコンここでは、配列の各要素をループの処理の中でnameという変数に格納しています。
そして、要素を格納した変数nameをconsole.logで出力しています。
配列の要素に対して処理を行いつつ新しい配列を作る：mapメソッド
mapメソッドはループの処理を行いつつ、新しい配列を作成します。
const arrayOfProductName = ['テレビ', 'PC', '洗濯機', '電子レンジ', 'エアコン'];
const arrayOfProductNameAddSequense = arrayOfProductName.map(
(name, index) => `${index + 1}:${name}`
);
console.log(arrayOfProductNameAddSequense);実行結果
(5) ["1:テレビ", "2:PC", "3:洗濯機", "4:電子レンジ", "5:エアコン"]ここでは、配列の各要素をループの処理の中でnameという変数に格納しています。
同時に、インデックス番号をindexという変数に格納しています。
そして、インデックス番号と要素を結合した新しい配列arrayOfProductNameAddSequenseを作成しています。
JavaScriptでは、`(バッククォーテーション)で囲んだ文字列をテンプレートリテラルといいます。
テンプレートリテラルの中では、${変数名}という形式で、変数を展開することができます。
テンプレートリテラルは変数と文字列の結合をする際に使用します。
mapを使ったループ処理の応用編として、mapのループの中で非同期処理を実行する方法を解説しています。
余裕があればこちらの記事もご確認ください。
新しい配列が不要な場合はforEach、必要な場合はmapを使えば良いね。
ループの基本処理：for文
もちろん配列でも、JavaScriptのループの基本となるfor文を使用することができます。
const arrayOfProductName = ['テレビ', 'PC', '洗濯機', '電子レンジ', 'エアコン'];
for (let index = 0; index < 5; index += 1) {
console.log(arrayOfProductName[index]);
}実行結果
テレビ
PC
洗濯機
電子レンジ
エアコンただ、for文を使うと記載が冗長になってしまいます。
どうしてもfor文じゃないと処理できない！という場合以外はforEachメソッドかmapメソッドを使った方が良いでしょう。
配列をソートする：sortメソッド
sortメソッドを使うことで、配列をソートすることができます。
const arrayOfNumber = [1, 3, 5, 4, 2];
arrayOfNumber.sort();
console.log(arrayOfNumber);実行結果
(5) [1, 2, 3, 4, 5]引数に何も指定しない場合は、昇順にソートされます。
降順にソートしたい場合は、下記のように記載します。
const arrayOfNumber = [1, 3, 5, 4, 2];
arrayOfNumber.sort((a, b) => b - a);
console.log(arrayOfNumber);実行結果
5) [5, 4, 3, 2, 1]aは比較対象の1つめの値、bは比較対象の２つめの値です。
b – a < 0 の場合、aが前に来ます。
b – a = 0 の場合は、順番の入れ替えはありません。
b – a > 0の場合、bが前に来ます。
オブジェクト型の配列を扱う場合、プロパティの値でソートすることができます。
const arrayOfObject = [
{name: "佐藤", age: 22},
{name: "田中", age: 54},
{name: "鈴木", age: 36},
{name: "高橋", age: 24},
];
arrayOfObject.sort((a, b) => {
return a.age - b.age;
});
console.log(arrayOfObject);実行結果
[
{name: "佐藤", age: 22},
{name: "高橋", age: 24},
{name: "鈴木", age: 36},
{name: "田中", age: 54}
]この例では、ageプロパティの昇順に要素を並べ替えています。
もっと便利に配列を扱う
ここから先は、覚えておくとJavaScriptの配列をさらに便利に扱うことができるメソッドとプロパティについて説明します。
配列をコピーする：concatメソッド
同じ内容の配列を作成したい場合は、concatメソッドを使用します。
本来は、異なる配列を結合して新しい配列を作成するメソッドですが、引数に何も指定しないと単純コピーになります。
const arrayOfProductName = ['テレビ', 'PC', '洗濯機', '電子レンジ', 'エアコン'];
const arrayOfProductNameCopy = arrayOfProductName.concat();
arrayOfProductName.splice(2,1);
console.log(arrayOfProductNameCopy);実行結果
(5) ["テレビ", "PC", "洗濯機", "電子レンジ", "エアコン"]配列arrayOfProductNameの内容を、新しい配列arrayOfProductNameCopyにコピーしています。
コピーしたあとで元の配列から要素を削除していますが、新しい配列はコピーしたときの状態のままになっています。
concatメソッドを使用しないで、単純に=で同じ内容の配列を作るのはダメなのかな？
新しい配列 = 元の配列とした場合、元の配列に加えた修正が、新しい配列にも反映されてしまいます。
const arrayOfProductName = ['テレビ', 'PC', '洗濯機', '電子レンジ', 'エアコン'];
const arrayOfProductNameCopy = arrayOfProductName;
console.log(arrayOfProductNameCopy);
arrayOfProductName.splice(2,1);
console.log(arrayOfProductNameCopy);実行結果
(5) ["テレビ", "PC", "洗濯機", "電子レンジ", "エアコン"] // コピー直後
(4) ["テレビ", "PC", "電子レンジ", "エアコン"] // 元の配列から要素削除後JavaScriptでは、変数 = オブジェクトとすると、変数にオブジェクトへの参照を格納しています。
つまり、実際の値ではなく、コンピューター上のどこに値を持っているかを渡しているかにすぎません。
元の配列を操作することによって、コンピューター上の値に変更が加えられたので、それを参照している新しい配列にも変更が反映されてしまったのです。
要素の抽出を行う：filterメソッド
filterメソッドを使用することで、条件に合致する要素だけを取り出すことができます。
const arrayOfProductName = ['テレビ', 'PC', '洗濯機', '電子レンジ', 'エアコン'];
const arrayOfProductNameCopy = arrayOfProductName.filter(name => name.includes("ン"));
console.log(arrayOfProductNameCopy);実行結果
(2) ["電子レンジ", "エアコン"]この例では、名前に「ン」を含む要素だけを取り出しています。
配列の要素数を調べる：lengthプロパティ
lengthプロパティを使うと配列の要素数を調べることができます。
配列名.lengthと書きます。
const arrayOfProductName = ['テレビ', 'PC', '洗濯機', '電子レンジ', 'エアコン'];
const lengthOfArray = arrayOfProductName.length;
console.log(lengthOfArray);処理結果
5| インデックス | 0 | 1 | 2 | 3 | 4 |
| 要素 | テレビ | PC | 洗濯機 | 電子レンジ | エアコン |
ここで返ってくるのは要素の数なので、「5」が返ってきます。
例えば、ループ処理のfor文の例は次のように書き換えることができます。
const arrayOfProductName = ['テレビ', 'PC', '洗濯機', '電子レンジ', 'エアコン'];
for (let index = 0; index < arrayOfProductName.length; index += 1) {
console.log(arrayOfProductName[index]);
}実行結果
テレビ
PC
洗濯機
電子レンジ
エアコンこの他にも、lengthの結果が0だったら空配列として処理を分岐することができそうだね。