【6日でできるJavaScript入門】オブジェクト変数

　JavaScriptでは、オブジェクト変数を使うことで複数のデータを1つのまとまりとして管理できます。オブジェクト変数は「名前」と「値（データ）」をペアで格納し、たとえば「1人の生徒の名前・年齢・得点」や「店舗の情報」など、現実世界の情報の構造に近い形でデータを表現できるのが特長です。
　オブジェクトの各データ（プロパティ）は、ドット記法やブラケット記法で自由にアクセス・操作できます。また、オブジェクトの配列にすれば「複数人の生徒」「複数店舗」なども効率よく管理できます。この章では、オブジェクト変数の作成・利用方法、配列との違い、実用的なサンプルまでを丁寧に解説します。

1. オブジェクト変数の基本

1.1. オブジェクト変数の宣言とプロパティ

オブジェクト変数は「{…}」で宣言し、プロパティ（キーと値の組み合わせ）でデータをまとめます。

書式例

let obj = { key1: value1, key2: value2};

例：生徒情報のオブジェクト

let student = {
  name: 'さくら',
  age: 17,
  score: 95
};
console.log(student.name); // "さくら"
console.log(student['score']); // 95

出力例

さくら
95

1.2. プロパティの追加・変更・削除

操作	書き方	例
追加	obj.key = value;	student.grade = 'A';
変更	obj.key = newValue;	student.age = 18;
削除	delete obj.key;	delete student.score;

例：プロパティの追加・変更・削除

student.grade = 'A';
student.age = 18;
delete student.score;
console.log(student);

出力例

{ name: 'さくら', age: 18, grade: 'A' }

２．ブラケット記法・応用とオブジェクト配列

2.1. ブラケット記法の利点

ドット記法（obj.key）以外にも、obj['key'] の形でプロパティにアクセスできます。
この方法は、

スペースや記号を含むプロパティ名
変数でプロパティ名を指定
したい場合に便利です。

let person = {'favorite food': 'カレー'};
console.log(person['favorite food']); // "カレー"

let key = 'name';
console.log(student[key]); // "さくら"

2.2. オブジェクト配列の利用

オブジェクトの「配列」＝複数の同じ構造のオブジェクトを一括管理できる！

例：商品リストをまとめて管理

let products = [
  { name: 'コーヒー', price: 250 },
  { name: '紅茶', price: 200 },
  { name: 'オレンジジュース', price: 180 }
];
console.log(products[1].name); // "紅茶"

出力例

紅茶

HTML+JavaScript応用例

サンプル：メンバー情報の一覧を表示する

ファイル名： lesson28-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>👥 メンバー情報の表示例</title>
</head>
<body>
  <h2>メンバーリスト</h2>
  <ul id="memberList"></ul>
  <button id="show">メンバーを表示</button>
  <script>
    let members = [
      { name: 'あきら', job: 'Webデザイナー', hobby: 'ランニング' },
      { name: 'さゆり', job: 'フロントエンジニア', hobby: '料理' },
      { name: 'たけし', job: 'プログラマー', hobby: '写真撮影' }
    ];
    document.getElementById('show').addEventListener('click', function() {
      let html = '';
      for(let i=0; i<members.length; i++){
        html += '<li>' + members[i].name + '（' + members[i].job + '：趣味' + members[i].hobby + '）</li>';
      }
      document.getElementById('memberList').innerHTML = html;
    });
  </script>
</body>
</html>

ブラウザの出力例

出力例

・あきら（Webデザイナー：趣味ランニング）
・さゆり（フロントエンジニア：趣味料理）
・たけし（プログラマー：趣味写真撮影）

３．オブジェクト変数のメリットと配列との違い

配列	オブジェクト変数
値に「順番（添え字）」でアクセス	値に「名前（キー）」でアクセス
何のデータか分かりづらい	意味のある名前で管理しやすい。
データ数が多い場合に有利	情報が複数セットでまとまっている場合に有利

まとめ

　オブジェクト変数は、複数の関連する値を1つのまとまりとして管理したい場合に非常に便利です。現実世界の情報構造をそのままプログラムで表現でき、データの管理・取得も直感的に行えます。特にWebアプリや大規模なデータ処理では、オブジェクトと配列の組み合わせ（オブジェクト配列）が力を発揮します。基本の使い方を押さえ、配列との違いを理解して活用しましょう。