【JavaScript入門】配列

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

配列

　JavaScript では、複数の要素をひとまとめにして扱うときに配列を利用します。配列は「0番目、1番目、2番目……」と添え字（インデックス）を使って順番にデータを並べて管理するもので、大量のデータや動的なリスト処理に欠かせない仕組みです。ここでは、配列の作り方や基本的な使い方、そして配列を作成するための静的メソッドなどを紹介します。

１．配列リテラルと要素へのアクセス

1.1. 配列リテラル

角括弧 [...] で値をカンマ区切りに並べると、配列リテラルと呼ばれる形式で配列を作成できます。

// 0番目から順にデータを並べる
const arr = ['ドーナツ', 'シュークリーム', '大福', '最中'];

1.2. 添え字で要素を取得

　作成した配列の要素には、0からはじまる添え字でアクセスします。要素数は length で取得できます。

console.log(arr[0]); // 'ドーナツ'
console.log(arr[3]); // '最中'
console.log(arr.length); // 4

　範囲外の添え字や存在しない位置を指定すると、undefined が返ってきます。また、既存の要素に新しい値を代入して上書きすることもできます。

２．入れ子構造の配列

　配列の要素として、別の配列を入れることもできます。このように多次元配列や入れ子構造でデータを整理可能です。

const nestedArray = [
  ['アップルパイ', 600],
  ['プリン', 450]
];

３．`Array` コンストラクター

　配列リテラル以外にも、Array() コンストラクターを使って配列を作成できます。引数が1つの数値の場合は、その数値を要素数（長さ）とする空の配列を作り、2つ以上の引数または非数値の場合は、それら引数の要素を持つ配列を作成します。

// 要素数2の空配列を作成
const arr1 = new Array(2);  
console.log(arr1.length); // 2
console.log(arr1[0], arr1[1]); // undefined, undefined

// 複数の引数を与えると、それらを要素に持つ配列を作成
const arr2 = new Array(5, 10, 15);
console.log(arr2); // [5, 10, 15]

// 1つだけの引数が文字列など数値でない場合、要素として格納
const arr3 = new Array('モンブラン');
console.log(arr3); // ["モンブラン"]

４．配列の静的メソッド

　JavaScript の Array オブジェクトには、インスタンスメソッド以外にも、静的メソッドがいくつか用意されています。ここでは代表的なものを紹介します。

メソッド	説明
`Array.isArray(a)`	引数 `a` が配列なら `true`、それ以外なら `false` を返す。
`Array.from(a)`	イテラブル(反復可能)なオブジェクト `a` から、新しい配列を作って返す。
`Array.of(a, b, …)`	複数の引数を受け取り、それを要素とする新しい配列を返す。

５．サンプルコード（HTML + JavaScript）

　次の例を「myArrayIntroSample.html」というファイル名で保存し、ブラウザで実行してください。開発者ツールのコンソールログで動作が確認できます。

【myArrayIntroSample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myArrayIntroSample.html</title>
</head>
<body>
  <h1>配列の基本的な使い方</h1>
  <p>コンソールを開いて、出力を確認してください。</p>

  <script>
    // 1. 配列リテラルを使った作成例
    const sweets = ['マカロン', 'クレープ', 'ショートケーキ', 'ドーナツ'];
    console.log('配列 sweets:', sweets);
    console.log('要素数:', sweets.length);
    console.log('sweets[1]:', sweets[1]); // クレープ

    // 2. 要素の更新
    sweets[2] = 'ベイクドチーズケーキ'; 
    console.log('変更後 sweets:', sweets);

    // 3. 配列の入れ子構造
    const nested = [
      ['コーヒー', 350],
      ['抹茶ラテ', 450]
    ];
    console.log('入れ子構造の例:', nested);

    // 4. Array() コンストラクター
    const arrA = new Array(3);     // 長さ3の空配列
    const arrB = new Array(1, 2, 3); // [1, 2, 3]
    const arrC = new Array('ロールケーキ'); // ["ロールケーキ"]
    console.log('arrA (length):', arrA.length, arrA);
    console.log('arrB:', arrB);
    console.log('arrC:', arrC);

    // 5. 静的メソッドの利用
    console.log('Array.isArray(sweets):', Array.isArray(sweets));
    console.log('Array.from("abc"):', Array.from('abc')); // ['a','b','c']
    console.log('Array.of(5, 10, 15):', Array.of(5, 10, 15));
  </script>
</body>
</html>

実行結果

デバッグコンソールの出力

配列 sweets: ["マカロン", "クレープ", "ショートケーキ", "ドーナツ"]
要素数: 4
sweets[1]: クレープ
変更後 sweets: ["マカロン", "クレープ", "ベイクドチーズケーキ", "ドーナツ"]
入れ子構造の例: [Array(2), Array(2)]
arrA (length): 3 (3) [empty × 3]
arrB: (3) [1, 2, 3]
arrC: (1) ["ロールケーキ"]
Array.isArray(sweets): true
Array.from("abc"): (3) ["a", "b", "c"]
Array.of(5, 10, 15): (3) [5, 10, 15]

まとめ

配列リテラル： [要素0, 要素1, ...] で簡単に配列を作成。
添え字: 0番目から順に要素を管理し、配列[インデックス] で要素を参照・更新。
Array() コンストラクター：引数の与え方次第で「要素数のみを指定した空配列」か「複数要素を持つ配列」を作成。
静的メソッド： Array.isArray()・Array.from()・Array.of() など、インスタンスでなく Array 本体から呼び出すメソッド。

　配列は、データを操作する場面で非常に頻繁に登場します。配列メソッドも合わせて覚えると、大規模なデータ処理も簡単に実装できるようになるでしょう。

【JavaScript入門】配列