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

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

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

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

JavaScriptの配列（Array）とは？

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

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

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

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

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

【初心者向け】配列を使う基本方法を紹介

まったくの初心者で、これから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 に設定し、各要素を順に加算して最終的な合計値を返しています。

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

for of

for ofは配列やイテラブルを順にループ処理する構文で、要素を直接変数に代入して扱えます。

コールバック不要で可読性が高く、条件分岐や複雑な処理を含むループが書きやすいです。

インデックスが不要な場合に最適で、breakやcontinueも自然に使えます。

const nums = [1, 2, 3];
for (const n of nums) {
  console.log(n + 1);
}

実行結果：

2
3
4

各反復で要素が直接変数 n に代入されるので、コード内で自由に操作できます。要素を逐一処理したいケースに最適でしょう。

⑥：配列のコピー

JavaScriptの配列は参照型なので、変数に代入すると同じデータを指してしまい、一方を変更すると元の配列も更新されてしまいます。

この意図しない副作用を防ぐには、slice() メソッドかスプレッド構文（[…]）を使って新しい配列を作成します。

const original = ['apple', 100, true];
const copy1 = original.slice();
const copy2 = [...original];

copy1.push('new');
copy2.push('another');

console.log(original);
console.log(copy1);
console.log(copy2);

実行結果：

['apple', 100, true]
['apple', 100, true, 'new']
['apple', 100, true, 'another']

1行目で元になる配列 original を定義、3行目の slice() と4行目のスプレッド構文（[…]）がコピー処理で、新しい配列を作成しています。

その後、push で要素を追加していますが、コピー先だけが変わるため、元の original は影響を受けません。

⑦：配列の一部要素削除・追加

配列の一部の要素を削除したり、逆に追加するようなときは、splice メソッドが用いられます。

const list = ['a', 'b', 'c', 'd'];

// インデックス2から1つ削除し、その位置に'x'を追加（削除＋挿入）
list.splice(2, 1, 'x');
console.log(list);
// => ['a', 'b', 'x', 'd']

// インデックス1に要素を0個削除して'y'を追加（挿入のみ）
list.splice(1, 0, 'y');
console.log(list);
// => ['a', 'y', 'b', 'x', 'd']

実行結果：

['a', 'b', 'x', 'd']
['a', 'y', 'b', 'x', 'd']

上記のサンプルは、

splice(start, deleteCount, ...items)

は配列の指定位置（start）から deleteCount 個の要素を削除していて、その位置に任意の要素（items）を挿入しています。

また最初の呼び出しではインデックス2の ‘c’ を削除し、’x’ を挿入しています。2回目は deleteCount を0にすることで要素削除なしに ‘y’ をインデックス1へ追加しています。

どちらも元の配列を直接更新する点に注意が必要です。

⑧：配列の分割

配列を分割させたいときに用いられるのが、sliceメソッドです。slice() メソッドは元の配列を変更せず、新しい配列を返してくれるものです。

使用例としてサンプルコードを見てみましょう。

const fruits = ['banana', 'strawberry', 'apple', 'melon'];

// インデックス2以降を新しい配列として取得（分割）
const tail = fruits.slice(2);
console.log(tail);
// => ['apple', 'melon']

// インデックス1から3（3は含まない）までを切り出す
const middle = fruits.slice(1, 3);
console.log(middle);
// => ['strawberry', 'apple']

実行結果：

['apple', 'melon']
['strawberry', 'apple']

slice(2) はインデックス2以降を切り出しており、ここで配列の分割が実行されています。

一方、slice(1, 3) は開始位置1から終了位置3（3番目の要素は含まれない）までを取り出すため、2番目と3番目の要素だけが新しい配列になります。

⑨：配列が条件に一致するかチェック

条件に一致する配列かどうか、をチェックするのであれば、用いられるのはevery メソッドになります。

every は「配列内のすべての要素がコールバック関数の条件を満たすか」をチェックするメソッドで、条件判定は以下のサンプルコード

numbers.every(n => n >= 0)

の部分で行われています。

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

// 全ての要素が 0 以上か確認
const allNonNegative = numbers.every(n => n >= 0);
console.log(allNonNegative);
// => true

// 少なくとも一つが 5 以上か確認
const anyFiveOrMore = numbers.some(n => n >= 5);
console.log(anyFiveOrMore);
// => false

実行結果：

true
false

サンプル内の some は配列の中に一つでも条件に合う要素があれば true を返し、今回の numbers.some(n => n >= 5) で判定しています。

どちらも、元の配列を変更していません。

まとめ：配列の基本操作をマスターしよう

配列はJavaScriptに限らず、多くのプログラミング言語でデータ操作の基盤となる重要な概念です。

値の追加や削除、検索、変換など、基本的な操作を身につけると、複雑なデータ処理もシンプルなコードで書けるようになります。

この記事で紹介したサンプルを参考に、繰り返し手を動かしてアウトプットを行うことで、配列操作の感覚が自然と身につくでしょう。

配列を自在に扱えるようになると、開発できるアプリケーションの幅が大きく広がるはずです。

とはいえ、ここまでの内容を読んでも、

• JavaScript の配列操作がまだピンとこない…
• コツを掴めば簡単なのかもしれないけど、それが難しい…

と悩むあなたにこそ、 DMM WEBCAMP のフロントエンドコースがおすすめです。

Vue.js と Firebase を使った実践的なカリキュラムで、配列操作はもちろん非同期処理やリアルタイム機能まで短期間でマスターできます。

週２回のメンタリングと無制限の課題レビューで「つまずき」をすぐに解消。独学では難しいコツもプロのサポートで確実に身につくでしょう。

またプログラミングスクールは高いイメージをもつ方も多いと思いますが、本コースは経済産業省が認定する「リスキリングを通じたキャリアアップ支援事業」の認定講座となっています。

そのため、最大70%、金額にして213,054円のキャッシュバックが適応されるので、お金をかけたくない方でも安心です。

そんな悩みでも無料で相談できるので、まずは以下のリンクからぜひお気軽にご相談ください！

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