JavaScriptのオブジェクト型（Object）の基本構造を理解しよう
生徒
「先生、JavaScriptでよく聞くオブジェクトって何ですか？難しそうでよくわかりません。」
先生
「オブジェクトは簡単に言うと、いろいろな情報をまとめて管理する箱のようなものです。箱の中にはラベル（名前）付きでデータを入れられるんですよ。」
生徒
「箱っていうと、どうやって情報をまとめるんですか？」
先生
「それでは、JavaScriptのオブジェクトの基本を一緒に見ていきましょう！」
1. オブジェクトとは？
JavaScriptのオブジェクト型（Object）は、複数のデータを「キー（名前）」と「値（データ）」の組み合わせでまとめたデータの形です。例えば、人の名前や年齢、住所など、関連する情報を一つにまとめられます。
イメージとしては、家の中の引き出しのように、ラベル（キー）をつけて物（値）を整理する感じです。
2. オブジェクトの基本構造
オブジェクトは波かっこ { } で囲み、その中に「キー」と「値」を書きます。キーと値はコロン（:）でつなぎ、複数あればカンマ（,）で区切ります。
const person = {
name: "太郎",
age: 25,
hobby: "サッカー"
};
この例では、personというオブジェクトに「名前（name）」「年齢（age）」「趣味（hobby）」の情報がまとめられています。
3. キーと値について
キーはデータの名前で、文字列や数字を使います。値はそのデータの中身で、文字列・数字・真偽値（true/false）・配列・他のオブジェクトなど、様々な型が使えます。
例えば、下記のように色々な型を値にできます。
const product = {
id: 101,
name: "ノートパソコン",
price: 85000,
isAvailable: true,
tags: ["電子機器", "パソコン", "ノート"],
details: {
manufacturer: "ABC社",
warranty: "1年"
}
};
このようにオブジェクトの中に配列や別のオブジェクトも入れられます。
4. オブジェクトの値の取り出し方
オブジェクトの中の値を使いたいときは、ドット記法かブラケット記法でアクセスします。
ドット記法（よく使います）:
console.log(product.name); // "ノートパソコン"
console.log(product.price); // 85000
console.log(product.details.manufacturer); // "ABC社"
ブラケット記法（キーが変数だったり特殊文字の時に使う）:
console.log(product["name"]); // "ノートパソコン"
const key = "price";
console.log(product[key]); // 85000
5. オブジェクトの値を変更・追加する方法
オブジェクトの中の値は後から変更や追加が可能です。
// 変更
product.price = 90000;
// 追加
product.color = "シルバー";
console.log(product.color); // "シルバー"
6. オブジェクトを使うメリット
JavaScriptのオブジェクトを使うと、複数の関連するデータをまとめて管理できるので、プログラムが整理されてわかりやすくなります。例えばユーザー情報や商品情報を一つのまとまりとして扱えるため、管理や利用が簡単になります。
7. オブジェクトの注意点
- キーは文字列として扱われるため、同じ名前のキーがあると後の値が上書きされます。
- 配列のように順番が保証されているわけではないので、順序が重要な場合は配列を使いましょう。
- オブジェクト同士の比較は中身を見て比較されないため、注意が必要です。
8. オブジェクトの使いどころの例
例えば、Webサイトでユーザーの名前やメールアドレス、登録日などの情報をまとめるときにオブジェクトを使います。
const user = {
username: "tanaka123",
email: "tanaka@example.com",
registeredDate: "2024-06-25"
};
console.log(user.username); // "tanaka123"
このように関連情報をひとまとめにして扱うと、コードもすっきりして管理が楽になります。
