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

プログラミングを学んでいると、「関連するたくさんのデータを、もっとスッキリ管理したい」と思う場面が出てきます。

たとえば、10人分の学生の名前や、ショッピングサイトにある20個の商品リストを扱うとき、一つ変数を作っていてはコードがバラバラになり、管理が追いつきません。

そんな時に欠かせないのが「配列（はいれつ）」です。
配列を使えるようになると、大量のデータを一つのグループとしてまとめ、効率よく処理できるようになります。本記事では、配列の仕組みから、データの取り出し方、基本の操作までを、初心者の方に向けてわかりやすく解説します。

JavaScriptの配列とは？「仕切りのある長い箱」のイメージ

別記事で学んだ「変数」は、一つの箱に一つのデータを入れるものでした。
対して「配列」は、一つの大きな箱の中にたくさんの仕切りがあり、複数のデータを順番に並べて保管できるものです。

なぜ配列が必要なのか？
例えば、5つの果物の名前を管理した場合、変数だけだとこうなります。

const fruit1 = "りんご";
const fruit2 = "バナナ";
const fruit3 = "オレンジ";
const fruit4 = "ぶどう";
const fruit5 = "いちご";

これでは、果物が増えるたびに新しい変数名を作らなければならず、後から「すべての果物を表示する」といった命令を出すのも一苦労です。

配列を使えば、これらを一つのfruitsという名前のリストにまとめることができます。

JavaScriptで配列を作るには、[ ]（ブラケット）を使い、データをカンマ（ , ）で区切って並べます。

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

インデックス（添字）は「0」から始まる！

配列の最大の特徴であり、初心者が最もつまずきやすいポイントが「数え方」です。
配列に入れたデータには、先頭から順番に「何番目か」を表す番号が振られます。これをインデックス（または添字）と呼びます。

驚くことに、プログラミングの世界では、数は1ではなく0から数え始めます。

管理人

管理人も1番目のデータをインデックス１だと勘違いしていました。

JavaScript配列のデータの取り出し方
特定の中身を取り出したいときは、配列名[インデックス]の形で書きます。

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

console.log(fruits[0]); // 「りんご」が表示される
console.log(fruits[1]); // 「バナナ」が表示される

もし、存在しない番号（たとえばfruits[10]など）を指定すると、JavaScriptは「定義されていない」という意味のundefinedを返します。

配列は、一度作った後から中身を書き換えたり、新しくデータを追加したりすることができます。

中身を上書きする
特定の場所のデータを入れ替えたいときは、変数と同じように代入するだけです。

let fruits = ["りんご", "バナナ", "オレンジ"];
fruits[1] = "ぶどう"; // 1番目（バナナ）を「ぶどう」に書き換え

console.log(fruits); // ["りんご", "ぶどう", "オレンジ"]

データの個数を知る（length）
配列に今、何個のデータが入っているかを知るには、.lengthという命令を使います。

const fruits = ["りんご", "バナナ", "オレンジ"];
console.log(fruits.length); // 「3」が表示される

このlengthは、この後解説する「繰り返し処理」で非常に重要な役割を果たします。

データの追加（push）
配列の最後に新しくデータを付け加えたいときは、pushを使います。

const fruits = ["りんご", "バナナ"];
fruits.push("メロン");

console.log(fruits); // ["りんご", "バナナ", "メロン"]

配列がその真価を発揮するのは、「for文（繰り返し処理）」と組み合わせたときです。

「配列の0番目から最後の番目までを順番に表示する」という処理は、実務で最もよく使われるパターンの一つです。

const colors = ["赤", "青", "緑", "黄色"];

for (let i = 0; i < colors.length; i++) {
  console.log(colors[i] + "色のペンがあります");
}

このコードの仕組み

これを使えば、データが100個あっても1,000個あっても、わずか3行のコードですべてを処理できます。

合わせて読みたい

配列をマスターすることは、プログラミングで「大量のデータ」を自由に操れるようになることを意味します。

まずは自分の好きな音楽のリストや、今日やりたいことリストを配列にしてみて、それをfor文で一つずつ表示させる練習をしてみてください。