配列はいれつ

I. 配列はいれつ（Array）の基本

たくさんのデータをバラバラに管理するのは大変です。そこで使うのが「配列はいれつ（はいれつ）」という、複数のデータをひとつにまとめて管理できるリストのような道具です。

配列はいれつ（はいれつ）は「ならんだ箱」

たくさんのデータを、ひとつのグループとしてまとめたいときに、「配列はいれつ」を使います。留学生のみなさんには、「番号がついたロッカー」 や 「番号がついた部屋が並んでいるマンション」 をイメージすると分かりやすくなります！

Tip

漢字のヒント 「配」 は「くばる」、「列」 は「ならぶ」という意味です。みんなが並んでいる様子をイメージすると、覚えやすいですよ！

[ ] （角（かく）かっこ）

JavaScriptで配列はいれつ（はいれつ）を使うとき、必ず出てくるのが [ ]（角（かく）かっこ） です。

大きく分けて、2つの使い方があります。

配列はいれつを「作る」ときの `[ ]`

→「新しいマンションを建てる」イメージ

一番はじめに、中身（なかみ）をまとめて入れるときに使います。

const colors = ["赤", "青", "黄（き）"];

[ ：ここからマンションが始まります。
, ：部屋（へや）と部屋の間の「かべ」です。
] ：ここでマンションが終わります。

中身を「指定する」ときの `[ ]`

→「部屋番号（へやばんごう）で呼ぶ」イメージ

作ったあとで、「○番目のデータがほしい！」というときに使います。

console.log(colors[0]); // 「赤」が出てくる

ここが大事！「0番」から始まるルール

マンションの「1号室ごうしつ（いちごうしつ）」は、プログラミングでは [0] と書きます。

1つめ： colors[0]
2つめ： colors[1]
3つめ： colors[2]

Tip

覚え方： プログラミングの世界では、「まだ一歩いっぽ（いっぽ）も動いていない状態」を 0 と考えます。だから最初が 0 なんです。 「1つめは 0（ゼロ）！」 と心の中で3回唱となえてください。これだけで、バグが半分に減りますよ！

中身を「書きかえる」ときの `[ ]`

→「ロッカーの中身を入いれ替かえる」イメージ

特定のロッカー番号を指定して、中身を新しくすることもできます。

const snacks = ["チョコ", "グミ"];

snacks[1] = "アイス"; // 1番ロッカー（2つめ）のグミを、アイスに変える

console.log(snacks); // ["チョコ", "アイス"]

まとめ：`[ ]` の役割（やくわり）

使い方	やっていること	例たとえ話
`[a, b, c]`	配列はいれつを作る	マンションを建てる
`[0]`	データを取り出す	部屋をノックする
`[0] = "x"`	データを入いれ替かえる	住人を入いれ替かえる

Note

よくあるミス： 全角ぜんかくの ［］ を使ってしまうとエラーになります。必ず半角はんかくの [ ] を使いましょう！

配列はいれつの要素

配列はいれつのひとつひとつの箱の中に入っているデータを配列はいれつの「要素（ようそ）」と言います。

配列はいれつの要素の数はlengthプロパティで、知ることができます。オブジェクトのプロパティを取り出すときは、「.（ドット）」 を使います。

fruits.length → 今、箱がいくつあるか（3つ）教えてくれます。

console.log(fruits.length); // 3 と表示（ひょうじ）されます。

留学生へのアドバイス

いかがでしょうか？「0から始まるリスト」のイメージはつかめましたか？

II. よく使うプロパティ・メソッド・演算えんざん子

配列はいれつには、中身を操作するための「道具（メソッド）」や「情報（プロパティ）」、そして「特別な記号（演算えんざん子）」がたくさんあります。

留学生の方に特に覚えてほしい、「これだけは外せない！」という便利なリストをまとめました。

よく使うプロパティ（配列はいれつの情報）

プロパティは、配列はいれつが持っている「データ」のことです。

`length`（レングス）

配列はいれつの中に、今いくつデータが入っているかを教えてくれます。

const students = ["マリア", "ジョン", "リー"];

console.log(students.length); // 3 が出る

イメージ： 列に並んでいる人の数をパッと数えるリーダーのような存在です。

So What?（なぜ大切なの？）

配列はいれつの .length プロパティを使うことで、「データが今いくつあるか」を常に知ることができます。これにより、データの数が増えたり減ったりしても、プログラムを書かき直なおさずに柔軟じゅうなんに対応たいおうできるようになります。

覚えたい便利なメソッド（道具）

配列はいれつ操作のメソッド

配列はいれつには、中身を操作（そうさ）するための便利なメソッドがたくさんあります。

