JavaScriptのオブジェクト（Object）とは？基本構造と仕組みをやさしく解説
生徒
「JavaScriptでたくさんの情報をひとつにまとめるには、どうすればいいですか？」
先生
「それなら、オブジェクト（Object）を使うと便利ですよ。オブジェクトは、関連するデータをひとまとまりにできます。」
生徒
「オブジェクトってなんですか？なんだか難しそうです…」
先生
「心配しないでください。家の中にある“引き出し”をイメージすれば、すぐに理解できますよ。それでは、基本から順番に解説していきましょう！」
1. JavaScriptのオブジェクトとは？
JavaScriptのオブジェクト（Object）とは、名前（キー）と値（バリュー）をセットで管理できるデータのまとまりのことです。
たとえば、人の情報を扱うとき、「名前」「年齢」「住所」などの複数の項目をひとまとめにできます。
簡単にいうと、「ラベル付きの箱」のようなものです。ラベル（キー）を使って中のデータ（値）を取り出せます。
2. オブジェクトの基本構造
JavaScriptのオブジェクトは、{ } の中にキーと値を:で書き、複数ある場合はカンマ（,）で区切ります。
const person = {
name: "田中太郎",
age: 25,
address: "東京都"
};
上記のコードでは、name、age、addressがキー（名前）、それぞれの右側が値（データ）です。
3. オブジェクトの値を取り出すには？
オブジェクトの中のデータを取り出すには、次の2つの方法があります。
・ドット記法（.）
キーの名前を.でつなげてアクセスします。
console.log(person.name); // "田中太郎"
・ブラケット記法（[ ]）
キーを文字列として[]に入れてアクセスします。変数を使うときや、キーにスペースや記号があるときに便利です。
console.log(person["age"]); // 25
4. オブジェクトに新しいデータを追加・変更する
オブジェクトには後からデータを追加したり、既存の値を変更することができます。
・追加する方法
person.job = "エンジニア";
・変更する方法
person.age = 30;
このようにして、柔軟にデータを扱えるのがオブジェクトの強みです。
5. オブジェクトの中にオブジェクトや配列を入れることもできる
オブジェクトの中に、さらにオブジェクトや配列を入れることで、より複雑な情報を扱うこともできます。
const user = {
name: "佐藤花子",
contact: {
email: "hanako@example.com",
phone: "090-1234-5678"
},
hobbies: ["読書", "旅行", "料理"]
};
user.contact.email のように、ネスト（入れ子）された情報も簡単に取り出せます。
6. オブジェクトの中身をすべて確認するには？
すべてのキーや値を確認したいときは、console.log()でそのままオブジェクトを表示すれば見られます。
console.log(person);
また、特定の処理をしたいときはfor...in文を使って1つずつ取り出すこともできます。
for (let key in person) {
console.log(key + ": " + person[key]);
}
name: 田中太郎
age: 30
address: 東京都
job: エンジニア
7. オブジェクトと配列の違いを理解しよう
オブジェクトと配列はどちらもデータをまとめることができますが、使い分けが重要です。
- オブジェクト：名前（キー）でデータを管理したいときに使う
- 配列：順番でデータを管理したいときに使う
たとえば、1人のユーザーの情報はオブジェクトで管理し、複数人のユーザーをまとめたいときは配列を使います。
const users = [
{ name: "田中", age: 25 },
{ name: "佐藤", age: 30 }
];
