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

生徒

「先生、JavaScriptで複数のデータをまとめて扱いたいんですけど、どうしたらいいですか？」

先生

「いい質問ですね！複数のデータをまとめて管理したいときは、配列（Array）というデータの型を使います。箱の中にいくつもの物を順番に並べるイメージですよ。」

生徒

「箱に入れるってことは、順番が大事ってことですか？」

先生

「そうです！配列は順番が決まっているので、何番目のデータかを番号で指定して取り出せます。では、基本的な使い方を見てみましょう！」

1. 配列（Array）とは？

配列とは、複数のデータを順番にまとめて保存できるJavaScriptのデータ型です。たとえば、好きな果物や数字のリストなどをまとめて扱うときに便利です。

イメージとしては、数字の入った引き出しがたくさんある箱のようなものです。引き出しには番号（インデックス）がついていて、0から順に番号が割り振られています。

2. 配列の作り方（宣言方法）

配列は角かっこ [] を使って作ります。カンマで区切って複数のデータを並べましょう。


const fruits = ["りんご", "みかん", "バナナ"];

この例では、fruitsという名前の配列に3つの果物の名前が入っています。

3. 配列の要素（データ）を取り出す方法

配列の中のデータは、順番を表す番号（インデックス）を使って取り出せます。インデックスは0から始まるので注意しましょう。


console.log(fruits[0]);  // りんご
console.log(fruits[1]);  // みかん
console.log(fruits[2]);  // バナナ

このように、fruits[0]は1番目の「りんご」を指しています。

4. 配列の長さ（要素数）を調べる

配列に入っている要素の数は、lengthプロパティで調べられます。


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

この場合は3つの果物が入っているので、3が返ってきます。

5. 配列に新しい要素を追加する方法

配列の最後に新しいデータを追加するには、push()メソッドを使います。


fruits.push("ぶどう");
console.log(fruits);  // ["りんご", "みかん", "バナナ", "ぶどう"]

このようにして、配列の末尾に「ぶどう」が追加されます。

6. 配列の要素を削除する方法

配列の最後の要素を取り除くには、pop()メソッドを使います。


fruits.pop();
console.log(fruits);  // ["りんご", "みかん", "バナナ"]

この例では、「ぶどう」が削除されて元に戻ります。

7. 配列の中身をループ処理で順番に使う

配列の要素を順番に取り出して処理したいときは、forループがよく使われます。


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

このコードは、配列の中身を順番に取り出して1つずつ表示します。

8. 配列の便利なメソッドを紹介

JavaScriptの配列には、便利なメソッドがたくさんあります。代表的なものをいくつか紹介します。

indexOf(value)：指定した値が最初に出てくる位置（インデックス）を返します。なければ -1。
includes(value)：指定した値が配列にあるかどうかを true または false で返します。
join(separator)：配列の要素を指定した区切り文字でつなげて1つの文字列にします。
slice(start, end)：配列の一部を切り出して新しい配列を作ります。


console.log(fruits.indexOf("みかん"));  // 1
console.log(fruits.includes("メロン"));   // false
console.log(fruits.join("、"));           // "りんご、みかん、バナナ"
console.log(fruits.slice(1, 3));          // ["みかん", "バナナ"]