動的プロパティアクセス（obj[key]）の基本と実践
「キーを変数で指定したい」「ユーザー入力や設定に合わせてプロパティ名が変わる」—そんなときに使うのが角括弧記法 obj[key]。ドット記法は固定名、角括弧は“動的名”です。
基本の使い方とドット記法との違い
const person = { name: "Aki", age: 22 };
const key = "name";
console.log(person[key]); // "Aki"（動的）
console.log(person.name); // "Aki"（固定）
person[key] = "Mao"; // 動的に代入
console.log(person.name); // "Mao"
- ドット記法:
obj.nameのようにリテラルな識別子だけ。 - 角括弧記法:
obj[key]で、変数・式の結果・スペースや記号を含むキーにもアクセスできる。
よく使うテンプレート集
1) 動的に追加・更新・削除
const obj = {};
const key = "email";
obj[key] = "taro@example.com"; // 追加・更新
console.log(obj[key]); // 参照
delete obj[key]; // 削除
console.log(key in obj); // false
2) ループでまとめて設定
const target = {};
const entries = [["id", 1], ["name", "Aki"], ["active", true]];
for (const [k, v] of entries) {
target[k] = v; // 動的キーで代入
}
3) ユーザー入力やフォーム名からアクセス
const form = { username: "aki", password: "secret" };
function getField(obj, fieldName) {
return obj[fieldName]; // 動的アクセス
}
console.log(getField(form, "username")); // "aki"
4) フォールバック（デフォルト値）
const cfg = { theme: "dark" };
const key = "pageSize";
const pageSize = cfg[key] ?? 20; // 未定義なら20
5) 記号やスペースを含むキー
const obj = { "user-name": "aki", "favorite color": "blue" };
console.log(obj["user-name"]); // "aki"
console.log(obj["favorite color"]); // "blue"
配列・Mapとの使い分け
- 配列: インデックスで動的アクセス（数値も文字列化される）
const arr = ["red", "blue"];
const i = 1;
console.log(arr[i]); // "blue"
- Map: 任意型のキーを使うなら Map の方が適任
const m = new Map();
const keyObj = { k: 1 };
m.set(keyObj, "value");
console.log(m.get(keyObj)); // "value"
安全アクセスと存在チェック
- Optional chaining: ネストで安全にアクセス
const obj = { user: { profile: { city: "Tokyo" } } };
const path = "user";
console.log(obj[path]?.profile?.city ?? "N/A"); // "Tokyo"
- 存在チェック: 未定義と不存在は別
const obj = { x: undefined };
console.log("x" in obj); // true（キーは存在）
console.log(obj.x !== undefined); // false（値は未定義）
動的パス（ネスト）を扱うヘルパー
1) 安全に取得（”a.b.c” 形式）
function getByPath(obj, path) {
return path.split(".").reduce((acc, k) => acc?.[k], obj);
}
const o = { a: { b: { c: 42 } } };
console.log(getByPath(o, "a.b.c")); // 42
console.log(getByPath(o, "a.x.c") ?? "N/A"); // "N/A"
2) 安全に設定（必要なら作成）
function setByPath(obj, path, value) {
const keys = path.split(".");
let cur = obj;
for (let i = 0; i < keys.length - 1; i++) {
const k = keys[i];
if (typeof cur[k] !== "object" || cur[k] === null) cur[k] = {};
cur = cur[k];
}
cur[keys[keys.length - 1]] = value;
}
const o2 = {};
setByPath(o2, "user.profile.city", "Tokyo");
console.log(o2.user.profile.city); // "Tokyo"
よくある落とし穴と対策
- ドットを使って動的アクセスしがち:
obj.keyVarは「keyVar」という名前を探す。
対策: 動的なら必ずobj[keyVar]。 - 未定義アクセスで例外: 深いネストで
obj.a.b.cは a や b がないと壊れる。
対策:?.と??を組み合わせる、またはヘルパーを使う。 - キーの型問題: オブジェクトのキーは文字列/シンボル。数値を渡すと文字列化。
対策: 数値・オブジェクトをキーにしたいなら Map。 - ユーザー入力をそのままキーに: 予期せぬ上書き（例: “proto“）の危険。
対策: 許容キーのホワイトリストでバリデーションし、未知のキーは拒否。
const allowed = new Set(["id", "name", "email"]);
function safeSet(obj, key, value) {
if (!allowed.has(key)) throw new Error("Invalid key");
obj[key] = value;
}
練習問題（手を動かして覚える）
// 1) 動的キーで参照・代入・削除
const obj = {};
let k = "title";
obj[k] = "JS入門";
console.log(obj[k]); // "JS入門"
delete obj[k];
console.log(k in obj); // false
// 2) ネスト取得とフォールバック
const settings = { ui: { theme: "dark" } };
console.log(settings["ui"]?.["font"]?.["size"] ?? 14); // 14
// 3) getByPath / setByPath を試す
const store = {};
setByPath(store, "user.pref.lang", "ja");
console.log(getByPath(store, "user.pref.lang")); // "ja"
直感的な指針
- 固定名はドット、動的名は角括弧。
- ネストは optional chaining で安全に。
- キーの妥当性をチェックしてから使う。
- Mapが向く局面ではオブジェクトに固執しない。