JavaScriptの配列（Array）とは？初心者向けに基礎からやさしく解説

1. 配列って何？（Arrayとは？）

1. 配列って何？（Arrayとは？）

配列（Array）は、複数の値をひとまとめにできる箱です。たとえば「好きな果物」をひとつだけじゃなく、いくつでも入れられます。

普通の変数は「りんご」を１つしか入れられませんが、配列なら「りんご」「バナナ」「みかん」を３つ一度に入れられます。

2. 配列の作り方と中身を見る方法

2. 配列の作り方と中身を見る方法

JavaScriptでは、配列を作る方法は２通りあります。

• []（ブラケット）を使う方法
• new Array()を使う方法（あまり使われません）

let fruits = ["りんご", "バナナ", "みかん"];
let numbers = new Array(10, 20, 30);
console.log(fruits);
console.log(numbers);

["りんご","バナナ","みかん"]
[10,20,30]

配列の中身はconsole.logで確認できます。

3. インデックスで中身を取り出す

3. インデックスで中身を取り出す

配列は位置情報（インデックス）で中身を取り出します。インデックスは「0から始まる番号」です。

let fruits = ["りんご","バナナ","みかん"];
console.log(fruits[0]); // りんご
console.log(fruits[2]); // みかん

りんご
みかん

最初の要素は0、次は1、というふうに順番に番号がついています。

4. 要素を追加・変更・削除しよう

4. 要素を追加・変更・削除しよう

配列を使うときによくやる操作です。

• push → 末尾に追加
• indexで代入 → 指定した位置を変更
• splice → 指定位置を削除

// 追加
fruits.push("ぶどう");
// 変更
fruits[1] = "メロン";
// 削除（2つ目から1つ）
fruits.splice(2,1);
console.log(fruits);

["りんご","メロン"]

5. 配列の長さを調べる

5. 配列の長さを調べる

lengthプロパティで、配列にいくつ要素があるか確認できます。

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

2

6. 繰り返し使うと便利なループ処理

6. 繰り返し使うと便利なループ処理

配列を順番に使うときは、forループやforEachメソッドを使います。

// for ループ
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// forEach
fruits.forEach(function(item, index) {
  console.log(index, item);
});

りんご
メロン
0 りんご
1 メロン

7. 配列と文字列の違いに注意！

7. 配列と文字列の違いに注意！

文字列も似たように添字で取り出せますが、文字列は「書いてある文字」を読み取る箱、配列は「データを自由に入れ替えできる箱」です。

たとえば文字列はfruits[0] = "ぶどう"のように変更できませんが、配列はできます。

8. 空の配列から始める方法

8. 空の配列から始める方法

最初は何も入っていない箱（空の配列）を用意することも多いです。

let list = [];
list.push("項目1");
list.push("項目2");
console.log(list);

["項目1","項目2"]

9. 配列に対する便利なメソッド

9. 配列に対する便利なメソッド

JavaScriptの配列には他にも便利な機能がたくさんあります。代表的なものは：

• map: すべての要素を変換して新しい配列を作る
• filter: 条件に合う要素だけ集める
• find: 条件に合う最初の要素を見つける

まとめ

まとめ

JavaScriptの配列を基礎から振り返ろう

JavaScriptの配列（Array）は、プログラミング初心者にとって最初にしっかり理解しておきたい重要な仕組みの一つです。配列とは、複数の値を順番にまとめて管理できるデータ構造であり、数値や文字列、真偽値などさまざまなデータを一つの変数で扱える点が大きな特徴です。単一の変数では一つの値しか保存できませんが、配列を使うことで関連する情報を一覧のようにまとめて管理できます。

記事で紹介したように、配列はブラケットを使って簡単に作成でき、インデックスと呼ばれる番号を指定することで中身を取り出せます。このインデックスはゼロから始まるというルールがあり、初心者が混乱しやすいポイントですが、慣れてくると自然に使いこなせるようになります。配列の順番が保証されている点は、データを順序通りに扱いたい場面で非常に役立ちます。

配列操作を覚えるとできることが広がる

配列の基本操作として、要素の追加、変更、削除があります。pushを使えば末尾にデータを追加でき、インデックスを指定して代入すれば既存の要素を書き換えられます。また、spliceを使うことで特定の位置のデータを削除することも可能です。これらの操作を理解することで、JavaScriptで動的にデータを扱うプログラムが書けるようになります。

lengthプロパティを使えば配列の長さを取得できるため、要素数に応じた処理を書くことができます。さらに、forループやforEachを組み合わせることで、配列の中身を順番に処理することも簡単になります。配列とループ処理はセットで使われることが多く、WebアプリケーションやJavaScriptの実務でも頻繁に登場します。

配列を使った基本的なサンプルコード

let items = [];
items.push("商品A");
items.push("商品B");
items.push("商品C");

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

このように、空の配列からスタートしてデータを追加し、ループで順番に処理する流れは、JavaScriptの配列を学ぶうえでの基本パターンです。買い物リストやタスク管理、ユーザー一覧など、実際のWeb開発でも同じ考え方が使われています。

配列と文字列の違いを意識する

配列と文字列は見た目が似ているため混同しがちですが、性質は大きく異なります。文字列は内容を直接変更できないのに対し、配列は中身を自由に追加したり書き換えたりできます。この違いを理解しておくことで、「なぜエラーが出るのか」「なぜ値が変わらないのか」といった疑問を解消しやすくなります。

JavaScriptの配列は、後半で紹介したmapやfilter、findといった便利なメソッドを使うことで、より柔軟で読みやすいコードを書けるようになります。まずは基本をしっかり押さえ、少しずつ応用へ進むことが大切です。