プロパティアクセスとは何か
JavaScriptのオブジェクトは「キーと値のペア」を持ちます。プロパティアクセスは、そのキーを指定して値を読み書きする操作です。方法は2つあり、ドット記法（.）とブラケット記法（[]）を使い分けます。ここが重要です：ドット記法は「固定のキー名」に向き、ブラケット記法は「動的に決まるキー名」や「記号を含むキー名」に向きます。
ドット記法の基本
ドット記法は最も読みやすく、IDEの補完も効きやすいのが特徴です。識別子として有効なキー（英数字と_、先頭は数字以外）に対して使えます。固定のキーを扱うときにシンプルで安全です。
const user = { name: "太郎", age: 20 };
console.log(user.name); // 太郎
user.age = 21; // 書き込み
console.log(user.age); // 21
ドット記法は「キーがコード上で決まっている」場合に最適です。スペースやハイフン、先頭が数字のキーには使えないため、そのときはブラケット記法に切り替えます。
ブラケット記法の基本と動的キー
ブラケット記法は、文字列や式を使ってキーを指定できます。変数でキー名が決まる場面、または記号やスペースを含むキーに対して強力です。キーは内部的に文字列化されるため、数値キーも "1" のように扱われます。
const user = { "fav-color": "blue", 1: "one" };
console.log(user["fav-color"]); // blue
console.log(user["1"]); // one
const key = "name";
user[key] = "花子"; // 動的に追加・更新
console.log(user["name"]); // 花子
ここが重要です：obj[key] は「まず key という変数を探し、その中身の文字列でプロパティにアクセス」します。obj.key は「keyという名前の固定プロパティ」を参照するため、意図が異なります。
使い分けの指針（重要ポイントを深掘り）
固定キーならドット、変数や式で決まるキー、または特殊文字を含むキーならブラケットを選びます。可読性のため、可能な限りドット記法を使い、必要な箇所だけブラケットにするのが定石です。「動的キーの生成」は設計上の意味が大きいので、キー名の一覧や仕様を見える化（定数化）すると、バグが減ります。
const FIELDS = { NAME: "name", SCORE: "score" };
const user = {};
user[FIELDS.NAME] = "太郎"; // 動的だが定数で可読性を担保
user[FIELDS.SCORE] = 95;
console.log(user.name, user.score); // 太郎 95
例題で理解する（静的・特殊・動的・ネスト）
静的キー（ドットが最適）
const book = { title: "JS入門", pages: 300 };
console.log(book.title); // JS入門
book.pages += 1;
console.log(book.pages); // 301
記号やスペースを含むキー（ブラケット）
const product = { "unit-price": 1200, "display name": "T-Shirt" };
console.log(product["unit-price"]); // 1200
console.log(product["display name"]); // T-Shirt
動的キー（ユーザー入力・計算結果）
const stats = {};
function addStat(key, value) {
stats[key] = value; // 入力に応じて動的に追加
}
addStat("hp", 100);
addStat("mp", 50);
console.log(stats.hp, stats["mp"]); // 100 50
ネストしたアクセス（安全性も意識）
const user = { profile: { city: "東京" } };
// 直接アクセス（存在するならOK）
console.log(user.profile.city); // 東京
// 安全に辿る（途中が未定義でも落ちない）
console.log(user.profile?.city); // 東京
console.log(user.address?.city); // undefined
よくある落とし穴（深掘り）
「変数名」と「キー名」を取り違えると、意図したプロパティに届きません。obj.key は「’key’という文字のキー」、obj[key] は「変数 key の中身のキー」です。また、途中のオブジェクトが未定義のまま user.profile.city と書くとエラーになるので、初期化順序を整えるか ?. を使います。
const obj = { key: "fixed" };
const key = "dynamic";
console.log(obj.key); // fixed（固定キー）
console.log(obj[key]); // undefined（'dynamic'キーはない）
// 初期化が必要なケース
const user = {};
// user.profile.city = "東京"; // TypeError（profileがない）
user.profile = {};
user.profile.city = "東京"; // これなら安全
ここが重要です：プロパティにアクセスする前に「途中が存在するか」を確認する癖を付けると、実行時エラーが激減します。動的キーは定数化やスキーマの共有で明確化すると、取り違いを防げます。
まとめ
プロパティアクセスは、ドット記法（固定キーで読みやすい）とブラケット記法（動的・特殊キーに対応）を使い分けます。obj.key と obj[key] は別物で、前者は「固定の文字」、後者は「変数の中身」で参照します。ネストアクセスでは存在確認やオプショナルチェーンを併用し、安全に辿りましょう。キーの設計を明確にし、必要箇所だけブラケット記法を使う——このシンプルな指針で、正確で読みやすいオブジェクト操作が身につきます。