目次
🌱 はじめに：オブジェクトって何？
JavaScriptを学んでいると、すぐに出てくる「オブジェクト（object）」という言葉。
これはざっくり言えば、データを名前（キー）と値のペアでまとめる箱のようなものです。
たとえば「人の情報」をバラバラの変数で管理すると――
const name = "太郎";
const age = 20;
const city = "Tokyo";
となりますが、これをひとまとめにして管理できるのがオブジェクトです。
const person = {
name: "太郎",
age: 20,
city: "Tokyo",
};
これで person.name と書くだけで名前が取り出せます。
見た目にもスッキリして、後から項目を増やしても整理しやすいですね。
1. オブジェクトの作り方（最初の一歩）
JavaScriptでは、オブジェクトをいくつかの方法で作れますが、初心者はまずこの「リテラル構文」を覚えておけばOKです。
const user = {
id: 101,
name: "Rina",
active: true,
};
この {} の中に「キー名: 値」をカンマで区切って並べるだけ。
とてもシンプルですね。
💡 補足
- キー名（左側）は文字列（”” 省略可）
- 値（右側）は数字でも文字でも関数でもOK
2. データの取り出し方と書き換え方
オブジェクトの中のデータは、2つの方法でアクセスできます。
ドット記法（いちばん使いやすい）
console.log(user.name); // "Rina"
ブラケット記法（キー名を変数で扱うときに便利）
const key = "active";
console.log(user[key]); // trueブラケット記法は「動的にキーを指定」できるのが強み。
ドット記法では「user.active」しか書けませんが、ブラケット記法なら「user[“active”]」「user[key]」もOKです。
3. プロパティ（中身）の追加・変更・削除
オブジェクトはあとから柔軟に中身を変えられます。
const car = { brand: "Toyota", color: "red" };
// 追加
car.year = 2024;
// 変更
car.color = "blue";
// 削除
delete car.brand;
console.log(car); // { color: "blue", year: 2024 }✅ delete で消せますが、むやみに削除するより「新しいオブジェクトを作り直す」方が安全です（後で詳しく解説します）。
4. オブジェクトの中に関数を入れる（メソッド）
オブジェクトの中に関数（処理）を入れることもできます。
これを「メソッド」と呼びます。
const user = {
name: "Rina",
sayHello() {
console.log(`こんにちは、${this.name}です！`);
},
};
user.sayHello(); // "こんにちは、Rinaです！"
ここで this は「このオブジェクト自身」を指します。
つまり、this.name は user.name のこと。
⚠️ 注意！
アロー関数（() => {}）では this の動きが違うため、メソッドを定義するときは普通の関数構文を使いましょう。
5. thisが指すものを理解しよう
JavaScriptで混乱しやすいのが「this」。this は「関数を呼び出したオブジェクト」を指します。
const pet = {
name: "Momo",
speak() {
console.log(`${this.name}が鳴いた！`);
},
};
pet.speak(); // "Momoが鳴いた！"
ただし、アロー関数ではthisが外側のものに固定されるので注意。
const pet = {
name: "Momo",
speak: () => {
console.log(this.name); // undefined
},
};
pet.speak(); // undefined
6. オブジェクトの中身をまとめて取り出す（分割代入）
分割代入を使うと、オブジェクトの中の値をまとめて取り出すことができます。
const user = { id: 1, name: "Taro", city: "Osaka" };
const { name, city } = user;
console.log(name); // "Taro"
console.log(city); // "Osaka"
また、存在しないキーには初期値（デフォルト値）を設定できます。
const { country = "Japan" } = user;
console.log(country); // "Japan"
7. オブジェクトを組み合わせる（スプレッド構文）
スプレッド構文 ... を使うと、オブジェクトをコピー・マージ（結合）できます。
const base = { theme: "light", lang: "ja" };
const override = { theme: "dark" };
const merged = { ...base, ...override };
console.log(merged); // { theme: "dark", lang: "ja" }✅ 後ろに書いたオブジェクトが優先されるルールです。
元のオブジェクトを壊さない（＝非破壊的）ので安全です。
8. 値の存在チェック（安全にアクセスする）
オブジェクトが入れ子になっているとき、存在しないキーにアクセスするとエラーになります。
const data = { user: { name: "Rina" } };
console.log(data.user.address.city); // ❌ エラー！
そんな時は オプショナルチェーン演算子（?.） で安全にアクセスできます。
console.log(data.user?.address?.city); // undefined（安全にスルー）
さらに、Null合体演算子（??）を使うと「値がなければ代わりを使う」ことも可能。
const city = data.user?.address?.city ?? "不明";
console.log(city); // "不明"
9. オブジェクトを便利に扱うメソッド
オブジェクトは「Object」という親クラスから便利なメソッドを継承しています。
| メソッド | 説明 | 例 |
|---|---|---|
Object.keys(obj) | キーの一覧（配列） | ["name", "age"] |
Object.values(obj) | 値の一覧 | ["Rina", 20] |
Object.entries(obj) | [キー, 値] ペア一覧 | [["name","Rina"],["age",20]] |
Object.fromEntries() | ペア配列をオブジェクトに戻す | { name: "Rina" } |
Object.hasOwn(obj, key) | そのキーを直接持っているか | true / false |
10. コピーと参照の違いに注意！
const a = { value: 1 };
const b = a; // コピーではなく参照！
b.value = 2;
console.log(a.value); // 2（aも変わる！）💡 オブジェクトは「参照型」。
つまり、別の変数に代入しても中身は同じものを指しているんです。
このようなときは、スプレッド構文で新しいオブジェクトを作るのが安全。
const a = { value: 1 };
const b = { ...a };
b.value = 2;
console.log(a.value); // 1（元は変わらない）
11. JSONとの関係
オブジェクトは JSON と相性が抜群です。
サーバー通信ではオブジェクトをJSON文字列にして送ります。
const user = { name: "Rina", age: 24 };
const json = JSON.stringify(user);
console.log(json); // '{"name":"Rina","age":24}'
const obj = JSON.parse(json);
console.log(obj.name); // "Rina"
12. ここまでのまとめ
- オブジェクトは「名前と値をセットにしたデータの箱」
{}で簡単に作れる.と[]で値を取り出せる- メソッドに
thisを使うと「自分自身」を参照できる ...や?.を使うと実務でも通用する安全なコードが書ける
