カテゴリ: JavaScript 更新日: 2025/07/29

JavaScriptの配列(Array)とは?初心者向けに基礎からやさしく解説

JavaScriptの配列(Array)とは?初心者向けに基礎からやさしく解説
JavaScriptの配列(Array)とは?初心者向けに基礎からやさしく解説

先生と生徒の会話形式で理解しよう

生徒

「先生、配列って何ですか?リストみたいなものですか?」

先生

「はい。JavaScriptの配列は、複数のデータを順番に並べて保存できる便利な‘リスト’です。よく使うので覚えましょう!」

生徒

「順番に並べるってどういう意味ですか?」

先生

「たとえば買い物リストのように、りんご、バナナ、みかんと順番に入っているイメージです。」

1. 配列って何?(Arrayとは?)

1. 配列って何?(Arrayとは?)
1. 配列って何?(Arrayとは?)

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

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

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

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

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

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

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

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

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

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

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

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


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

りんご
みかん

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

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

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

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

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

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

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

5. 配列の長さを調べる

5. 配列の長さを調べる
5. 配列の長さを調べる

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


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

2

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

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. 配列と文字列の違いに注意!
7. 配列と文字列の違いに注意!

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

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

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

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

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


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

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

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

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

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

  • map: すべての要素を変換して新しい配列を作る
  • filter: 条件に合う要素だけ集める
  • find: 条件に合う最初の要素を見つける
カテゴリの一覧へ
新着記事
TypeScriptのEnum(列挙型)の使い方を解説!初心者でもわかる定数のグループ化
TypeScriptとは?JavaScriptとの違いと導入メリットを徹底解説
TypeScriptとJavaScriptでの変数宣言の違い(型注釈あり/なし)
TypeScriptのインターフェース(interface)とは?基本構文と使い方
人気記事
No.1
Java&Spring記事人気No1
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.3
Java&Spring記事人気No3
TypeScriptの始め方:開発環境の構築手順【初心者向け】
No.4
Java&Spring記事人気No4
JavaScriptのMathオブジェクトの基本メソッド一覧と使い方