初心者から実践までわかる！JavaScript配列の使い方と便利メソッド徹底解説

JavaScriptでプログラミングを始めると、必ず出会うのが「配列」です。配列は複数のデータをまとめて管理できる便利なデータ構造であり、Web開発では欠かせない存在です。例えば、ユーザー一覧を表示する、商品のリストを扱う、検索結果を管理するなど、日常的に配列を操作する場面が多くあります。しかし、配列の基本を理解していないと、効率の悪いコードになってしまったり、思わぬバグを生む原因にもなります。本記事では、JavaScriptにおける配列の基礎から、よく使われるメソッド、実践的な使い方までを詳しく解説します。初心者の方はもちろん、改めて整理したい中級者の方にも役立つ内容になっています。

---

配列とは何か？

配列とは、複数のデータを一つの変数にまとめて格納するための仕組みです。JavaScriptにおいては、配列はオブジェクトの一種であり、インデックス（添字）を使って要素にアクセスします。

例：

const fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // apple
console.log(fruits[2]); // orange

このように、配列は同じ型の値だけでなく、異なる型を混在させることもできます。

const mixed = [1, "hello", true, { name: "Taro" }];

---

配列の作成方法

配列を作成する方法はいくつかあります。

リテラルを使う方法

もっとも一般的なのが、[] を使う方法です。

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

Arrayコンストラクタを使う方法

const arr = new Array(3); // 要素数3の空配列
arr[0] = "A";
arr[1] = "B";
arr[2] = "C";

ただし、基本的にはリテラルで書くほうがわかりやすく、推奨されます。

---

配列の基本操作

要素の追加

const fruits = ["apple", "banana"];
fruits.push("orange"); // 配列の末尾に追加
console.log(fruits); // ["apple", "banana", "orange"]

要素の削除

fruits.pop(); // 末尾の要素を削除
console.log(fruits); // ["apple", "banana"]

要素へのアクセス

console.log(fruits[0]); // apple
console.log(fruits.length); // 要素数

---

配列の便利メソッド

JavaScript配列には多くの便利なメソッドがあります。ここではよく使うものを紹介します。

forEach

全ての要素に処理を実行します。

const numbers = [1, 2, 3];
numbers.forEach(num => {
  console.log(num * 2);
});

map

新しい配列を作成します。

const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

filter

条件に合う要素だけを取り出します。

const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2]

reduce

累積計算に使います。

const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 6

find

条件に合う最初の要素を返します。

const firstEven = numbers.find(num => num % 2 === 0);
console.log(firstEven); // 2

---

配列とループ処理

配列の操作に欠かせないのがループです。

for文

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

for…of

for (const num of numbers) {
  console.log(num);
}

for…in

配列よりもオブジェクトで使う方が一般的ですが、インデックスを取得できます。

for (const index in numbers) {
  console.log(index, numbers[index]);
}

---

配列の応用例

ユーザーリストの管理

const users = [
  { id: 1, name: "Taro" },
  { id: 2, name: "Hanako" },
  { id: 3, name: "Jiro" }
];

const names = users.map(user => user.name);
console.log(names); // ["Taro", "Hanako", "Jiro"]

重複を取り除く

Set を使うことで簡単に重複を削除できます。

const items = ["apple", "banana", "apple", "orange"];
const uniqueItems = [...new Set(items)];
console.log(uniqueItems); // ["apple", "banana", "orange"]

ソート

const numbers = [10, 5, 8, 3];
numbers.sort((a, b) => a - b);
console.log(numbers); // [3, 5, 8, 10]

---

配列とオブジェクトの違い

配列は順序を持つデータ構造ですが、オブジェクトはキーと値のペアで管理します。

const person = { name: "Taro", age: 20 };
const array = ["Taro", 20];

配列は順番が重要なデータに適しており、オブジェクトは属性を持つデータに適しています。

---

実践的な配列操作のテクニック

多次元配列

const matrix = [
  [1, 2],
  [3, 4],
  [5, 6]
];
console.log(matrix[1][1]); // 4

配列のコピー

const arr = [1, 2, 3];
const copy = [...arr];

配列の結合

const a = [1, 2];
const b = [3, 4];
const merged = [...a, ...b];
console.log(merged); // [1, 2, 3, 4]

---

まとめ

JavaScriptの配列は、基本的なデータの集合管理から、高度なデータ処理まで幅広く活用できる重要な機能です。基礎的な操作（push、pop、lengthなど）を押さえることはもちろん、map や filter、reduce などの高階関数を使いこなせば、効率的で読みやすいコードを書くことができます。また、Setを使った重複削除、スプレッド構文を使ったコピーや結合なども日常的に役立つテクニックです。ぜひ実際の開発で試してみて、配列操作のスキルを自分のものにしてください。