では MDN の「“オブジェクトに関する扱い方”（Working with objects）」の内容を、初心者にもわかるように、具体的なコードと図解イメージを交えながら丁寧に解説していきます。
JavaScriptオブジェクト入門：基礎から実践まで
1. オブジェクトとは？
オブジェクトとは、「名前（キー）と値（バリュー）のセット」をまとめた箱のようなものです。
たとえば、「人」を表すとき、名前や年齢などの情報を1つにまとめられます。
const person = {
name: "Alice",
age: 25,
job: "Designer"
};
図で表すと：
person
├─ name → "Alice"
├─ age → 25
└─ job → "Designer"
2. プロパティへのアクセス
オブジェクトの中身は、2通りの書き方で取り出せます。
● ドット記法（.）
console.log(person.name); // "Alice"
person.age = 26; // 値を更新
● 角かっこ記法（[]）
console.log(person["job"]); // "Designer"
const key = "name";
console.log(person[key]); // "Alice"（変数でアクセスできる）
📘 ポイント
person.nameは固定のキー名を使うときperson[key]はキーを変数で指定したいときに便利
3. プロパティの追加・削除
person.country = "Japan"; // 追加
delete person.job; // 削除
console.log(person);
結果：
{
name: "Alice",
age: 26,
country: "Japan"
}
4. オブジェクトの中にオブジェクトを入れる（ネスト）
const user = {
name: "Bob",
contact: {
email: "bob@example.com",
phone: "080-1234-5678"
}
};
アクセス方法：
console.log(user.contact.email); // "bob@example.com"
5. メソッド（関数をプロパティにする）
関数をオブジェクトに入れると、「メソッド」と呼びます。
const dog = {
name: "Pochi",
bark: function() {
console.log("ワン！ワン！");
}
};
dog.bark(); // "ワン！ワン！"
短く書くとこう👇（ES6記法）
const cat = {
name: "Tama",
meow() {
console.log("ニャー！");
}
};
cat.meow();
6. this の仕組み
this は「そのメソッドを呼び出しているオブジェクト自身」を指します。
const user = {
name: "Charlie",
sayHi() {
console.log(`こんにちは、${this.name}です！`);
}
};
user.sayHi(); // "こんにちは、Charlieです！"
🔍 図で考えると：
user ----> sayHi() 内の this は user を指す
🧠 注意！
const hi = user.sayHi;
hi(); // "こんにちは、undefinedです！"
この場合、this は「user」を失い、undefined になります。
（関数単体で呼ぶと、どのオブジェクトにも属していないからです）
解決法：
hi.call(user); // "こんにちは、Charlieです！"
7. コンストラクタ関数（オブジェクトを量産）
同じ形のオブジェクトをたくさん作りたいときは、関数でテンプレートを作ります。
function Person(name, age) {
this.name = name;
this.age = age;
this.sayHello = function() {
console.log(`こんにちは、${this.name}です`);
};
}
const p1 = new Person("Alice", 25);
const p2 = new Person("Bob", 30);
p1.sayHello(); // こんにちは、Aliceです
p2.sayHello(); // こんにちは、Bobです
🔹 new をつけると：
- 空のオブジェクト
{}が作られる thisがそのオブジェクトを指す- 最後に自動で
thisが返される
8. Object.create()（プロトタイプを使う）
Object.create() は、別のオブジェクトを“親”として新しいオブジェクトを作ります。
const animal = {
eat() {
console.log("食べています");
}
};
const rabbit = Object.create(animal);
rabbit.jump = function() {
console.log("ピョン！");
};
rabbit.eat(); // 親のメソッドを継承して使える
rabbit.jump(); // 自分のメソッド
9. ゲッターとセッター（自動で処理されるプロパティ）
プロパティにアクセスしたときに、自動で関数を呼ぶ仕組みです。
const account = {
_balance: 1000,
get balance() {
console.log("残高を確認しました");
return this._balance;
},
set balance(value) {
console.log(`残高を ${value} に更新します`);
this._balance = value;
}
};
console.log(account.balance); // 残高を確認しました → 1000
account.balance = 500; // 残高を 500 に更新します
console.log(account.balance); // 500
📘 使いどころ：
- 値の検証
- ログ出力
- 計算された値を返すプロパティ（例：税金計算など）
10. オブジェクトの比較
const a = { value: 10 };
const b = { value: 10 };
const c = a;
console.log(a === b); // false（中身が同じでも別物）
console.log(a === c); // true（同じオブジェクト）
🔍 比較の基準は「中身」ではなく「参照先（メモリアドレス）」です。
同じオブジェクトを指していなければ別物になります。
11. おまけ：スプレッド構文でコピーする
const original = { x: 1, y: 2 };
const copy = { ...original, z: 3 };
console.log(copy); // { x: 1, y: 2, z: 3 }
{ ...original } は「浅いコピー（shallow copy）」なので、ネストしたオブジェクトは共有される点に注意！
まとめ表
| 機能 | 使い方 | よく使う場面 |
|---|---|---|
| オブジェクトリテラル | { name: "Alice" } | 一時的・簡単な構造 |
| メソッド | obj.method = function() {} | 動きを持たせる |
this | this.name | メソッド内で自分を参照 |
| コンストラクタ | new Person() | 同じ構造を量産 |
Object.create() | 継承用 | プロトタイプ継承 |
| getter/setter | get prop() {...} | 自動処理・バリデーション |
delete | delete obj.key | 不要プロパティ削除 |