JavaScriptの配列について解説！追加・削除やループも紹介

配列はJavaScriptの中でも重要な概念で、実際にコードを書く時にもよく使います。JavaScriptだけでなく他の言語でも配列は存在するので応用ができる概念です。しっかりと配列をマスターして使いこなせるようになりましょう！

JavaScriptの配列とは

配列とは複数のデータをひとまとめにしたものです。

配列を使うことで大量のデータに対して一気に処理を実行できるようになります。複数のデータを管理しようとするとデータの数だけ変数を用意しなければいけませんが、配列を使えば大量のデータを1つのまとまりとして扱えるので楽にデータを管理することができます。

JavaScriptの配列の基本的な使いかた

配列を宣言する

早速、配列の基本的な使いかたについて学んでいきましょう！まずは配列を作ってみます。配列を作成することをJavaScriptでは配列を宣言すると呼びます。配列を宣言する方法は以下の2通りがあります。

下記にコード例を掲載します。

//配列コンストラクタ「Array」を使う
let foods = Array('うどん', 'ラーメン', 'ご飯', '牛肉');

//配列リテラルを使う
let foods = ['うどん', 'ラーメン', 'ご飯', '牛肉'];

配列を宣言するにはArray()か配列リテラルの[]を使います。それぞれの括弧の中には配列に格納したいデータを記述します。配列では格納されているそれぞれのデータのことを要素と呼ぶので覚えておきましょう。

インデックスについて覚えよう

配列にはインデックスというものがあります。

配列の要素にそれぞれ割り当てられた番号のことで0から数えていきます。最初の要素から順に0、1、2、3となります。

コード例で宣言した配列foodsでは0が「うどん」1が「ラーメン」、2が「ご飯」、3が「牛肉」となります。インデックスは0から始まることに注意してください。1番目の要素のインデックスは0、3番目の要素のインデックスは2となるのでインデックスを扱う時は勘違いしやすいかもしれません。

配列を初期化する

すでに宣言した配列の要素を空にすることができます。

let foods = ['うどん', 'ラーメン', 'ご飯', '牛肉'];

foods = [];

console.log(foods); //出力結果: []

すでに宣言した配列に対して[]（空の配列）を代入することで配列から要素をなくし初期化できます。

配列の要素を取得する

配列から特定の要素を取得してみましょう！

配列の要素を取得するためにはインデックスを利用します。配列名[インデックス]と記述すれば該当する要素を取得できます。

//要素を取得する基本文法
配列[インデックス];

//例
let foods = ['うどん', 'ラーメン', 'ご飯', '牛肉'];

console.log(foods[0]); //出力結果： うどん
console.log(foods[3]); //出力結果： 牛肉

配列foodsの要素である「うどん」と「牛肉」を取得するコードです。それぞれ対応するインデックスの番号を指定することで要素が取得できます。

配列の要素を検索する

配列の要素を検索してインデックスを取得する方法があります。indexOfを使うことで該当する要素のインデックスを取得できます。配列に大量のデータがあり該当する要素のインデックスを知りたい時などに便利です。

//要素を検索する基本文法
配列.indexOf(検索したい要素);

//例
let foods = ['うどん', 'ラーメン', 'ご飯', '牛肉'];

console.log(foods.indexOf('ラーメン')); //出力結果： 1

要素のインデックスを検索したい時は配列.indexOf(検索したい要素)と記述します。上記のコードでは「ラーメン」を検索したので対応するインデックス「1」が結果として取得できます。結果はインデックスで返ってくることに注意しましょう。

JavaScriptの配列の要素を変更しよう!

JavaScriptの配列は要素を取得・検索するだけでなく、追加や削除も簡単にできます。また異なる配列同士を結合させてしますことも可能です。配列の要素を変更する方法について紹介します。

pushメソッドで要素を追加する

配列の要素を追加したい時はpushメソッドを使います。

//基本文法
配列.push(追加したい値);

//例
let foods = ['うどん', 'ラーメン', 'ご飯', '牛肉'];
foods.push('トマト');
console.log(foods);
//出力結果： ['うどん', 'ラーメン', 'ご飯', '牛肉', 'トマト']

基本的な記述方法は配列.push(追加したい値)です。pushメソッドを使うと要素は配列の末尾に追加されます。

spliceメソッドで要素を削除する

次は配列の要素を削除してみましょう。spliceメソッドを使えば配列の要素を削除できます。

//基本文法
配列.splice(開始位置, 削除する要素の数)

//例
let foods = ['うどん', 'ラーメン', 'ご飯', '牛肉'];
foods.splice(0, 1);
console.log(foods);
//出力結果： ['ラーメン', 'ご飯', '牛肉']

splice(開始位置, 削除する要素の数)と記述することで要素を削除できます。

spliceメソッドは単に削除するだけでなく、要素を削除して詰めることになるので注意しましょう。上記のコードではfoods.splice(0, 1);「インデックス0を開始位置にして要素を1個削除する。」という意味になります。結果としてfoodsの最初の要素である「うどん」のみが削除されます。

joinメソッドで配列の要素を結合した文字列にする

joinメソッドは配列を結合して文字列を生成します。

//要素を結合して文字列にする基本文法
配列.join(要素間に挿入する値);

//例
let foods = ['うどん', 'ラーメン', 'ご飯', '牛肉'];
let join = foods.join('と');
console.log(join);
//出力結果： うどんとラーメンとご飯と牛肉

配列.join(要素間に挿入する値)と記述することで配列の要素間に任意の値を挿入した文字列を生成することができます。上記のコード例では各要素の間に文字列「と」を挿入し、文字列「うどんとラーメンとご飯と牛肉」を生成しています。

