概要
JavaScript のオブジェクトでは、プロパティ（キー）にアクセスするために
ドット記法（dot notation） と ブラケット記法（bracket notation） という複数の方法が用意されています。
これらは単なる書き方の違いではなく、アクセス可能なキーの条件や動的性質 に明確な違いがあります。
※mdn web docs – Working with objects
つまり、
「キーが固定か」「文字列として扱う必要があるか」「実行時に決まるか」
といった条件によって、適切なアクセス方法を使い分ける必要があります。
この記事では、
- ドット記法
- ブラケット記法
- Optional Chaining
- 分割代入
を中心に、構文・挙動・使い分け を整理します。
目次
基本構文
const user = {
name: "Alice",
age: 25,
"favorite-color": "blue",
};
JavaScript のオブジェクトは、キーと値の組（プロパティ） を持つデータ構造です。
このプロパティにアクセスする方法が、以下で説明する各記法です。
ドット記法とブラケット記法の比較
ドット記法
user.name;
user.age;
特徴
- 記述が簡潔で可読性が高い
- 有効な識別子名のキーのみ使用可能
- 実行時にキーが変わるケースには対応できない
user.favorite-color; // 構文エラー
ブラケット記法
user["name"];
user["favorite-color"];
変数を使った動的アクセス
const key = "age";
user[key]; // 25
特徴
- キーを文字列として扱える
- 変数・式を使った動的アクセスが可能
- 記述量はやや多い
比較結果
使用可能なキー
| 観点 | ドット記法 | ブラケット記法 |
|---|---|---|
| 英数字のみ | ○ | ○ |
- や空白を含むキー |
× | ○ |
| 予約語 | × | ○ |
動的アクセス
- ドット記法
実行時にキーを切り替えることはできません。 - ブラケット記法
変数や計算結果をキーとして使用できます。
const prop = "name";
user.prop; // undefined
user[prop]; // "Alice"
活用例
1. API レスポンスのプロパティ参照
const response = {
status: 200,
data: {
user_name: "Alice",
},
};
console.log(response.data.user_name);
キーが固定であれば、ドット記法が最も読みやすくなります。
2. 動的キーによるアクセス
const settings = {
theme: "dark",
lang: "ja",
};
function getSetting(key) {
return settings[key];
}
console.log(getSetting("theme")); // "dark"
このようなケースでは、ブラケット記法が必須です。
3. Optional Chaining（?.）による安全なアクセス
const user = null;
console.log(user?.name); // undefined
-
nullやundefinedの可能性がある場合に有効 - エラーを防ぎ、安全にアクセスできる
const data = {
profile: {
address: {
city: "Tokyo",
},
},
};
console.log(data.profile?.address?.city); // "Tokyo"
4. 分割代入によるプロパティ取得
const user = {
name: "Alice",
age: 25,
};
const { name, age } = user;
console.log(name); // "Alice"
console.log(age); // 25
別名で受け取る場合
const { name: userName } = user;
console.log(userName); // "Alice"
5. 存在しないプロパティへのアクセス
console.log(user.email); // undefined
console.log(user["email"]); // undefined
- エラーにはならない
-
undefinedが返る点に注意が必要
よくある誤解と注意点
1. 変数を使っているのにドット記法を使ってしまう
const key = "name";
user.key; // undefined
user[key]; // "Alice"
-
user.keyは"key"という名前のプロパティを探している - 変数の中身をキーとして使いたい場合はブラケット記法が必須
2. ブラケット記法では文字列で囲む必要がある
user[name]; // ReferenceError（name が未定義の場合）
user["name"]; // 正しい
- ブラケット記法の中身は 式
- 文字列リテラルの場合は必ずクォートが必要
3. 存在しないプロパティはエラーになると思ってしまう
user.address.city;
-
user.addressがundefinedの場合は TypeError - Optional Chaining を使うことで回避できる
user.address?.city; // undefined
4. キーが数値でもドット記法でアクセスできると思ってしまう
const obj = {
0: "zero",
};
obj.0; // 構文エラー
obj[0]; // "zero"
obj["0"]; // "zero"
- 数値キーは内部的には文字列
- 数値キーはブラケット記法のみ対応
5. JSON と JavaScript オブジェクトを混同する
const obj = {
name: "Alice", // OK
};
{
"name": "Alice"
}
- JSON ではキーは必ず文字列
- JavaScript オブジェクトではドット記法が使える
- JSON = データ形式、Object = 言語仕様