ブラケット記法とは何か
ブラケット記法は obj[式] の形で、オブジェクトのプロパティへアクセス・追加・更新・削除する書き方です。ここが重要です：キーを“文字列として動的”に扱えるため、変数でキー名を決めたいとき、スペースや記号・日本語など“識別子でないキー”にアクセスしたいときに必須です。ドット記法は静的キー専用、ブラケット記法は動的キー対応という住み分けを覚えましょう。
const product = { price: 120 };
const key = "price";
console.log(product[key]); // 120（変数キー）
いつブラケット記法を使うべきか
動的キー（変数・計算結果）でアクセス・更新する
const field = Math.random() > 0.5 ? "name" : "title";
const obj = { name: "Alice", title: "Engineer" };
console.log(obj[field]); // "Alice" または "Engineer"
obj[field] = "Updated"; // 動的に更新
ここが重要です：obj.keyVar は文字通り "keyVar" キーを読むだけ。変数や式で決めるキーは必ず obj[expr] を使います。
識別子でないキー（スペース・記号・日本語・先頭数字）
const person = { "full name": "Alice A.", "1st": "first", "名": "太郎" };
console.log(person["full name"]);
console.log(person["1st"]);
console.log(person["名"]);
ここが重要です：ドット記法は使えません。こうしたキーは常にブラケット記法で読み書きします。
計算式プロパティ名で“定義時から動的キー”
const lang = "ja";
const messages = {
["title_" + lang]: "ようこそ", // "title_ja"
};
console.log(messages["title_ja"]);
基本操作（読み取り・追加・更新・削除）
読み取り・書き込み・削除
const obj = {};
obj["color"] = "blue"; // 追加
obj["color"] = "red"; // 更新
console.log(obj["color"]); // 読み取り
delete obj["color"]; // 削除
ここが重要です：“キーが未定義”なら読み取りは undefined、代入すれば新規追加です。キーの有無を判定するなら ("color" in obj) や Object.hasOwn(obj, "color") を使います。
ネストと併用（静的はドット、動的だけブラケット）
const report = { sales: { Q1: 100, Q2: 200 } };
const quarter = "Q2";
console.log(report.sales[quarter]); // 200（静的 sales はドット、可変 quarter はブラケット）
安全なアクセス（欠損・既定値・型の違い）
オプショナルチェーン＋ブラケット
const order = {};
const key = "customer";
const name = order?.[key]?.name ?? "(unknown)";
ここが重要です：?.[key] で“あれば辿る”。無ければ undefined にして TypeError を防ぎ、?? で既定値を与えます。
数字キーと文字列化の挙動
const obj = { 1: "a" };
console.log(obj[1]); // "a"（キーは内部的に "1"）
console.log(obj["1"]); // 同じ結果
ここが重要です：オブジェクトのキーは基本“文字列化”されます。厳密なキー型が必要なら Map（new Map()）の利用を検討しましょう。
Symbol キーのブラケットアクセス
const k = Symbol("id");
const obj = { [k]: 123 };
console.log(obj[k]); // 123（ドット不可、ブラケット必須）
配列・Map とブラケットの違い（混同しない）
配列は“数値インデックス”で値を読む
const arr = ["A", "B"];
console.log(arr[0]); // "A"
Map はプロパティではなく“キー値”で読む
const m = new Map([["id", 1]]);
console.log(m.get("id")); // 1（obj["id"] ではない）
ここが重要です：オブジェクトのプロパティアクセス（obj[key]）と、Map の get/set は別物です。用途に応じて構造を選びます。
よくある落とし穴（重要ポイントの深掘り）
動的キーをドットで書いてしまう
const key = "price";
// NG
// product.key → "key" というキーを読む（意図と違う）
// OK
product[key];
中間が undefined で落ちる（ネストアクセス）
// NG: order.customer が無いと TypeError
// order.customer["name"];
// OK
order.customer?.["name"];
プロトタイプ汚染の危険（ユーザー入力をそのままキーにしない）
const inputKey = "__proto__"; // 悪用される代表例
const target = {};
target[inputKey] = { hacked: true }; // 意図せぬ継承汚染の可能性
ここが重要です：外部入力をキーに使う前に“許可リストで絞る／危険キーを拒否する”などの対策を取ります。必要に応じて Object.create(null)（プロトタイプなしの空オブジェクト）を使うと安全性が上がります。
列挙順への過信
オブジェクトの列挙順は「整数っぽいキーが先、その後に通常キー」が基本です。表示順が厳密に必要なら配列へ変換してソートして管理します。
実践的なパターン（設定・国際化・マッピング）
設定の上書き（非破壊・ブラケット併用）
const base = { theme: "light", lang: "ja" };
const patch = { key: "theme", value: "dark" };
const updated = { ...base, [patch.key]: patch.value }; // { theme:"dark", lang:"ja" }
国際化キーの選択
const i18n = { title_ja: "ようこそ", title_en: "Welcome" };
function t(dict, keyBase, lang) {
return dict[`${keyBase}_${lang}`] ?? dict[`${keyBase}_en`];
}
console.log(t(i18n, "title", "ja")); // "ようこそ"
テーブル列名でアクセスする
const row = { id: 1, name: "Alice", age: 20 };
function pick(row, col) { return row[col]; }
console.log(pick(row, "name")); // "Alice"
まとめ
ブラケット記法は「動的キー・識別子でないキー・Symbol キー」を安全かつ柔軟に扱うための必須テクニックです。静的キーはドット、動的や特殊文字はブラケットに明確に分ける。欠損には ?.[key] と ?? を組み合わせて落ちないコードにし、数値キーの文字列化や Map との違いを理解する。ユーザー入力をキーに使う際はプロトタイプ汚染対策を忘れず、更新はスプレッド＋計算式プロパティ名で非破壊に。これを押さえれば、初心者でも短く明快で安全なオブジェクト操作が書けます。