JavaScriptの配列とは？操作方法をサンプルコード付きで詳しく解説！

JavaScriptでデータを扱うとき、配列は避けては通れない基本中の基本です。

配列は初心者がとっつきにくさを感じる要素の代表格でもありますが、マスターすることで値の追加や削除だけでなく、検索や変換、条件チェックまで、さまざまな操作がシンプルなコードで実現できるようになります。

本記事ではサンプルコードを交えながら、配列の初期化からコピー、並び替えや絞り込みまで、実践的にステップを踏んで解説します。

JavaScriptの配列（Array）とは？

JavaScriptの配列は、複数のデータを一つの変数でまとめて扱える便利な仕組みです。

数字や文字列、オブジェクトなど異なる型を混在させることができ、順番に並べたリストとして管理できます。

インデックス（0から始まる番号）を使って要素へ簡単にアクセスできるので、データの追加や削除、検索が柔軟に行えます。

配列はデータ操作の基本となる存在ですから、使いこなせるとコードがすっきり書けるようになるでしょう。

そもそも配列の基本から学び直したい方は、ぜひ以下の記事もご覧ください。

JavaScriptで初心者がプログラミングを学ぶ4つのステップを解説！

まったくの初心者で、これからJavaScriptを新しく学ぶという方は、以下の記事も参考になります。

JavaScriptで初心者がプログラミングを学ぶ4つのステップを解説！

JavaScriptの配列の使い方

ここからは実際のサンプルコードもふまえ、JavaScriptの配列の使い方を紹介していきます。

①：配列の初期化

配列は [] を使うだけで簡単に作れます。まずは空の配列を作ってみましょう。

const fruits = [];

console.log(fruits.length);

実行結果：

0

fruits はまだ何も入っていない状態なので、実行すると結果は 0 です。初期値を用意したいときは以下のようにカンマで区切って要素を並べます。

const mixed = [‘apple’, 42, false]; //カンマで単語を区切る

console.log(mixed.length);

console.log(mixed[0]);

実行結果：

3

apple

この例では文字列、数値、真偽値を一つの配列にまとめています。インデックスは 0 から始まるので、最初の要素は mixed[0] で取り出せます。

②：配列に値を追加

既存の配列に新しい要素を追加するには、push と unshift を使います。

const items = [‘apple’, ‘banana’];

items.push(‘grape’); //ここでpushでgrapeを追加

console.log(items);

items.unshift(‘watermelon’);

console.log(items);

実行結果：

[‘apple’, ‘banana’, ‘grape’] [‘watermelon’, ‘apple’, ‘banana’, ‘grape’]

push は配列の最後に値を追加します。そしてunshift は、配列の先頭に値を挿入します。

どちらのメソッドも元の配列を直接変更するため、新しい変数を用意せずに要素を追加できます。

③：配列から値を削除

配列から特定の値を取り除く方法として、pop と shift がよく使われます。以下のコードはその使い方を示しています。

const data = [‘cat’, ‘dog’, ‘bird’, ‘fish’];

// 配列の最後の要素を削除

data.pop();

console.log(data);

// 配列の最初の要素を削除

data.shift();

console.log(data);

実行結果：

[‘cat’, ‘dog’, ‘bird’] [‘dog’, ‘bird’]

pop は配列の末尾の要素を削除し、元の配列を更新します。そしてshift は配列の先頭の要素を削除して、残りの要素を前に詰めます。

どちらも元の配列を直接変更するので、必要に応じて戻り値を使うかどうか選択するとよいでしょう。

④：配列の検索・一致するデータで配列作成

配列から条件に合う要素だけを抜き出して新しい配列を作りたいときは、filter メソッドを使います。以下のコードは数値のうち偶数だけを取り出す例です。

const numbers = [0, 1, 2, 3, 4, 5];

const evens = numbers.filter(n => n % 2 === 0);

console.log(evens);

実行結果：

[0, 2, 4]

filter はコールバックが true を返した要素だけを集め、新しい配列を返します。元の配列は変更されません。

最初に一致したデータを取り出す際は「find」

条件にマッチする最初の要素だけを取得したいときは、find を使います。見つかった時点で処理を終了するので効率的です。

const numbers = [0, 1, 2, 3, 4, 5];

const firstMultipleOfThree = numbers.find(n => n % 3 === 0 && n > 0);

console.log(firstMultipleOfThree);

実行結果：

3

find は条件に合った最初の要素を返し、見つからない場合は undefined になります。

配列全体をチェックしたいときは filter、最初の一致だけで十分なら find を選ぶとよいでしょう。

＞＞DMM WEBCAMP フロントエンドコースの詳細はこちら

⑤：配列を順番通りに処理

配列を順番どおりに処理する方法としては、さまざまな方法があります。

ここでは、代表的な以下の4種類を紹介していきます。

• forEach
• mapメソッド
• reduceメソッド
• for of

forEach

forEachは配列の各要素に対し、順番に指定した処理を実行します。

戻り値はなく副作用のみ行うため、ログ出力や外部API呼び出しなど、結果を新しい配列にまとめずに処理したいときに向いています。

コールバックには要素・インデックス・元配列が渡され、内部でループを隠蔽するのでコードがシンプルになり可読性が高まるでしょう。

const nums = [1, 2, 3];

nums.forEach(n => console.log(n * 2));

実行結果：

2

4

6

上記では、配列内の数字に2を乗算した数字をそれぞれ表示しています。コードが簡略化されています。

mapメソッド

mapは配列の各要素を変換し、新しい配列を返します。元の配列は変更されず、コールバックの戻り値が新配列の対応する要素になります。

数値計算やオブジェクトから特定プロパティを抜き出すなど、純粋関数的に要素を変換したいときに使うとコードが明確になります。

const nums = [1, 2, 3];

const doubled = nums.map(n => n * 2);

console.log(doubled);

上記例では n * 2 を返すことで、元の数値を2倍した値だけを格納した新しい配列を作成しています。

元データはそのまま残るため、データの不変性を保ちながら変換処理を行いたいときに便利です。

実行結果：

[2, 4, 6]

reduceメソッド

reduceは配列を一つの値に集約するメソッドです。累積値（アキュムレータ）と現在の要素を引数に取り、戻り値を次の累積値として受け渡します。

初期値を指定することで合計や積、文字列結合、オブジェクト集計など多用途に使えるようになるので、大量データの集計処理が効率的になるメリットがあります。

const nums = [1, 2, 3, 4];

const sum = nums.reduce((acc, n) => acc + n, 0);

console.log(sum);

実行結果：

10

上記は初期値を 0 に設定し、各要素を順に加算して最終的な合計値を返しています。

初期値を省略すると配列の最初の要素が累積値になりますが、明示的に指定することで処理の意図が明確になり、安全性も高まります。