【初心者向け】JavaScript配列の基本と要素の追加・削除・検索方法まで解説する

本記事は、「配列の書き方がイマイチ分からない」と思いつつ

UIHACK 編集長

・データの追加や削除なの方法を知りたい人
・特定の値の検索方法を知りたい人
・最大値や最小値を求める方法を知りたい人

上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向けに現役エンジニアが解説します。

この記事では、JavaScriptの配列は、複数の値を1つの変数に格納することができる非常に便利なデータ構造です。
初めての方でも分かりやすく解説します。

プログラミング未経験の方でも、読みやすい内容なので、本記事を読んで未来に向けて、一歩を踏み出しましょう。

それでは、ご一読ください！

JavaScriptの配列とは？使いこなすためのポイントを解説！

配列とは？

複数のデータを一つのグループにまとめて管理するための便利な道具です。イメージとしては、一つの箱にたくさんのアイテムを詰め込んでおく感じです。

例えば、1から5までの数字を配列に入れるとこんな感じです。

UIHACK 編集長

例えば、1から5までの数字を配列に入れるとこんな感じです。

let numbers = [1, 2, 3, 4, 5];

配列の要素には、順番に0から始まる番号（インデックス）が付いています。例えば、numbers[0]は1を、numbers[1]は2を表します。

JavaScriptで配列の初期化を行う方法4選

1.空の配列を作成する

let myArray = [];

2.要素を指定して配列を作成する

let myArray = [1, 2, 3, 4, 5];

3.Arrayコンストラクターを使って配列を作成する

let myArray = new Array();

4.Arrayコンストラクターに要素を指定して配列を作成する

let myArray = new Array(1, 2, 3, 4, 5);

JavaScriptで多次元配列を使ってみよう！

多次元配列を使ってみましょう！多次元配列は、配列の中にさらに配列を入れることで、行列や2次元グリッドなどのデータ構造を表現するのに便利です。

UIHACK 編集長

例として、3×3の行列（2次元配列）を作成してみます。

// 3x3の行列を表現する多次元配列
let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// 要素にアクセスしてみる
console.log(matrix[0][0]); // 出力: 1
console.log(matrix[1][2]); // 出力: 6
console.log(matrix[2][1]); // 出力: 8

上記のコードでは、matrixという多次元配列を作成しています。それぞれの行は別の配列として表現されています。matrix[0]は1つ目の行を、matrix[1]は2つ目の行を、matrix[2]は3つ目の行を表します。

そして、matrix[行のインデックス][列のインデックス]のように要素にアクセスできます。例えば、matrix[0][0]は1つ目の行の1つ目の要素（1）を取得します。

多次元配列は、さまざまな応用があります。例えば、タイルマップのような2次元グリッドデータや、行列演算などに使われることがあります。ぜひ自分で試してみて、多次元配列の便利さを体感してみてください！

JavaScriptで配列に要素を追加と削除する方法

要素の追加する方法

push() メソッド

配列の末尾に要素を追加する方法です。

let myArray = [1, 2, 3];
myArray.push(4); // 配列の末尾に4を追加
console.log(myArray); // 出力: [1, 2, 3, 4]

unshift() メソッド

配列の先頭に要素を追加する方法です。

let myArray = [2, 3, 4];
myArray.unshift(1); // 配列の先頭に1を追加
console.log(myArray); // 出力: [1, 2, 3, 4]

要素の削除する方法

pop() メソッド

配列の末尾の要素を削除する方法です。

let myArray = [1, 2, 3, 4];
myArray.pop(); // 配列の末尾の要素（4）を削除
console.log(myArray); // 出力: [1, 2, 3]

shift() メソッド

配列の先頭の要素を削除する方法です。

let myArray = [1, 2, 3, 4];
myArray.shift(); // 配列の先頭の要素（1）を削除
console.log(myArray); // 出力: [2, 3, 4]

JavaScriptの配列に対して先頭から要素を取得する方法とは？

JavaScriptの配列から先頭から要素を取得する方法には、shift() メソッドを使用します。

UIHACK 編集長

shift() メソッドは、配列の先頭の要素を取り出してその値を返し、元の配列からその要素を削除します。

shift() メソッドの例を見てみましょう

let myArray = [1, 2, 3, 4];
let firstElement = myArray.shift(); // 配列の先頭の要素（1）を取得し、削除
console.log(firstElement); // 出力: 1
console.log(myArray); // 出力: [2, 3, 4]

上記の例では、myArray という配列から先頭の要素（1）を取得して、firstElement に代入しています。そして、shift() メソッドによって元の配列から先頭の要素が削除された結果、myArray の値は [2, 3, 4] となります。

shift() メソッドは配列の先頭の要素を取得する際に便利な方法です。要素を取り出すたびに配列の長さが短くなるため、注意して使用してください。