代表的（だいひょうてき）なメソッドを、**「元の配列はいれつが変わるかどうか」**と 「どこを操作するか」 に注目して、まとめて解説します。

配列はいれつを 「電車（でんしゃ）の車両しゃりょう（しゃりょう）」 や 「人の列（れつ）」 に例たとえて説明するのが一番わかりやすいです。

`push`（プッシュ）：おしりに追加する

一番最後（右側）に、新しいデータを追加します。

イメージ： 電車の最後に、新しい車両しゃりょうをつなげる。
元の配列はいれつ： 変わります。

const train = ["車両（しゃりょう）A", "車両（しゃりょう）B"];

train.push("車両（しゃりょう）C"); 

console.log(train); // ["車両（しゃりょう）A", "車両（しゃりょう）B", "車両（しゃりょう）C"]

`pop`（ポップ）：おしりをひとつ消す

一番最後（右側）のデータを1つ取とり除のぞきます。

イメージ： 電車の最後の車両しゃりょうを切り離はな（はな）す。
元の配列はいれつ： 変わります。

const train = ["車両（しゃりょう）A", "車両（しゃりょう）B", "車両（しゃりょう）C"];

const last = train.pop(); 

console.log(last);  // "車両（しゃりょう）C" （消えたもの）
console.log(train); // ["車両（しゃりょう）A", "車両（しゃりょう）B"]

`shift`（シフト）：先頭をひとつ消す

一番最初（左側・0番目）のデータを消して、残りのデータを前にずらします。

イメージ： お店の行列で、先頭の人が店に入り、後ろの人が全員前にずれる。
元の配列はいれつ： 変わります。

const queue = ["1番の人", "2番の人", "3番の人"];

queue.shift();
console.log(queue); // ["2番の人", "3番の人"] （みんな前にずれた！）

`slice`（スライス）：一部をコピーする

指定（してい）した場所だけを、別の新しい配列はいれつとして取り出します。

イメージ： 写真を撮（と）るようなものです。景色（元の配列はいれつ）はそのままで、必要な部分だけを切きり取とります。
元の配列はいれつ： 変わりません（ここが重要！）。

const members = ["A", "B", "C", "D"];

// 1番目から3番目の「手前」までコピー
const sub = members.slice(1, 3); 

console.log(sub);     // ["B", "C"]
console.log(members); // ["A", "B", "C", "D"] （元の配列（はいれつ）はそのまま！）

`unshift`（アンシフト）:先頭にひとつ追加する**

配列はいれつの**一番最初（先頭）**に、新しいデータを追加します。

イメージ： 行列の一番前に割り込み（わりこみ）をする感じです。
元の配列はいれつ： 変わります。

let queue = ["2番の人", "3番の人"];

// unshift を使って、一番前に「1番の人」を入れます
queue.unshift("1番の人");

// 中身を確認（かくにん）してみましょう
console.log(queue);   // 結果：["1番の人", "2番の人", "3番の人"]

`splice`（スプライス）:好きな場所にデータを出し入れする

配列はいれつの好きな場所のデータを消したり、新しく入れたりします。

イメージ： 「手術（しゅじゅつ）」です。悪い部分を切きり取とったり、新しい部品を埋（う）め込んだりします。
元の配列はいれつ： 変わります。

コードの書きかた（ルール）

splice のうしろのカッコ ( ) には、2つの数字を書きます。

<ruby>配列<rt>はいれつ</rt></ruby>名.splice(スタートする番号, 消したい数);

1つめの数字：何番目（インデックス）から消し始めるか？
2つめの数字：そこから何個（いくつ）消すか？

入いれ替かえる例れい

const colors = ["赤", "青", "緑"];
// 1番目（青）を消して、代わりに「黄（き）」を入れる
colors.splice(1, 1, "黄（き）"); 
console.log(colors); // ["赤", "黄（き）", "緑"]

削除する例れい

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

// 「バナナ」を消してみましょう
// バナナは [1] 番目（2つめ）です。
fruits.splice(1, 1);

// 中身を確認（かくにん）します
console.log(fruits); 
// 結果：["りんご", "オレンジ", "メロン"] （バナナがいなくなりました！）

`includes`（インクルーズ）:デーがあるかないかを調べる

そのデータが配列はいれつの中にあるかないかを調べます。

イメージ： 探し物を見つける「警察犬」です。
答え： true（ある）か false（ない）で返ってきます。

// カバンの中に「りんご」「ペン」「ノート」が入っています
const myBag = ["りんご", "ペン", "ノート"];

// 「ペン」が入っているかチェックします
const hasPen = myBag.includes("ペン");
console.log(hasPen); // 結果：true（あります！）

