プロパティと値とは何か
オブジェクトは「キー（プロパティ名）と値」のペアを集めた入れ物です。キーは通常“文字列”か“シンボル”、値は数値・文字列・真偽値・配列・別オブジェクト・関数など何でも入れられます。ここが重要です：配列が“順序”で取り出すのに対し、オブジェクトは“名前（キー）”で取り出します。プロパティを正しく定義・読み書きできると、現実のデータや設定を自然に表現できます。
const user = { id: 1, name: "Alice", active: true }; // キー:id/name/active
プロパティの定義・アクセス・更新
作り方と基本アクセス（ドット／ブラケット）
const product = { name: "Pen", price: 120 };
// 読み取り
console.log(product.name); // "Pen"（ドット）
console.log(product["price"]); // 120（ブラケット）
// 追加・更新・削除
product.color = "blue"; // 追加
product.price = 150; // 更新
delete product.color; // 削除
ここが重要です：ドットは静的キーに最適、ブラケットは変数キーや記号・スペースを含むキーに必須です。
動的キー（計算式プロパティ名）
const field = "full name";
const person = { [field]: "Alice A." }; // "full name" キーを動的に作成
console.log(person["full name"]);
ここが重要です：キーを組み立てるときは必ずブラケット。ドットでは変数展開できません。
値の型とメソッド（関数を値にする）
値はあらゆる型を入れられる
const config = {
retry: 3, // 数値
title: "ようこそ", // 文字列
secure: true, // 真偽値
tags: ["js", "web"], // 配列
owner: { id: 1 }, // オブジェクト
};
関数を“メソッド”として持たせる
const counter = {
value: 0,
inc() { this.value++; }, // メソッド（関数値）
reset() { this.value = 0; }
};
counter.inc();
ここが重要です：メソッド内の this は“そのオブジェクト”を指します。アロー関数は this を束縛しないため、メソッドには通常の関数記法が安全です。
安全なアクセスと既定値（欠損に強く）
プロパティが“無いかも”への備え
const order = { customer: { name: "Alice" } };
const name = order.customer?.name ?? "(unknown)";
- ?. は「存在すれば辿る、無ければ undefined」で TypeError を防ぐ。
- ?? は「null/undefined のとき既定値」を選ぶ安全な合体演算。
存在判定の正しい使い分け
const obj = { a: 0, b: null };
"a" in obj; // true（キーの有無）
Object.hasOwn(obj, "a"); // true（自前のキーのみ）
obj.c === undefined; // 値が未定義かどうか（キーの有無と同義でない）
ここが重要です：値が 0 や “” のときも“存在する”。“キーがあるか”は in / hasOwn で判定します。
ゲッター／セッターとプロパティの振る舞い
get/set で“振る舞い付きプロパティ”にする
const user = {
first: "Alice",
last: "A.",
get full() { return `${this.first} ${this.last}`; },
set full(v) { [this.first, this.last] = v.split(" "); }
};
user.full = "Bob B.";
console.log(user.full); // "Bob B."
ここが重要です：計算結果をプロパティ風に扱えるため、表示用フォーマットや内部構造の橋渡しに便利です。
プロパティの属性（enumerable/writable/configurable）
const obj = {};
Object.defineProperty(obj, "id", {
value: 1,
enumerable: false, // 反復に出さない
writable: false, // 書き換え不可
configurable: false // 再定義・削除不可
});
ここが重要です：通常は気にしなくても良いですが、隠しプロパティや不変設定を作る場面で役立ちます。
参照とコピー（同じ箱問題の回避）
参照共有に注意（浅いコピーは内側共有）
const orig = { user: { id: 1 }, tag: "x" };
const copy = { ...orig }; // 浅いコピー
copy.user.id = 999;
console.log(orig.user.id); // 999（内側は同じ参照）
ここが重要です：更新は“新インスタンスで差し替え”が安全です。
const updated = { ...orig, user: { ...orig.user, id: 2 } }; // 深さに応じて展開
深いコピーが必要なら
const deepCopy = structuredClone(orig); // 循環や多くの型に対応（環境要件あり）
反復と変換（プロパティを列挙して扱う）
keys/values/entries で配列化して処理
const obj = { id: 1, name: "Alice" };
Object.keys(obj); // ["id", "name"]
Object.values(obj); // [1, "Alice"]
Object.entries(obj); // [["id",1],["name","Alice"]]
for (const [k, v] of Object.entries(obj)) {
console.log(`${k}=${v}`);
}
ここが重要です：for…in は継承プロパティも列挙する可能性があるため、初心者は entries と Object.hasOwn を使うと安全です。
JSON とプロパティ（送受信・保存の注意）
JSON は“文字列”のデータ形式
const data = { id: 1, name: "Alice", ok: true };
const json = JSON.stringify(data); // '{"id":1,"name":"Alice","ok":true}'
const back = JSON.parse(json);
ここが重要です：JSON には関数・undefined・Symbol は含められません。送受信前に“表せる値だけ”に整形します。
よくある落とし穴（重要ポイントの深掘り）
undefined と“キー無し”の混同
obj.x === undefinedは「値が undefined」だが、キーが存在しない場合と区別されない。- キー存在は
("x" in obj)やObject.hasOwn(obj, "x")を使う。
動的キーをドットで書いてしまう
obj.keyVarは文字通り"keyVar"キーを読む。変数キーは必ずobj[keyVar]。
数字キーの文字列化・順序の認識
{ 1: "a" }のキーは"1"（文字列）として扱われる。- オブジェクトの列挙順は「整数っぽいキーが先、その後に通常キー」が基本。厳密な順序が必要なら配列に変換して管理。
プロトタイプの影響を見落とす
for...inは継承チェーン上のキーも列挙し得る。Object.hasOwnで自前のキーに限定する。
まとめ
プロパティは「キーで値へアクセスするためのラベル」、値は「実際のデータや振る舞い」です。静的キーはドット、動的キーや特殊文字はブラケット。欠損には ?. と ?? で安全に、存在判定は in／Object.hasOwn を使い分ける。メソッド・get/set で振る舞いも表現でき、更新は非破壊（スプレッド／入れ子まで展開）で。反復は keys/values/entries で配列化、送受信は JSON へ。これらを押さえれば、初心者でも明確で壊れにくい「プロパティと値」の扱いを設計できます。