JavaScriptの配列(Array)とは?初心者向けに基礎からやさしく解説
先生と生徒の会話形式で理解しよう
生徒
「先生、配列って何ですか?リストみたいなものですか?」
先生
「はい。JavaScriptの配列は、複数のデータを順番に並べて保存できる便利な‘リスト’です。よく使うので覚えましょう!」
生徒
「順番に並べるってどういう意味ですか?」
先生
「たとえば買い物リストのように、りんご、バナナ、みかんと順番に入っているイメージです。」
1. 配列って何?(Arrayとは?)
配列(Array)は、複数の値をひとまとめにできる箱です。たとえば「好きな果物」をひとつだけじゃなく、いくつでも入れられます。
普通の変数は「りんご」を1つしか入れられませんが、配列なら「りんご」「バナナ」「みかん」を3つ一度に入れられます。
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. インデックスで中身を取り出す
配列は位置情報(インデックス)で中身を取り出します。インデックスは「0から始まる番号」です。
let fruits = ["りんご","バナナ","みかん"];
console.log(fruits[0]); // りんご
console.log(fruits[2]); // みかん
りんご
みかん
最初の要素は0、次は1、というふうに順番に番号がついています。
4. 要素を追加・変更・削除しよう
配列を使うときによくやる操作です。
- push → 末尾に追加
- indexで代入 → 指定した位置を変更
- splice → 指定位置を削除
// 追加
fruits.push("ぶどう");
// 変更
fruits[1] = "メロン";
// 削除(2つ目から1つ)
fruits.splice(2,1);
console.log(fruits);
["りんご","メロン"]
5. 配列の長さを調べる
lengthプロパティで、配列にいくつ要素があるか確認できます。
console.log(fruits.length); // 2
2
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. 配列と文字列の違いに注意!
文字列も似たように添字で取り出せますが、文字列は「書いてある文字」を読み取る箱、配列は「データを自由に入れ替えできる箱」です。
たとえば文字列はfruits[0] = "ぶどう"のように変更できませんが、配列はできます。
8. 空の配列から始める方法
最初は何も入っていない箱(空の配列)を用意することも多いです。
let list = [];
list.push("項目1");
list.push("項目2");
console.log(list);
["項目1","項目2"]
9. 配列に対する便利なメソッド
JavaScriptの配列には他にも便利な機能がたくさんあります。代表的なものは:
map: すべての要素を変換して新しい配列を作るfilter: 条件に合う要素だけ集めるfind: 条件に合う最初の要素を見つける