動的キーとは何か
動的キーは「キー名をその場で計算・選択して使う」ための仕組みです。文字列を組み立てたり、変数の値をキーにしたり、日本語や記号・スペースを含むキーにアクセスしたりできます。ここが重要です：動的キーはドット記法では書けません。必ずブラケット記法 obj[式] と、定義時の計算式プロパティ名 { [式]: 値 } を使います。
const field = "name";
const user = { name: "Alice" };
console.log(user[field]); // "Alice"（変数でキー指定）
基本の書き方（ブラケット記法と計算式プロパティ名）
ブラケット記法で読み書きする
const key = "price";
const product = { price: 120 };
product[key] = 150; // 更新
console.log(product[key]); // 150
動的キーは obj[key] の形で扱います。obj.keyVar と書くと「文字列 ‘keyVar’」キーになってしまうので注意。
定義時にキーを動的に作る（計算式プロパティ名）
const lang = "ja";
const messages = {
["title_" + lang]: "ようこそ", // "title_ja" キーを作る
};
console.log(messages["title_ja"]); // "ようこそ"
ここが重要です：キーを動的に生成したいときは、リテラルでも [] を使います。ドット記法では動的なキー名を定義できません。
使い分け（静的キーはドット、動的キーはブラケット）
併用して読みやすく書く
const report = { sales: { Q1: 100, Q2: 200 } };
const quarter = "Q2";
console.log(report.sales[quarter]); // 静的部分（sales）はドット、可変部分はブラケット
ここが重要です：固定名はドットで短く、可変部分だけブラケットにすると、意図が一目で分かります。
動的キーで役立つ実践パターン
国際化（言語コードで文言を選ぶ）
const i18n = { title_ja: "ようこそ", title_en: "Welcome" };
function t(dict, base, lang) {
return dict[`${base}_${lang}`] ?? dict[`${base}_en`];
}
t(i18n, "title", "ja"); // "ようこそ"
設定の部分上書き（非破壊更新）
const base = { theme: "light", lang: "ja" };
const patch = { key: "theme", value: "dark" };
const updated = { ...base, [patch.key]: patch.value };
// { theme:"dark", lang:"ja" }
ここが重要です：スプレッドと計算式プロパティ名を組み合わせると、動的キーを安全に上書きできます。
テーブル列名で値を取り出す
const row = { id: 1, name: "Alice", age: 20 };
const pick = (r, col) => r[col];
pick(row, "name"); // "Alice"
識別子ではないキー・Symbol キーの扱い
スペース・記号・日本語・先頭数字のキー
const person = { "full name": "Alice A.", "1st": "first", "名": "太郎" };
person["full name"]; // ドット不可、ブラケット必須
person["1st"];
person["名"];
Symbol をキーにする（衝突防止に有効）
const kId = Symbol("id");
const obj = { [kId]: 123 };
obj[kId]; // 123（ドット不可）
ここが重要です：Symbol キーは他と衝突しない“秘密のキー”として使えます。アクセスは常にブラケットです。
安全なアクセス（欠損や型の落とし穴への備え）
オプショナルチェーンで落ちないようにする
const order = {};
const key = "customer";
const name = order?.[key]?.name ?? "(unknown)";
ここが重要です：?.[key] は「存在すれば辿る」。中間が undefined でも TypeError を避けられ、?? で既定値を与えられます。
数字キーは文字列化される
const obj = { 1: "a" };
obj[1]; // "a"（内部的には "1" キー）
obj["1"]; // 同じ結果
厳密なキー型や順序が必要なら Map を検討します。
オブジェクト vs Map（動的キー用途の選択）
オブジェクトは“プロパティ”アクセス、Map は“キー値”アクセス
const dict = { a: 1 };
dict["a"]; // 1
const m = new Map([["a", 1]]);
m.get("a"); // 1（obj["a"] とは別の仕組み）
ここが重要です：- キーが外部入力で増減する“辞書”用途は Map が便利（任意型キー、順序・サイズ取得が明確）。
- 既知のフィールドを持つ“レコード”用途はオブジェクトが自然。
セキュリティと品質（重要ポイントの深掘り）
プロトタイプ汚染に注意（危険キーを拒否する）
const inputKey = "__proto__";
const target = {};
// target[inputKey] = ... は危険
- 外部入力をそのままキーにしない。許可リストでホワイトリスト化。
- 必要なら
Object.create(null)を使って「プロトタイプのない空オブジェクト」を作る。
const safe = Object.create(null);
safe["__proto__"] = "ok?"; // プロトタイプを持たないので安全性が高い
動的キーの存在判定を正しく
const obj = { a: 0, b: null };
const k = "a";
(k in obj); // true（キーの有無）
Object.hasOwn(obj, k); // true（自前のキー）
obj[k] === undefined; // 値の未定義（キー無しと同義ではない）
ここが重要です：値が 0 や “” でも“存在する”。キーの有無は in／Object.hasOwn を使い分けます。
まとめ
動的キーは「キー名を変数や式で決めて、柔軟にプロパティへアクセス・定義する」ための基礎技術です。- 読み書きは obj[式]、定義は { [式]: 値 }。
- 静的キーはドット、動的・特殊文字・Symbol はブラケット。
- 欠損には
?.[key]＋??、数字キーの文字列化や Map との違いを理解する。 - セキュリティ（プロトタイプ汚染）と存在判定の使い分けを押さえる。
これらを徹底すれば、初心者でも短く明快で安全な「動的キー」設計ができ、国際化・設定更新・辞書アクセスなど実務で迷いません。