ドット記法とは何か
ドット記法は、オブジェクトのプロパティ（キー）に「.」でアクセスする最も読みやすい書き方です。配列が順番で取り出すのに対し、オブジェクトは“名前で取り出す”ため、ドット記法は直感的でミスが少なくなります。ここが重要です：ドット記法は“静的なキー名”に向いており、コードにキー名をそのまま書けるときに使います。
const user = { id: 1, name: "Alice", active: true };
console.log(user.name); // "Alice"
user.active = false; // 更新
基本の読み書き（アクセス・追加・更新・削除）
プロパティの読み取りと書き込み
ドットでアクセスして、そのまま代入できます。存在しないキーに代入すると“新規追加”になります。
const product = { name: "Pen", price: 120 };
console.log(product.price); // 120
product.color = "blue"; // 追加
product.price = 150; // 更新
delete product.color; // 削除
ネストしたプロパティ
入れ子のオブジェクトや配列にも連続してドット／ブラケットで辿れます。
const order = {
customer: { id: 1, name: "Alice" },
items: [{ sku: "A1", qty: 2 }]
};
console.log(order.customer.name); // "Alice"
console.log(order.items[0].sku); // "A1"
ドット記法が使えるキーと使えないキー（識別子ルール）
使えるキー（識別子として有効）
ドット記法で書けるキーは、英数字・_・$ から始まり、予約語も基本的に使用可能です。
const obj = { a: 1, _b: 2, $c: 3, default: 4 };
console.log(obj.a, obj._b, obj.$c, obj.default);
使えないキー（ブラケット記法を使う）
スペース・ハイフン・先頭が数字・日本語など“識別子でない”キーは、ドットではアクセスできません。
const person = { "full name": "Alice A.", "1st": "first", "名": "太郎" };
console.log(person["full name"]); // ドット不可
console.log(person["1st"]); // 先頭数字はドット不可
console.log(person["名"]); // 非ASCIIもブラケット
ここが重要です：キーがコード内で“固定の英数字名”ならドット記法、そうでなければブラケット記法を選ぶのが安全です。
動的キーはブラケット、静的キーはドット（使い分け）
変数からキーを組み立てる
ドット記法は“変数展開”できません。動的キーは必ずブラケット記法を使います。
const key = "price";
const product = { price: 120 };
console.log(product[key]); // 120
計算式プロパティ名で定義し、ブラケットで読む
動的にキーを作るときは、定義側でも [] を使います。
const lang = "ja";
const messages = { ["title_" + lang]: "ようこそ" };
console.log(messages["title_ja"]);
ドットとブラケットの併用（ネストで便利）
固定名はドット、可変部分だけブラケットにすると読みやすくミスが減ります。
const report = { sales: { Q1: 100, Q2: 200 } };
const quarter = "Q2";
console.log(report.sales[quarter]); // 200
安全なアクセス（欠損でも落ちない書き方）
オプショナルチェーンと既定値
ネストで“無い可能性”がある経路は ?.（オプショナルチェーン）と ??（既定値）で安全に。
const order = {}; // customer が無いかも
const name = order.customer?.name ?? "(unknown)";
TypeError を避けるパターン
中間が undefined の可能性を想定し、段階的に守るのが鉄則です。
// NG: order.customer が undefined だと例外
// console.log(order.customer.name);
// OK: ?. で存在すれば辿る
console.log(order.customer?.name);
メソッド呼び出しと this（ドット記法の文脈）
メソッドは“ドットで呼ぶ”のが基本
ドットで呼ぶと、メソッド内の this が“そのオブジェクト”を指します。
const counter = {
value: 0,
inc() { this.value++; }
};
counter.inc(); // this は counter
console.log(counter.value); // 1
アロー関数は this を束縛しない
メソッドにアロー関数を使うと期待通りに this が効かないことがあります。通常の関数記法で定義しましょう。
const bad = {
value: 0,
inc: () => { /* this は外側の文脈。obj を指さない */ }
};
プロトタイプチェーンと影響（深掘り）
ドット記法は“自分→プロトタイプ”の順で探す
オブジェクト自身にプロパティが無ければ、プロトタイプ（継承元）を辿って見つけます。
const base = { kind: "base" };
const obj = Object.create(base);
obj.name = "Alice";
console.log(obj.name); // "Alice"（自身）
console.log(obj.kind); // "base"（継承先）
シャドーイング（同名プロパティの上書き）
自分に同名プロパティを作ると、継承元の同名プロパティを“隠す”挙動になります。意図を明確に。
非破壊更新とドット記法（状態を壊さない書き方）
スプレッドで部分更新（新インスタンス）
共有される状態や UI では、元を直接書き換えず“新しいオブジェクト”を作るのが安全です。
const user = { id: 1, name: "Alice", prefs: { theme: "light" } };
const updated = { ...user, name: "Bob" }; // 上書き（外側）
const deepUpdated = { ...user, prefs: { ...user.prefs, theme: "dark" } }; // 内側も非破壊
ドット記法は“読み書きが簡単”ですが、共有参照の環境では“新インスタンスで差し替え”を基本にしましょう。
よくある落とし穴（重要ポイントの深掘り）
動的キーをドットで書いてしまう
obj.keyVar は「文字列 ‘keyVar’ のキー」を読むだけ。変数キーは必ず obj[keyVar]。
先頭が数字・記号・スペースを含むキー
識別子ではないためドット不可。常にブラケットを使う。
const o = { "1st": "first", "full name": "Alice" };
o["1st"]; o["full name"];
中間が undefined で落ちる
ネストアクセスは ?. を使って守る。失敗時の既定値は ?? で与える。
JSON との混同
オブジェクトリテラルはコード上の値。JSON は文字列。JSON のキーは必ずダブルクォートで囲むが、コードのドット記法には関係ありません。
まとめ
ドット記法は「固定のキー名を、最短・最も読みやすい形で扱う」ための基本技術です。静的キーにはドット、動的キーや特殊文字にはブラケット。ネストや欠損には ?.／?? を組み合わせ、メソッドはドットで呼んで this を正しく扱う。プロトタイプチェーンの探索順を理解し、共有状態ではスプレッドで非破壊更新。これらを徹底すれば、初心者でも短く明快で、壊れにくいオブジェクト操作が書けます。