sliceメソッドで配列を分割する

sliceメソッドを使うことで配列のデータを分割できます。

//配列を分割する基本文法
配列.slice(開始位置, [終了位置]);

//例
let foods = ['うどん', 'ラーメン', 'ご飯', '牛肉'];
let slice = foods.slice(2);
console.log(slice);
//出力結果： ['ご飯', '牛肉']

配列を分割するには配列.slice(開始位置)と記述します。開始位置には分割したい要素のインデックスを記述します。開始位置に指定したインデックスの要素から末尾までを新しい配列として取得できます。

掲載したコード例ではインデックス「2」（ご飯）を指定したためsliceメソッド実行後はご飯から始まる配列へと分割できました。

sortメソッドで配列の要素を並び替える

配列の要素を並び替えるメソッドとしてsortがあります。JavaScriptの配列の要素は並び替えが可能で、要素の順番を簡単に並び替えることができます。

//sortメソッドの基本文法
配列.sort();

//例（文字列の並び替え）
let str = ['c', 'a', 'd', 'b'];
str.sort();
console.log(str);
//出力結果： ['a', 'b', 'c', 'd'] 

//例（数値の並びかえ）
let num = [3, 2, 4, 1];
num.sort((a, b) => a - b);
console.log(num);
//出力結果： [1, 2, 3, 4]

配列の並び替えるには配列.sort()と記述し、文字列を昇順に並び替えます。sortメソッドは数値を比較する時は引数に関数を記述することに注意してください。

(a, b) => a-bが関数部分です。

aとbに各要素の値を代入し比較した後に並び替え処理が実行されます。コード例は昇順に並び替えていますがb-aとすることで降順に並び替えができます。

処理の詳しい挙動が気になる方はchromeデベロッパーツールのconsoleに以下のコードを貼り付けてみてください。

let num = [3, 2, 4, 1];
num.sort((a, b) => {
  console.log(`num: ${num}`);
  console.log(`a: ${a}`);
  console.log(`b: ${b}`);
  return a - b;
});
console.log(num);

JavaScriptの配列を自在に扱おう！

concatメソッドで配列をコピーする

配列をコピーして別の配列として扱いたい場合はconcatメソッドを使います。concatメソッドは配列を連結するメソッドですが、空の配列に連結すれば元の値と同じ配列になります。

//concatの基本文法
配列.concat();

//例
let foods = ['うどん', 'ラーメン', 'ご飯', '牛肉'];
let anotherFoods = foods.concat();
console.log('fodds:' + foods);
console.log('anotherFoods:' + anotherFoods);

concatメソッドを使って複製された配列は元の配列とは全く別の配列として扱われます。そのため複製した配列の要素に変更を加えても元の配列は全く影響を受けません。

lengthプロパティで配列の要素の数を調べる

配列の要素の数を調べるにはlengthプロパティを使用します。

//要素の数を調べる基本文法
配列.length;

//例
let foods = ['うどん', 'ラーメン', 'ご飯', '牛肉'];
console.log(foods.length);
//出力結果： 4

配列.lengthで配列の要素の数を調べることができます。コード例の配列foodsは要素が4つなので結果として4が出力されました。

JavaScriptの配列の繰り返し処理をしよう

forEachメソッドで繰り返す

forEachメソッドは配列の全ての要素に対して任意の処理を実行します。

//forEachの基本文法
配列.forEach(コールバック関数);

//例
let foods = ['うどん', 'ラーメン', 'ご飯', '牛肉'];

foods.forEach((value) => {
  console.log(value);
});
/*
出力結果
うどん
ラーメン
ご飯
牛肉
*/

上記のコードは配列の全ての要素を順番に出力する繰り返し処理です。

配列.forEach(コールバック関数)と記述すれば配列に対して繰り返し処理が実行できます。

filterメソッドで配列の要素を抽出する

filterは任意の条件に合致する要素のみを抽出して新しい配列を作成します。

//filterの基本文法
配列.filter(コールバック関数);
//例
let num = [2, 49, 70, 4, 3, 89, 100, 16];
const lgNum = num.filter((value) => {
  return value >= 50;
});
console.log(lgNum);
//出力結果：  [70, 89, 100]

上記コードでは配列numにから50以上の数値のみを抽出して新たな配列lgNumを作成しています。

配列.filter(コールバック関数)で配列データを任意の条件で抽出できます。

mapで処理した要素で新しい配列を作成する

mapは繰り返し処理した要素で新しい配列を作成してくれます。

//mapの基本文法
配列.map(コールバック関数);

//例
let num = [1, 2, 3, 4, 5];
const doubleNum = num.map((value) => {
  return value * 2;
});
console.log(doubleNum);
//出力結果： [2, 4, 6, 8, 10]

配列.map(コールバック関数)と記述することで処理した要素で新たな配列を作成できます。forEachと良く似ていますが、forEahcは単純に処理を実行するだけに対して、mapは処理した後の結果を配列として結果を返してくれる点で大きく違います。

上記のコードでは要素を2倍した配列を新たに作成しています。出力結果は処理を実行するだけでなくちゃんと配列として結果を返している点に注目してみてください。

JavaScriptの配列を使いこなせるようになろう！

いかがだったでしょうか？

配列の基本から配列に使えるメソッドなどを紹介しましたが少しでも理解することができましたでしょうか？

配列は使用する頻度はかなり多いです。データをまとめて管理できるので処理が複雑になる時ほどその真価を発揮します。今回紹介したメソッドもしっかり覚えてJavaScriptの配列をしっかりマスターしましょう！