// 「バナナ」が入っているかチェックします
const hasBanana = myBag.includes("バナナ");
console.log(hasBanana); // 結果：false（ありません...）

`delete` 演算えんざん子（デリート）

特定の場所のデータを消しますが、注意が必要です。

注意： データは消えますが、「箱（部屋）」は残ったままになります。部屋が「空（empty）」の状態になり、配列はいれつの長さ（length）も変わりません。

const snacks = ["チョコ", "グミ", "アメ"];
delete snacks[1]; 

console.log(snacks); // ["チョコ", <empty>, "アメ"]
console.log(snacks.length); // 3 のまま！（穴があいた状態）

Important

留学生へのアドバイス： 配列はいれつからきれいにデータを消したいときは、delete ではなく splice を使うように教えてあげてください。delete は「穴」があくので、あまり使いません。

スプレッド演算えんざん子 `...` （てん・てん・てん）

配列はいれつの中身を バラバラにして取り出す 魔法まほうの記号です。

イメージ： 袋に入ったお菓子を、テーブルの上に全部ザーッと広げる感じです。

const groupA = ["A", "B"];
const groupB = ["C", "D"];

// 2つの配列（はいれつ）を合体させて、新しい配列（はいれつ）を作る
const all = [...groupA, ...groupB];
console.log(all); // ["A", "B", "C", "D"]

比較（ひかく）テーブル

種類	名前	場所	動うごき	元の配列はいれつは？
プロパティ	`length`	すべて	数を数える	変わらない
メソッド	push	最後	追加する	変わる
メソッド	pop	最後	消す	変わる
メソッド	shift	最初	消す（ずれる）	変わる
メソッド	slice	どこでも	コピーする	変わらない
メソッド	`unshift`	最初	足す	変わる
メソッド	`splice`	どこでも	入いれ替かえる	変わる
メソッド	`includes`	すべて	あるか探す	変わらない
演算えんざん子	`delete`	すべて	穴をあけて消す	変わる（非推奨すいしょう）
演算えんざん子	`...`	すべて	中身を広げる	変わらない

留学生へのアドバイス

「元の配列はいれつが変わってしまうメソッド（push, pop, shift）」を使うときは注意が必要です。もし、元のデータを壊（こわ）したくないときは、slice を使ってコピーを作ってから作業する のがプロのコツですよ！

Tip

「slice（スライス）」 は、料理りょうりでハムやチーズを薄（うす）く切るのと同じ言葉です。「元の塊（かたまり）から、一切れ分をもらう」と覚えると忘れません。

Tip

「splice」と「slice」は名前が似ている！

splice：手術（しゅじゅつ）して中身をいじる。

slice：写真（しゃしん）のように一部を撮るだけ。

この違いを強調きょうちょう（きょうちょう）してあげると、留学生も混乱（こんらん）しません。

III. 連想配列はいれつ

「連想配列はいれつ（れんそうはいれつ）」という言葉は、少し難むずかしく聞こえますよね。簡単に言うと、「番号（ばんごう）の代わりに、『名前（ラベル）』をつけた箱（はこ）」 のことです。

JavaScriptでは「オブジェクト」の一種です。メソッドがなく、データだけをまとめたものです。

1. 普通（ふつう）の配列はいれつとの違い

普通の配列はいれつと、連想配列はいれつの違いを「ロッカー」でイメージしてみましょう。

普通の配列はいれつ (Array): 番号がついたロッカー。
「0番のロッカー、1番のロッカー……」と、数字で中身を探します。
連想配列はいれつ (Associative Array): 名前が書かれたラベル付きのロッカー。
「『名前』のロッカー、『国籍（こくせき）』のロッカー……」と、言葉で中身を探します。

2. 書かき方かたと呼び方

「名前（Key：キー）」と「中身（Value：値（あたい））」をセットにして作ります。

// 連想配列（はいれつ）（オブジェクト）を作る
const user = {
  name: "田中",
  age: 20,
  country: "日本"
};

中身を取り出すには、ドット.やブラケット[]を使います。

// 中身を取り出す
console.log(user["name"]); // 「田中」が出る
console.log(user.name);    // これでも「田中」が出る（こっちがよく使われます）

3. なぜ「連想（れんそう）」というの？

「連想」とは、「Aという言葉から、Bを思い出す」 という意味です。

国と「食べ物・場所」の例れい

それぞれの国をイメージしたときに、パッと思い浮かぶものはありませんか？

日本から連想するのは… 「お寿司（すし）」
イタリア から連想するのは… 「ピザ」
フランス から連想するのは… 「エッフェル塔（とう）」

このように、例たとえば「国名（名前） を聞いたら、その国の 特徴（データ） を思い出す」というような心の動うごきを、「連想」と言います。