JavaScriptの配列からn番目の要素を取得する方法を解説！

JavaScriptの配列からn番目の要素を取得する方法には、配列のインデックスを使用します。JavaScriptの配列は0から始まるため、n番目の要素を取得する場合はインデックスが n – 1 になります。

例を見てみましょう

let myArray = [10, 20, 30, 40, 50];
let n = 3; // 3番目の要素を取得したい場合

let element = myArray[n - 1]; // n番目の要素を取得
console.log(element); // 出力: 30

上記の例では、myArray という配列から3番目の要素を取得しています。n – 1 のインデックスを指定することで、3番目の要素である30を取得しています。

配列のインデックスは0から始まるため、n番目の要素を取得する際には、実際の位置に対して1つ減らしたインデックスを指定する必要があります。

また、配列の長さを超えるインデックスを指定した場合には、undefined が返されることに注意してください。このため、配列の長さを確認してから要素を取得するようにすると良いでしょう。

let myArray = [10, 20, 30, 40, 50];
let n = 6; // 存在しない6番目の要素を取得したい場合

if (n <= myArray.length) {
  let element = myArray[n - 1];
  console.log(element); // 出力: undefined
} else {
  console.log("指定された要素は存在しません。");
}

JavaScriptで要素が配列に含まれているかを調べる方法

JavaScriptで要素が配列に含まれているかを調べる方法には、いくつかの方法があります。以下にいくつかの方法を示します。

includes() メソッド

includes() メソッドは、配列に指定した要素が含まれているかどうかを判定します。戻り値はブール値（trueまたはfalse）です。

let myArray = [1, 2, 3, 4, 5];
let targetElement = 3;

if (myArray.includes(targetElement)) {
  console.log("要素が配列に含まれています。");
} else {
  console.log("要素が配列に含まれていません。");
}

indexOf() メソッド

indexOf() メソッドは、配列内で指定した要素を検索し、最初に見つかった位置のインデックスを返します。見つからない場合は -1 を返します。

let myArray = [1, 2, 3, 4, 5];
let targetElement = 3;

if (myArray.indexOf(targetElement) !== -1) {
  console.log("要素が配列に含まれています。");
} else {
  console.log("要素が配列に含まれていません。");
}

find() メソッド

find() メソッドは、指定したテスト関数を満たす最初の要素を返します。見つからない場合は undefined を返します。

let myArray = [1, 2, 3, 4, 5];
let targetElement = 3;

if (myArray.find((element) => element === targetElement)) {
  console.log("要素が配列に含まれています。");
} else {
  console.log("要素が配列に含まれていません。");
}

JavaScript配列の中で最大値や最小値を求める方法

最大値を求める方法

Math.max() 関数を使用する方法

Math.max() 関数は、引数として与えられた数値の中から最大値を返します。しかし、直接配列を引数に指定することはできません。そのため、apply() メソッドを使用して配列の要素を引数として渡す必要があります。

let myArray = [10, 5, 8, 20, 3];
let maxValue = Math.max.apply(null, myArray);
console.log(maxValue); // 出力: 20

スプレッド演算子（Spread Operator）を使用する方法（ES6以降）

スプレッド演算子を使うと、配列の要素を展開して引数として渡すことができます。

let myArray = [10, 5, 8, 20, 3];
let maxValue = Math.max(...myArray);
console.log(maxValue); // 出力: 20

最小値を求める方法

Math.min() 関数を使用する方法

Math.min() 関数は、引数として与えられた数値の中から最小値を返します。同様に、配列を引数に直接指定できないため、apply() メソッドかスプレッド演算子を使用します。

let myArray = [10, 5, 8, 20, 3];
let minValue = Math.min.apply(null, myArray);
console.log(minValue); // 出力: 3

スプレッド演算子を使用する方法（ES6以降）

let myArray = [10, 5, 8, 20, 3];
let minValue = Math.min(...myArray);
console.log(minValue); // 出力: 3

JavaScriptの配列についての結論とまとめ

UIHACK 編集長

今回は、JavaScriptの配列についてご紹介しました。
それでは、最後にもう一度、おさらいしましょう。

もう一度、最初から「【初心者向け】JavaScript配列の基本と要素の追加・削除・検索方法まで解説する」を読む↑

なぜ繰り返し処理っあるんだようと思う人は、ぜひ以下の記事もご覧ください。

2023年7月14日 【JavaScript】for文の繰り返し処理と無限ループの回避方法

条件分岐の文法や書き方についてイマイチ分からないあなたは、ぜひ以下の記事もご覧ください。

2023年7月18日 【もう迷わない】JavaScriptのif文と条件式の使い方！else文や三項演算子も解説してるよ