JavaScriptの配列とは？複数のデータをまとめて扱う方法を初心者向けに解説

プログラミングを学んでいると、「100人分のユーザー名を管理したい」「商品リストを表示させたい」といった、大量のデータを扱う場面に必ず直面します。

もし、1つずつ変数を作っていたらどうなるでしょうか？ const user1 = "田中"; const user2 = "佐藤"; ... と、気が遠くなるような作業が必要になりますし、後からデータを追加するのも一苦労です。

そんな時に欠かせないのが、今回解説する「配列（Array：はいれつ）」です。

配列をマスターすれば、大量のデータをたった1つの変数でスマートに管理し、効率的に処理できるようになります。本記事では、配列の作り方、データの取り出し方、そして実務で多用する便利なメソッドまで、初心者向けに解説します。

配列（Array）の基本：データを入れる「仕切りのある箱」
1. なぜ配列が必要なのか？
2. 配列の書き方（初期化）
インデックス（添字）：データの背番号を理解する
配列の長さを知る「length」プロパティ
1. lengthの活用シーン
主要な配列メソッド：データを自由自在に操作する
【中級者への入口】便利なモダンメソッド
1. 全員に同じ処理をする：forEach()
2. 特定の条件で探す：indexOf()/includes()
配列を扱う上での注意点とコツ
1. constで宣言しても中身は変えられる
2. 存在しないインデックスに注意
実践：簡易的な「買い物リスト」プログラム
まとめ：配列を制する者はデータを制す

配列（Array）の基本：データを入れる「仕切りのある箱」

配列を一言で表すと、「複数のデータに順番をつけて、1つの箱にまとめたもの」です。

なぜ配列が必要なのか？

例えば、RPGゲームのパーティーメンバーを管理する場合を考えてみましょう。

変数のみの場合：member1, member2, member3...と個別に管理。名前を変えるのも、並び替えるのも大変です。
配列を使う場合：members という1つの箱に全員を入れます。全員のHPを一度に回復させたり、新しい仲間を末尾に加えたりといった操作が驚くほど簡単になります。

配列の書き方（初期化）

JavaScriptで配列を作るには、半角のブラケット[ ]（角括弧）を使い、各データをカンマ , で区切ります。

// 数値の配列
const scores = [80, 90, 65, 70];

// 文字列の配列
const fruits = ["りんご", "バナナ", "みかん"];

// 中身が空の配列
const emptyList = [];

【関連記事】：データの種類（数値や文字列）について復習したい方は、「JavaScriptのデータ型とは？数値と文字列の違い・typeofの使い方を初心者向けに解説」を先にチェックしてみてください。

インデックス（添字）：データの背番号を理解する

配列の中に入れたデータには、自動的に「背番号」が割り振られます。これをインデックス（または添え字）と呼びます。

【重要】番号は「0」から始まる

ここが初心者が最も躓きやすいポイントです。プログラミングの世界では、数は 0 から数え始めます。

1番目のデータ：インデックス 0
2番目のデータ：インデックス 1
3番目のデータ：インデックス 2

データを取り出す方法

配列名の後ろに [番号] を付けることで、特定のデータにアクセスできます。

const colors = ["Red", "Green", "Blue"];

console.log(colors[0]); // 結果: "Red"
console.log(colors[1]); // 結果: "Green"

データの書き換え

インデックスを指定して、新しい値を代入することも可能です。

const pets = ["犬", "猫", "うさぎ"];
pets[1] = "ハムスター"; // 1番目（猫）を書き換え

console.log(pets); // 結果: ["犬", "ハムスター", "うさぎ"]

配列の長さを知る「length」プロパティ

「この配列には今、いくつデータが入っているのか？」を知りたいときは、 length を使います。

const stationery = ["ペン", "ノート", "消しゴム", "定規"];
console.log(stationery.length); // 結果: 4

lengthの活用シーン

length は、「繰り返し処理（for文）」と非常に相性が良いです。「データの数だけ処理を繰り返す」といった命令を書く際に必須となります。

【関連記事】：大量のデータを自動で処理する方法は、「JavaScriptのfor文とは？繰り返し処理の基本から配列操作まで解説」で詳しく解説しています。

主要な配列メソッド：データを自由自在に操作する

JavaScriptには、配列を操作するための便利な機能（メソッド）がたくさん用意されています。まずは「追加」と「削除」の基本4種を覚えましょう。

末尾にデータを追加：push()

配列の最後（一番後ろ）に新しいデータを追加します。実務で最も使われるメソッドです。

const members = ["田中", "佐藤"];
members.push("鈴木");
console.log(members); // ["田中", "佐藤", "鈴木"]

末尾のデータを削除：pop()

配列の最後にあるデータを1つ取り除きます。

const members = ["田中", "佐藤", "鈴木"];
members.pop();
console.log(members); // ["田中", "佐藤"]

先頭からデータを削除：shift()

配列の最初（0番目）のデータを取り除き、残りの要素を前に詰め合わせます。

const members = ["田中", "佐藤", "鈴木"];
members.shift();
console.log(members); // ["佐藤", "鈴木"]

先頭にデータを追加：unshift()

配列の最初に新しいデータを追加し、既存のデータを後ろにずらします。

const members = ["佐藤", "鈴木"];
members.unshift("高橋");
console.log(members); // ["高橋", "佐藤", "鈴木"]

【中級者への入口】便利なモダンメソッド

今のJavaScript開発では、for文を使わずにメソッドだけでスマートに処理を書くのが主流です。少し難しいですが、名前だけでも覚えておくと役立ちます。

全員に同じ処理をする：forEach()

配列の中身を1つずつ取り出して、順番に処理を行います。

const users = ["田中", "佐藤", "鈴木"];
users.forEach(function(user) {
  console.log(user + "さん、こんにちは！");
});

【関連記事】

JavaScriptのforEachとは？使い方とfor文との違いをわかりやすく解説【初心者OK】

特定の条件で探す：indexOf()/includes()

indexOf：そのデータが何番目にあるか探します。
includes：そのデータが含まれているか（true/false）を判定します。

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

配列を扱う上での注意点とコツ

constで宣言しても中身は変えられる

「constは定数だから変えられないのでは？」と思うかもしれませんが、配列の場合、「箱そのものを別の箱に取り替えること」はできませんが、「箱の中身を入れ替えること」は可能です。そのため、配列は基本的に const で宣言するのが一般的です。

存在しないインデックスに注意

例えば、データが3つしかないのに fruits[100] を呼び出すと、エラーにはならず undefined（未定義） が返ってきます。これが原因で計算が NaN になるバグが多いので注意しましょう。

実践：簡易的な「買い物リスト」プログラム

これまでの知識を組み合わせて、簡単なロジックを作ってみましょう。

// 1. 配列の作成
const cart = ["パン", "牛乳"];

// 2. 買い忘れを追加
cart.push("卵");
cart.push("肉");

// 3. やっぱり肉は高いからやめる（末尾削除）
cart.pop();

// 4. 現在のリストを表示
console.log("現在の買い物リストは以下の " + cart.length + " 点です。");

// 5. 1番目の項目を確認
console.log("最初に向かう売り場は：" + cart[0]);