「名前（キー）」と「中身（バリュー）」がセットになっている 仕組しくみが、「連想」の仕組しくみとよく似ているため、「連想配列はいれつ」と呼ばれるのです。

4. 配列はいれつと連想配列はいれつのまとめ

種類	探し方（呼び方）	どんなときに使う？
普通の配列はいれつ	0, 1, 2…（数字）	出席番号や買い物リストなど、順番が大事なとき
連想配列はいれつ	“name”, “price”…（言葉）	プロフィールや商品の詳細など、意味が大事なとき

Tip

留学生へのアドバイス： 実は「連想配列はいれつ」という言葉は、もともと他のプログラミング言語（PHPやRubyなど）で使われていた言葉なんです。JavaScriptでは、この「連想配列はいれつ」のことを 「オブジェクト」 と呼びます。「名前（キー）と中身（バリュー）がセットになっている」状態は、「プロパティ名とプロパティの値がセットになっている」状態と同じだからです。書かき方かたも同じですね。ただ「連想配列はいれつ」はデータだけでメソッドはありません。

いかがでしょうか？「数字ではなく、名前で探すリスト」だと考えれば簡単ですね！

V. 二次元配列はいれつ

「二次元配列はいれつ（にじげんはいれつ）」という言葉を聞くと、なんだか難むずかしそうに感じますよね。でも大丈夫です。一言でいうと、「配列はいれつ（リスト）の中に、さらに配列はいれつが入っているもの」 のことです。

イメージは「マンションの部屋番号」

普通の配列はいれつが「一列にならんだロッカー」だとしたら、二次元配列はいれつは 「たてとよこにならんだマンション」 です。

1つめの数字： 何階（なんがい）か？
2つめの数字： どの部屋か？

あるいは 「エクセルの表」 をイメージした方がわかりやすいかもしれません。

1つめの数字： 行：ぎょう / Row
2つめの数字： 列：れつ / Column

	1列	2列	3列
1行
2行
3行

JavaScriptでの書きかた

学校のクラスの「座席表（ざせきひょう）」を例れいに見てみましょう。

const classMap = [
  ["田中", "鈴木"], // 0番目のグループ（1列目）
  ["佐藤", "マリア"], // 1番目のグループ（2列目）
  ["ジョン", "リー"]  // 2番目のグループ（3列目）
];

	1列	2列
1行	田中	鈴木
2行	佐藤	マリア
3行	ジョン	リー

中身を取り出すとき

カギかっこを 2つ [ ][ ] 並べて書きます。

console.log(classMap[2][1]); // 「リー」さんが出ます！

classMap[2] → 3つめのグループ（[“ジョン”, “リー”]）を選びます。
[1] → その中の、2番目の人（リー）を選びます。

	1列	2列
1行	[0][0]	[0][1]
2行	[1][0]	[1][1]
3行	[2][0]	[2][1]

なぜ「二次元」というの？

一次元（いちじげん）： 「線」です。横（よこ）だけにデータがならんでいます。
二次元（にじげん）： 「面」です。横（よこ）と縦（たて）にデータが広がっています。

Tip

「多次元（たじげん）」って何？ 二次元（たて・よこ）よりもさらに増えて、三次元（奥行き・高さ）など、もっと複雑になったものをまとめて「多次元」と呼びます。

どんなときに使う？

ゲームの地図： どこに宝箱（たからばこ）があるか、座標（ざひょう）で決めるとき。
カレンダー： 「○週目の、○曜日」というデータ。
写真のデータ： デジタルの写真は、色のついた点が縦と横に並んでできています。

留学生へのアドバイス

二次元配列はいれつを使うとき、一番多いミスはこれです。 「どっちの数字が『たて』で、どっちが『よこ』だっけ？」

混乱（こんらん）したときは、こう教えてあげてください。

「左側のカッコが『階（かい）』で、右側のカッコが『部屋』だよ！」

いかがでしょうか？「リストのリスト」という考え方に慣れると、プログラミングでできることが一気いっきに広がります。

VI. オブジェクトの配列はいれつ

現実のプログラムでは、以下のように「オブジェクト（情報のセット）」を配列はいれつにまとめることが多いです。これは「顧客名簿めいぼ」や「商品カタログ」のようなイメージです。

const customers = [
  { name: "山田", age: 30 },
  { name: "佐藤", age: 25 }
];

「[]角（かく）かっこ」と「{}波（なみ）かっこ」を使ったこの書かき方かたを、覚えておいてください。

参考: かっこの種類と日本語の呼び方

Keyboard shortcuts

留学生のためのJavaScript学習ガイド