JavaScriptの配列（Array）の基本的な使い方まとめ！初心者向けに徹底解説

2024-07-14

当サイトでは一部リンクに広告が含まれています

JavaScriptでプログラミングをする上で避けては通れないのが配列（Array）です。配列を使いこなせるようになると、データをまとめて扱うことができ、コードがとてもスッキリします。

しかし、配列の使い方がよくわからず困っている初心者の方も多いのではないでしょうか。
配列の基本的な作り方や使い方がわかれば、もっと効率的にプログラミングできるようになります。

そこで今回は、JavaScriptの配列について初心者向けに基礎からわかりやすく解説していきます。
配列の作成や初期化、要素の追加や削除、ループ処理など、基本的な使い方をサンプルコードを交えて丁寧に説明しますので、ぜひ最後までご覧ください！

この記事を書いた人

現役のフルスタックエンジニアとして活躍中
開発チームリーダーとして複数プロジェクトをリード
副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
プログラミングスクールのカリキュラム執筆経験あり

JavaScriptの配列（Array）とは？

まずは配列の概要について説明します。
配列とは、複数のデータをまとめて格納できるオブジェクトのことです。

通常、変数には1つの値しか格納できませんよね。例えば以下のように。

var text = 'こんにちは';
var num = 10;

しかし、もっとたくさんの値、例えば100個のデータを扱いたい時に、1つずつ変数を作るのは大変ですよね。

そんな時に配列を使うと、複数の値をひとまとめにして1つの変数で管理することができます。

配列の作成と初期化

配列の作成方法

では実際に、配列の作り方を見ていきましょう。JavaScriptで配列を作成するには主に2つの方法があります。

配列コンストラクタを使う方法
配列リテラルを使う方法

それぞれのやり方を見てみましょう。

①配列コンストラクタを使う方法

var array1 = new Array('リンゴ', 'バナナ', 'イチゴ');

②配列リテラルを使う方法

var array2 = ['リンゴ', 'バナナ', 'イチゴ'];

実行結果は以下の通りで、どちらの方法でも同じ配列が作成できます。

console.log(array1);
// ["リンゴ", "バナナ", "イチゴ"]

console.log(array2);
// ["リンゴ", "バナナ", "イチゴ"]

通常は簡潔に書ける配列リテラルを使うことが多いです。ただし、1つだけ数値データを格納する場合は注意が必要です。

var array1 = new Array(5);
var array2 = [5];

console.log(array1); // [empty × 5]
console.log(array2); // [5]

配列リテラルで[5]とすると、5という数値データを持つ配列になります。一方、配列コンストラクタでnew Array(5)とすると、5つ分の空の配列を作成することになるので気をつけましょう。

配列の初期化

次に、作成済みの配列を空にする初期化の方法を見ていきます。

配列の初期化は、作成時に値を何も指定しないことで実現できます。

var array = [];
console.log(array); // []

これにより、仮にarray変数に以前の値が入っていたとしても、空の配列で上書きされて初期化されます。

配列の基本的な使い方

配列の要素にアクセスする

配列に格納されたそれぞれの値のことを要素と呼びます。
この要素にアクセスするには、配列変数の後ろに[]（ブラケット）をつけ、その中に取得したい要素の番号（インデックス）を指定します。

var array = ['りんご', 'ばなな', 'ぶどう'];

console.log(array[0]); // りんご
console.log(array[2]); // ぶどう

配列のインデックスは0から始まる点に注意しましょう。
また、存在しないインデックス番号を指定するとundefinedが返ります。

配列の長さを取得する

配列の要素数（長さ）を調べるには、lengthプロパティを使います。

var array = ['りんご', 'ばなな', 'ぶどう'];
console.log(array.length); // 3

配列の要素を操作する

要素の追加

既存の配列データに要素を追加する方法は主に2つあります。

push()メソッド：配列の末尾に要素を追加
unshift()メソッド：配列の先頭に要素を追加

サンプルコードで見てみましょう。

var array = ['りんご', 'ばなな'];

array.push('ぶどう');
console.log(array); // ["りんご", "ばなな", "ぶどう"]

array.unshift('みかん');
console.log(array); // ["みかん", "りんご", "ばなな", "ぶどう"]

push()で末尾に追加、unshift()で先頭に追加できるのがわかりますね。

要素の削除

次に、配列から要素を削除してみましょう。削除にもメソッドが用意されています。

pop()メソッド：配列の末尾の要素を削除
shift()メソッド：配列の先頭の要素を削除

var array = ['りんご', 'ばなな', 'ぶどう'];

array.pop();
console.log(array); // ["りんご", "ばなな"]

array.shift();
console.log(array); // ["ばなな"]

これで、pop()は末尾の要素を、shift()は先頭の要素を削除できることがわかりました。

配列の検索

配列内にある要素を検索する方法も覚えておきましょう。

indexOf()メソッド

indexOf()メソッドは、指定した要素が配列のどの位置にあるかを調べるのに使います。

var array = ['りんご', 'ばなな', 'ぶどう'];
console.log(array.indexOf('ばなな')); // 1
console.log(array.indexOf('みかん')); // -1

要素が見つかればその位置（インデックス）が、見つからなければ-1が返ってきます。

配列のループ処理

配列の要素を順番に処理していく方法も非常によく使われます。代表的なのがforEach()メソッドです。

forEach()メソッド

forEach()メソッドは配列のそれぞれの要素に対して、指定した処理を実行します。

var array = ['りんご', 'ばなな', 'ぶどう'];
array.forEach(function(element) {
console.log(element);
});
// りんご
// ばなな
// ぶどう

forEach()の引数にはコールバック関数を指定します。
この関数の引数（上記のelement）には、ループのたびに配列の要素が順番に入ってきます。

その他の便利なメソッド

他にも配列を扱う上で便利なメソッドがたくさんあります。
ここではいくつか紹介しておきましょう。

配列を連結：concat()

複数の配列を連結して1つにまとめるには、concat()メソッドが使えます。

var array1 = ['a', 'b'];
var array2 = ['c', 'd'];
var newArray = array1.concat(array2);
console.log(newArray); // ["a", "b", "c", "d"]

条件に合う要素を抽出：filter()

filter()メソッドを使うと、配列の中から特定の条件に合致する要素だけを抽出した新しい配列を作れます。

var numbers = [1, 2, 3, 4, 5];
var evenNumbers = numbers.filter(function(num) {
return num % 2 === 0;
});
console.log(evenNumbers); // [2, 4]

この例では、2で割り切れる偶数だけを抽出しています。

配列を文字列に変換：join()

join()メソッドは、配列の要素を連結して1つの文字列にします。

var array = ['あ', 'い', 'う', 'え', 'お'];
console.log(array.join()); // "あ,い,う,え,お"
console.log(array.join('')); // "あいうえお"
console.log(array.join('-')); // "あ-い-う-え-お"

引数を空にすると、要素がカンマで連結されます。
引数に空文字''を指定すると、単純に連結されます。
引数に任意の文字列を指定すると、その文字列で要素がつなげられます。