「プロパティアクセス」は“タンスの引き出しを開ける”動作
オブジェクトは「名前付きの引き出しがたくさんあるタンス」のようなものです。
プロパティアクセスは、その引き出しを「開ける」「中身を入れる」ための書き方です。
JavaScript には、
大きく分けて .（ドット記法） と []（ブラケット記法） の2種類があります。
どちらも「プロパティにアクセスする」ためのものですが、得意分野が少し違います。
ドット記法：一番よく使う“素直な”アクセス方法
基本の形と使い方
const user = {
name: "太郎",
age: 25,
};
console.log(user.name); // 太郎
console.log(user.age); // 25
オブジェクト.プロパティ名 という形でアクセスするのが ドット記法 です。
読むときも、書くときも同じです。
user.age = 26; // 代入（更新）
console.log(user.age); // 26
ここで大事なのは、
「プロパティ名は“そのままの識別子”として書く」 ということです。
つまり、次のような名前はドット記法では使えません。
- スペースを含む
- 記号から始まる
- 数字から始まる
const obj = {
"user name": "太郎",
};
// obj.user name // これは文法エラー
ドット記法が向いている場面
ドット記法は、
「普通の名前（英数字と _）のプロパティ」にアクセスするときの基本形です。
user.namebook.titleconfig.isEnabled
のように、
“コードを書いている時点で名前が決まっているプロパティ” に対して使うのが自然です。
ブラケット記法：柔軟で“動的な”アクセス方法
基本の形と使い方
const user = {
name: "太郎",
age: 25,
};
console.log(user["name"]); // 太郎
console.log(user["age"]); // 25
オブジェクト["文字列のプロパティ名"] という形でアクセスするのが ブラケット記法 です。
代入も同じようにできます。
user["age"] = 30;
console.log(user["age"]); // 30
プロパティ名を変数で決めたいとき
ブラケット記法の一番の強みは、
プロパティ名を変数で指定できる ことです。
const key = "email";
const user = {
name: "太郎",
};
user[key] = "taro@example.com";
console.log(user.email); // taro@example.com
console.log(user[key]); // taro@example.com
user[key] の key は、
実行時に "email" という文字列になり、user["email"] と同じ意味になります。
ここが重要です。
「プロパティ名がコードを書いている時点では決まっていない」
＝「変数や計算結果で決まる」
というときは、必ずブラケット記法を使う。
特殊な名前のプロパティにも使える
プロパティ名にスペースや記号が含まれている場合も、
ブラケット記法が必要です。
const obj = {
"user name": "太郎",
"user-age": 25,
};
console.log(obj["user name"]); // 太郎
console.log(obj["user-age"]); // 25
こういう名前はドット記法では書けないので、
「文字列としてのプロパティ名」を扱うときはブラケット一択 です。
ドット記法とブラケット記法の違いを整理する
「識別子として書けるか」「文字列として扱うか」
ドット記法は、
プロパティ名を「識別子」として書きます。
user.name; // OK
user["name"]; // これと同じ意味
ブラケット記法は、
プロパティ名を「文字列」として扱います。
user["name"]; // "name" という文字列
user[key]; // key という変数の中身がプロパティ名になる
ここが重要です。
- ドット記法
コードに直接「名前」を書くuser.name,book.titleなど - ブラケット記法
文字列や変数で「名前」を指定するuser["name"],user[key]など
「今、自分は“固定の名前”を使っているのか？」
「それとも“変数で決まる名前”を使っているのか？」
と考えると、どちらを使うべきかが見えてきます。
ネストしたオブジェクトでのアクセス
ドットとブラケットを組み合わせる
オブジェクトの中にオブジェクトがある場合も、
同じルールでアクセスできます。
const user = {
name: "太郎",
address: {
city: "Tokyo",
zip: "100-0001",
},
};
console.log(user.address.city); // Tokyo
console.log(user["address"]["zip"]); // 100-0001
console.log(user["address"].city); // Tokyo
途中まではドット、
最後だけブラケット、
という組み合わせもよくあります。
const key = "city";
console.log(user.address[key]); // Tokyo
ここが重要です。
「オブジェクトのどの階層でも、.か[]か を選べる。
“その階層のプロパティ名がどう決まるか”で使い分ける。」
実務的な感覚：基本はドット、必要なときだけブラケット
使い分けのシンプルな指針
実務での感覚としては、こう考えるとシンプルです。
- コードを書いている時点で名前が分かっている
→ ドット記法で書く（user.name,config.debug） - 名前が変数や計算で決まる
→ ブラケット記法を使う（obj[key],obj["user_" + id]） - プロパティ名にスペースや記号が含まれる
→ ブラケット記法を使う（obj["user name"]）
ここが重要です。
「とりあえず全部ブラケット」でも動きますが、
“意味が決まっている名前”にはドットを使った方が読みやすい。
“動的に決まる名前”にはブラケットを使う。
この線引きができると、コードの意図が伝わりやすくなる。
初心者として「プロパティアクセス」で本当に押さえてほしいこと
プロパティアクセスは、
オブジェクトを扱うときの“呼吸”みたいなものです。
最低限、次の2つを自分の手で何度も書いてみてください。
const user = {
name: "太郎",
age: 25,
};
console.log(user.name); // ドット記法
console.log(user["age"]); // ブラケット記法
const key = "name";
console.log(user[key]); // 変数でプロパティ名を指定
そして、コードを書くたびに一度だけ自分に問いかけてみてください。
「このプロパティ名は“固定の名前”か？ それとも“変数で決まる名前”か？」
その問いに答えながら . と [] を選べるようになったとき、
あなたはもう「なんとなくオブジェクトを触っている人」ではなく、
「オブジェクトの形とアクセス方法を意識して設計できるプログラマー」 になっています。