オブジェクトリテラルとは何か
オブジェクトリテラルは { ... } を使って「キー（名前）: 値」をまとめて書く最も基本的な方法です。設定、データレコード、メッセージ、座標など“ラベル付きの情報”をひとつの箱にできます。ここが重要です：キーは文字列（またはシンボル）、値は数値・文字列・配列・別オブジェクト・関数など何でも入れられます。配列が“順番”の入れ物なら、オブジェクトは“名前”で取り出す入れ物です。
const user = { id: 1, name: "Alice", active: true };
基本の書き方とプロパティのアクセス
プロパティの追加・更新・削除
const product = { name: "Pen", price: 120 };
product.color = "blue"; // 追加
product.price = 150; // 更新
delete product.name; // 削除
ドット記法はシンプルで読みやすいです。キーが動的（変数）や記号・スペースを含む場合はブラケット記法を使います。
const key = "full name";
const person = { [key]: "Alice A." }; // 計算式プロパティ名
console.log(person["full name"]); // ブラケットでアクセス
ドット記法とブラケット記法の使い分け
ドット記法は obj.key の形で“静的キー”に最適。ブラケット記法は obj[expr] の形で“変数キーや特殊文字キー”に必須です。動的に組み立てたいときは必ずブラケットを選びます。
ショートハンド・計算式キー・メソッド定義
プロパティショートハンド（変数名＝キー名）
const id = 1, name = "Alice";
const user = { id, name }; // { id: 1, name: "Alice" }
ここが重要です：値を持つ変数名がそのままキー名になります。重複を減らして読みやすく。
計算式プロパティ名（動的キー）
const lang = "ja";
const messages = {
["title_" + lang]: "ようこそ", // "title_ja": "ようこそ"
};
キーを動的に組み立てられるため、国際化や可変設定に強い書き方です。
メソッドの簡潔記法と this
const counter = {
value: 0,
inc() { this.value++; }, // メソッド簡潔記法
reset() { this.value = 0; }
};
counter.inc();
ここが重要です：メソッド内の this は“そのオブジェクト”を指します。アロー関数は this を束縛しないため、メソッドには通常の関数記法を使うのが安全です。
ネスト・安全なアクセス・既定値
入れ子構造（オブジェクト＋配列）
const order = {
id: 100,
customer: { id: 1, name: "Alice" },
items: [{ sku: "A1", qty: 2 }, { sku: "B5", qty: 1 }]
};
console.log(order.customer.name); // "Alice"
console.log(order.items[0].sku); // "A1"
無いかもしれないプロパティへの安全なアクセス
const name = order.customer?.name ?? "(unknown)";
// ?. は“存在すれば辿る”、?? は null/undefined のとき既定値へ
ここが重要です：オプショナルチェーン（?.）と null 合体（??）で“欠損でも落ちない”コードにできます。
ゲッター／セッター・読み取り専用や整形の導入
get/set で振る舞いをプロパティに付ける
const user = {
first: "Alice",
last: "A.",
get full() { return `${this.first} ${this.last}`; },
set full(v) {
const [f, l] = v.split(" ");
this.first = f; this.last = l ?? "";
}
};
user.full = "Bob B.";
console.log(user.full); // "Bob B."
ここが重要です：計算結果をプロパティ風に扱えます。外部 API と内部構造の“橋渡し”に便利です。
スプレッド・分割代入（合成と取り出し）
スプレッドでマージ・部分更新（非破壊）
const base = { lang: "ja", theme: "light" };
const override = { theme: "dark" };
const cfg = { ...base, ...override }; // { lang:"ja", theme:"dark" }
右側が優先（後勝ち）。安全に“上書き・追加”できます。
分割代入で取り出し・既定値・別名
const settings = { retry: 3, display: { theme: "dark" } };
const { retry = 1, timeout = 5000 } = settings; // 既定値
const { display: { theme = "light" } = {} } = settings; // ネスト
const { retry: attempts } = settings; // 別名
ここが重要です：ネストの有無に備えて“空オブジェクトを既定値”に入れると安全です。
参照とコピー（シャロー／ディープ）
参照共有に注意（“同じ箱”問題）
const a = { x: 1 };
const b = a;
b.x = 999;
console.log(a.x); // 999（同じ参照）
代入は“コピー”ではなく“参照共有”。意図せぬ更新を避けるなら新しいオブジェクトを作ります。
浅いコピーと深いコピー
const orig = { user: { id: 1 }, tag: "x" };
const shallow = { ...orig }; // 浅いコピー（内側は共有）
const deep = structuredClone(orig); // 深いコピー（対応環境で）
ここが重要です：入れ子まで独立させる必要があるなら“深いコピー”を選びます。JSON 経由は関数・undefined・Symbol を失います。
JSON とオブジェクトリテラルの違い（誤解しない）
JSON は“文字列で表現されたデータ”のフォーマット
const obj = { id: 1, name: "Alice", ok: true }; // オブジェクトリテラル
const json = JSON.stringify(obj); // JSON 文字列
const back = JSON.parse(json); // 文字列→オブジェクト
ここが重要です：JSON は関数、undefined、Symbol、循環参照を持てません。送受信・保存向けに“表せる型だけ”に整形してから使います。
よくある落とし穴と実践の指針（重要ポイントの深掘り）
動的キーは必ずブラケット
obj[key] で書く。ドット記法はリテラルキー専用です。
メソッドの this とアロー関数
メソッドは inc() {} の形で定義し、this を安全に使う。アロー関数は this を保持しないのでメソッドには不向き。
非破壊更新を徹底
設定や状態は { ...old, key: newVal } の形で“新インスタンス”を返すと、バグが減り UI も更新検知しやすくなります。
キーの表記と取り回し
- 予約語もキーに使える（
{ default: 1 }）が、チーム規約に合わせる。 - 記号やスペースを含むキーは常にブラケットでアクセス。
- 数字キーは文字列化される（
{ 1: "a" }は"1"キー）。
まとめ
オブジェクトリテラルは {} で「キー:値」を一気に定義できる、最も実用的なデータ表現です。ショートハンド・計算式キー・メソッド簡潔記法で短く明快に書き、?. と ?? で欠損に強く、スプレッドと分割代入で更新と取り出しを安全・簡潔に。参照共有に注意し、必要なら深いコピーを選ぶ。JSON は“文字列フォーマット”として使い分ける。これらの基礎を押さえれば、初心者でも現場仕様に耐える、読みやすく壊れにくいオブジェクト設計ができます。