【完全保存版】JavaScriptの配列を超詳しく解説！初心者でもわかる使い方と注意点

JavaScriptを学ぶ上で避けて通れないのが「配列（Array）」です。配列は、複数のデータをまとめて扱うための基本的なデータ構造であり、どんなアプリケーションでも頻繁に使われます。

この記事では、JavaScriptの配列の基本から応用までを初心者にもわかるように丁寧に解説します。配列の作成方法、要素の操作、ループ処理、便利なメソッドなどを4000文字超で徹底的に学びましょう！

---

目次

1. 配列とは何か？
2. 配列の作成方法
3. 配列の基本操作
4. for文・forEachで配列をループ処理
5. よく使う配列メソッド10選
6. スプレッド構文と分割代入
7. 多次元配列・入れ子配列
8. 配列とオブジェクトの違い
9. よくあるエラーと対処法
10. まとめ

---

1. 配列とは何か？

JavaScriptの配列とは、複数の値を1つの変数で管理するためのオブジェクトです。

const fruits = ['りんご', 'バナナ', 'オレンジ'];

このように、文字列を3つまとめて一つの変数fruitsに格納しています。

---

2. 配列の作成方法

配列は以下のように作成します：

リテラルを使う方法（最も基本）

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

new Array を使う（古い書き方）

const names = new Array('太郎', '花子');

空の配列を作る

const empty = [];

---

3. 配列の基本操作

要素の取り出し（インデックスアクセス）

const animals = ['猫', '犬', '鳥'];
console.log(animals[0]); // "猫"

インデックスは0から始まります！

要素の追加

animals.push('うさぎ'); // 末尾に追加
animals.unshift('ライオン'); // 先頭に追加

要素の削除

animals.pop(); // 末尾を削除
animals.shift(); // 先頭を削除

要素の書き換え

animals[1] = 'カメ';

---

4. for文・forEachで配列をループ処理

for文

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

for...of文（配列専用）

for (const animal of animals) {
  console.log(animal);
}

forEachメソッド

animals.forEach((animal, index) => {
  console.log(index, animal);
});

---

5. よく使う配列メソッド10選

① map（配列を変換）

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // [2, 4, 6]

② filter（条件に合う要素を抽出）

const result = numbers.filter(n => n > 1); // [2, 3]

③ find（条件に合う最初の1つ）

const found = numbers.find(n => n === 2); // 2

④ some（条件を満たす要素が1つでもあるか）

const hasEven = numbers.some(n => n % 2 === 0); // true

⑤ every（すべての要素が条件を満たすか）

const allPositive = numbers.every(n => n > 0); // true

⑥ reduce（合計や平均を出す）

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

⑦ includes（値が含まれるか）

numbers.includes(2); // true

⑧ indexOf（値の位置）

numbers.indexOf(2); // 1

⑨ slice（部分配列を取り出す）

numbers.slice(1, 3); // [2, 3]

⑩ splice（配列を直接変更）

numbers.splice(1, 1); // index1の要素を1つ削除

---

6. スプレッド構文と分割代入

スプレッド構文（展開）

const a = [1, 2];
const b = [...a, 3, 4]; // [1, 2, 3, 4]

分割代入

const [first, second] = ['a', 'b', 'c'];
console.log(first); // 'a'

---

7. 多次元配列・入れ子配列

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

ネストが深くなりすぎると扱いが難しくなるので、データ構造を整理しましょう。

---

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

比較	配列（Array）	オブジェクト（Object）
用途	順番のあるデータ	キーと値のセット
添字	数値インデックス	任意のキー
イテレート	for, forEach, mapなど	for...in や Object.keys

---

9. よくあるエラーと対処法

undefinedを取得してしまう

const arr = ['a', 'b'];
console.log(arr[3]); // undefined

→ 範囲外のインデックスにアクセスしています。arr.lengthを確認しましょう。

---

TypeError: arr.map is not a function

const arr = null;
arr.map(...) // ← nullにはmapは使えない

→ 配列かどうかを事前にチェック！

if (Array.isArray(arr)) {
  arr.map(...);
}

---

forEachやmap内でreturnが効かない？

const result = [1, 2, 3].forEach(num => {
  return num * 2; // このreturnは意味がない
});
console.log(result); // undefined

→ forEachは値を返しません。結果が欲しいならmap()を使いましょう！

---

10. まとめ

JavaScriptの配列は非常にパワフルで、柔軟なデータ操作が可能です。今回紹介した内容はすべて日常的に使われるものばかりです。

特に初心者がつまずきやすいポイントとしては：

• map と forEach の違い
• splice と slice の違い
• 多次元配列のアクセス
• undefined エラーの原因

などがあります。最初は覚えることが多くて大変かもしれませんが、手を動かして実験することが理解への近道です。

---

✅ 練習課題に挑戦しよう！

最後に、以下の課題に挑戦してみましょう。

• 数字の配列を作って、偶数だけを取り出してみよう
• 好きな食べ物リストを配列で作って、ランダムに1つ表示してみよう
• スプレッド構文を使って配列をコピーしてみよう

---

✍️ おわりに

配列を制する者はJavaScriptを制す、と言っても過言ではありません。日々の学習や開発の中で、配列の操作に慣れていきましょう！

次回は「オブジェクト」についての超解説記事も書いていく予定です。お楽しみに！