JavaScriptの配列とは？基礎から徹底解説｜宣言・操作・ループ・メソッドまで網羅

2026.03.02

JavaScriptの配列を象徴するカラフルなデータブロックと構造的なビジュアルイメージ — JavaScriptの配列構造とデータ操作の概念を視覚的に表現したイメージ

JavaScriptの配列は、複数のデータをまとめて扱うための基本的な仕組みです。Web制作やアプリ開発では、一覧表示・データ管理・APIレスポンス処理など、あらゆる場面で利用されます。

本記事では、JavaScriptの配列について、宣言方法から基本操作、代表的なメソッド、ループ処理までを体系的に解説します。基礎を確実に理解できる構成になっています。

配列とは何か

配列（Array）とは、複数の値をひとつの変数で管理できるデータ構造です。

通常の変数は1つの値しか保持できませんが、配列を使えば複数の値をまとめて扱えます。

const fruits = ["apple", "banana", "orange"];

このように、[]（角括弧）で囲んで定義します。

JavaScriptの基本構文について理解があいまいな場合は、
👉「JavaScriptの基本と仕組みを理解する」を先に確認すると理解が深まります。

配列の基本的な使い方

配列の宣言方法

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

配列は通常 const もしくは let で宣言します。

const：再代入しない場合
let：再代入する可能性がある場合

インデックスとは

配列の各要素にはインデックス番号が付きます。

const fruits = ["apple", "banana", "orange"];

console.log(fruits[0]); // apple
console.log(fruits[1]); // banana

インデックスは 0から始まる という点が重要です。

要素の変更

fruits[1] = "grape";

インデックスを指定すれば値を書き換えられます。

配列の長さを取得する

配列の要素数は length プロパティで取得できます。

const fruits = ["apple", "banana", "orange"];

console.log(fruits.length); // 3

ループ処理と組み合わせると便利です。

配列とループ処理

配列は繰り返し処理と組み合わせて使うことが多いです。

for文でのループ

const fruits = ["apple", "banana", "orange"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

for文の基本については
👉「JavaScriptの役割と構造」も参考になります。

forEachメソッド

より簡潔に書けるのが forEach です。

fruits.forEach(function(fruit) {
  console.log(fruit);
});

アロー関数を使うとさらに短くなります。

fruits.forEach(fruit => console.log(fruit));

アロー関数については
👉「JavaScriptの関数とは？基本と使い方」をあわせて読むと理解が深まります。

よく使う配列メソッド

JavaScriptの配列には便利なメソッドが多数用意されています。

push（末尾に追加）

fruits.push("melon");

pop（末尾を削除）

fruits.pop();

shift（先頭を削除）

fruits.shift();

unshift（先頭に追加）

fruits.unshift("strawberry");

includes（存在確認）

fruits.includes("apple"); // true or false

map・filter・reduceの基礎

モダンなJavaScriptでは特に重要なメソッドです。

map（配列を変換）

const numbers = [1, 2, 3];

const doubled = numbers.map(num => num * 2);

filter（条件に合うものを抽出）

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

const even = numbers.filter(num => num % 2 === 0);

reduce（1つの値にまとめる）

const numbers = [1, 2, 3];

const sum = numbers.reduce((total, num) => total + num, 0);

これらは実務で頻出のため、確実に理解しておくことが重要です。

配列はオブジェクトである

JavaScriptでは、配列も実はオブジェクトの一種です。

typeof [];
// "object"

JavaScriptのオブジェクト構造については
👉「JavaScriptのオブジェクトとは？基礎から解説」も参考になります。

多次元配列とは

配列の中に配列を入れることもできます。

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

console.log(matrix[0][1]); // 2

表形式データなどで利用されます。

配列とスプレッド構文

配列のコピーや結合に便利なのがスプレッド構文です。

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];

分割代入も可能です。

const [a, b] = arr1;

モダンJavaScriptの基礎として重要な文法です。

配列を理解するメリット

JavaScriptの配列を理解すると、以下のような処理が自在に書けるようになります。

APIレスポンスのデータ整形
商品一覧の表示
フォームデータの管理
DOM操作の効率化

Web制作では必須の知識です。

まとめ

JavaScriptの配列は、データを扱うための最重要概念のひとつです。

本記事で解説したポイントは以下の通りです。

配列は複数の値をまとめて扱う仕組み
インデックスは0から始まる
lengthで要素数を取得できる
push / pop などの基本メソッド
map / filter / reduce は実務で頻出
配列はオブジェクトの一種

配列を自在に扱えるようになると、JavaScriptの理解は一段深まります。

配列とあわせて学ぶことで、JavaScriptの基礎力が確実に向上します。