【JavaScript入門】オブジェクトと配列

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

オブジェクトと配列

　JavaScript では、多くのデータをまとめて扱うための仕組みとして「オブジェクト」と「配列」が利用されます。これまでのように1つの変数に1つの値だけを持たせるのではなく、複数の値をひとまとまりで管理できるため、データ量が増えても扱いやすいのが特徴です。ここでは、オブジェクトと配列の概要を見ながら、どのように使うかを紹介していきます。

１．大量のデータを扱うデータ型

JavaScript において、大量のデータをまとめて処理するには以下の2つの方法があります。

オブジェクト：名前（キー）と値のペアを持つ、連想配列的なデータ構造
配列：要素を連続的に並べ、0 から始まる添え字（インデックス）で管理するデータ構造

２．オブジェクト

　オブジェクトは、{}（波括弧）で複数のプロパティ（キーと値のセット）を定義したものです。それぞれのプロパティは「名前: 値」という形で書き、複数ある場合はカンマ（,）で区切ります。

2.1. オブジェクトリテラルの書き方

// 1行で書く例
let menu = {coffee: '300円', cake: '500円', 'juice-set': '750円'};

// 改行を入れて複数行で書く例
let userProfile = {
  name: '山田太郎',
  age: 28,
  address: '東京'
};

　プロパティ名には日本語やハイフンを含められますが、その場合は ' ' または " で囲む必要があります（例：'cake-set': '800円'）。

2.2. オブジェクトの入れ子構造

オブジェクトの中にさらに別のオブジェクトや配列を入れて、複雑なデータ構造を作れます。

let store = {
  name: 'パティスリー花',
  menu: {
    shortCake: { name: 'ショートケーキ', price: 450 },
    chocolate: { name: 'チョコケーキ', price: 500 }
  }
};

2.3. 変数名をそのままプロパティに使う

　オブジェクトリテラルでは、プロパティ名と変数名が同じ場合、次のように省略した書き方ができます。

const itemName = '紅茶';
const itemPrice = 350;

// 通常の書き方
// const drink = { itemName: itemName, itemPrice: itemPrice };

// 短い書き方
const drink = { itemName, itemPrice };
console.log(drink);
// => { itemName: "紅茶", itemPrice: 350 }

３．配列

　配列は、データを順序付きのリストとして管理します。インデックス（添え字）は0から始まり、要素数を表す length プロパティを持ちます。

3.1. 配列の作り方

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

3.2. 配列の入れ子構造

配列の要素として、別の配列やオブジェクトを入れることも可能です。

let items = [
  { name: 'クッキー', price: 120 },
  { name: 'シュークリーム', price: 180 }
];
console.log(items[1].name); // "シュークリーム"

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

　以下の例を「myObjectsArrays.html」というファイル名で保存し、ブラウザで開き、開発者ツール（コンソール）を確認してください。

【myObjectsArrays.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myObjectsArrays.html</title>
</head>
<body>
  <h1>オブジェクトと配列のサンプル</h1>
  <p>開発者ツールのコンソールを開き、実行結果を確認してください。</p>

  <script>
    // 1. オブジェクトリテラル
    let menu = {
      coffee: '350円',
      sandwich: '500円',
      'lunch-set': '900円'
    };
    console.log('メニュー:', menu);

    // 2. オブジェクトの入れ子
    let storeInfo = {
      name: 'カフェもみじ',
      location: '京都',
      menu: {
        coffee: 350,
        cake: 420
      }
    };
    console.log('お店情報:', storeInfo);

    // 3. プロパティ名を省略する方法
    const itemName = '豆大福';
    const itemPrice = 150;
    let wagashi = { itemName, itemPrice };
    console.log('和菓子:', wagashi);

    // 4. 配列
    let drinks = ['ミルクティー', 'オレンジジュース', 'コーヒー'];
    console.log('配列の要素:', drinks[0], drinks[1], drinks[2]);
    console.log('配列の要素数:', drinks.length);

    // 5. 配列の入れ子
    let dessertSet = [
      { name: 'プリン', price: 300 },
      { name: 'シフォンケーキ', price: 450 }
    ];
    console.log('デザートセット:', dessertSet);
    console.log('2つ目のスイーツの名前:', dessertSet[1].name);
  </script>
</body>
</html>

実行結果

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

メニュー: {coffee: '350円', sandwich: '500円', lunch-set: '900円'}
お店情報: {name: 'カフェもみじ', location: '京都', menu: {…}}
和菓子: {itemName: '豆大福', itemPrice: 150}
配列の要素: ミルクティー オレンジジュース コーヒー
配列の要素数: 3
デザートセット: (2) [{…}, {…}]
2つ目のスイーツの名前: シフォンケーキ

まとめ

オブジェクト：名前（キー）と値のペアを好きなだけ持つことができ、データを柔軟に管理する仕組み。
配列： 0番目・1番目・2番目…のように連番で要素を並べ、length プロパティで要素数を管理。
オブジェクトと配列はいずれも入れ子（ネスト）構造を作れるため、複雑なデータでも一括管理できる。

　こうした構造を理解しておくと、大量のデータを整理・操作するときに非常に役立ちます。データをまとめて扱うコツをつかめば、より効率よくアプリケーションを開発できるようになるでしょう。