オブジェクト — プロパティの読み書き

商品を 1 件ぶん扱うとき、名前・価格・在庫数を別々の変数に分けて持つと、扱う商品が 2 件になった時点で変数名がぶつかります。配列にまとめると順番で管理することになり、product[1] が価格なのか在庫なのかをコードを書く側が覚えておく必要があります。

オブジェクト（キーと値の組を並べて 1 つの変数で扱うデータ構造）を使うと、product.price のように名前を付けて値を出し入れできます。

キーと値の組を作る — オブジェクトリテラル

オブジェクトは { と } の中に、キー: 値 の組をカンマで区切って並べて作ります。この書き方を オブジェクトリテラル（波カッコの中にキーと値を並べて直接オブジェクトを作る書き方）と呼びます。

1 つ 1 つの組が プロパティ（オブジェクトが持つキーと値の組）です。第 4 回で扱った length もプロパティの 1 つで、オブジェクトの場合はこのキーと値の組をそう呼びます。

キーは文字列で、name や price のようにクォートを省いて書けます。値には数値でも文字列でも真偽値でも置けて、配列や別のオブジェクトも入れられます。同じキーを 2 回書いた場合は、あとに書いたほうだけが残ります。

値を取り出すときは、オブジェクトのうしろに . とキー名を続けて product.price と書きます。この書き方が ドット記法（ドットのうしろにキー名を直接書いてプロパティを読む書き方）です。

読む順番は関係ないので、書いた順序を覚えておく必要はありません。

登録されていないキーを読んだときは、エラーにはならず undefined が返ります。配列で範囲外の index を読んだときと同じ扱いです。

const product = {
  name: "ワイヤレスマウス",
  price: 3980,
  stock: 24,
};

console.log(product.name);    // ワイヤレスマウス
console.log(product.price);   // 3980

// 登録されていないキーを読んでもエラーにはならない
console.log(product.color);   // undefined

// 書き換えも同じ書き方で代入する
product.stock = 23;
console.log(product.stock);   // 23

会員のプロフィールを 1 つのオブジェクトにまとめて、必要な項目を取り出します。使う値はコンソールのコメントに書いてあります。

① 名前・プラン名・保有ポイントの 3 つのプロパティを持つオブジェクトを作ってください。

② 名前とプラン名を「田中 太郎 さん / スタンダード」の形で 1 行に表示してください。

③ 保有ポイントを表示してください。

④ 登録していない email を読み取って、そのまま表示してください。

（正しく実行できれば解説が表示されます）

オブジェクトの中にオブジェクトを入れる

API から返ってくる注文データのように、1 件の中にさらにまとまった情報を持たせたい場面があります。値にオブジェクトを置くと入れ子になり、order.customer.name のように . をつなげて内側まで読めます。

入れ子の途中のキーが無いときは注意が必要です。

order.shipping.address は、undefined になった order.shipping に対して . を使うことになり TypeError で止まります。途中が無くても止まらずに読む書き方は次の記事で扱います。

const order = {
  orderId: "ORD-1042",
  customer: {
    name: "佐藤 花子",
    email: "hanako@example.com",
  },
  total: 12800,
};

console.log(order.customer.name);    // 佐藤 花子
console.log(order.customer.email);   // hanako@example.com

// 取り出した値に対して、そのまま文字列の操作もできる
console.log(order.customer.name.length);   // 5

キーを文字列や変数で指定する — ブラケット記法

表示する項目をユーザーが選べる画面では、どのキーを読むかがコードを書く時点では決まりません。ドット記法はキー名をコードに直接書くため、この場面では使えません。

product["price"] のように [] の中に文字列を書くと、その文字列をキーとして読み取ります。これが ブラケット記法（角カッコの中に書いた文字列をキーとしてプロパティを読む書き方）です。

[] の中に書いた内容は先に計算され、その結果がキー名として使われます。product["item" + "Name"] のような書き方もできます。変数を入れれば、実行時にキーが決まります。

ドット記法で書けるのは、記号や空白を含まず、数字で始まらないキー名です。"release-date" のようにハイフンや空白を含むキーは、ブラケット記法でしか読めません。

const product = {
  name: "ワイヤレスマウス",
  price: 3980,
  "release-date": "2026-04-01",
};

// キー名を文字列で直接書く
console.log(product["price"]);          // 3980

// キー名が変数に入っている
const field = "name";
console.log(product[field]);            // ワイヤレスマウス

// 記号を含むキーはブラケット記法だけで読める
console.log(product["release-date"]);   // 2026-04-01

// ドットで書くと "field" というキー名を探してしまう
console.log(product.field);             // undefined

表示する項目を実行時に切り替えられるように、キーを変数で指定して読み取ります。product は宣言済みです。

① 項目名を入れた変数を用意して、その変数を経由して価格を表示してください。

② 同じ変数の中身を在庫の項目名に入れ替えて、在庫数を表示してください。

③ ハイフンを含むキーの値を表示してください。

④ 商品名をドット記法とブラケット記法の両方で読み取り、同じ値かどうかを表示してください。

プロパティを増やす・消す・あるかを調べる

設定画面のデータのように、あとから項目が増えたり、使わなくなった項目を外したりするオブジェクトがあります。オブジェクトは作ったあとでもプロパティを足したり外したりできます。

追加は、まだ無いキーに値を代入するだけです。settings.notifications = true; と書けば、その場でプロパティが 1 つ増えます。配列と同じく、const で宣言したオブジェクトでも追加や削除はできます。

取り除くときは delete settings.language; と書きます。delete（プロパティをオブジェクトから取り除く演算子）はキーごと消すので、消したあとに読むと undefined が返ります。

キーがあるかどうかは "language" in settings で調べます。in（キーがオブジェクトにあるかどうかを true か false で返す演算子）は、左にキー名の文字列、右にオブジェクトを書きます。

値が undefined のプロパティでも、キーがあれば true を返します。

キー名の打ち間違いはエラーにならない

member.piont のように存在しないキーを読んでも、実行は止まらず undefined が返ります。エラーが出ないぶん、表示が空になったり計算結果が NaN になったりして初めて気づくことになります。キーがあるかどうかを確かめたいときは、"points" in member のように in で調べます。

const settings = {
  theme: "dark",
  language: "ja",
};

// 追加は代入するだけ
settings.notifications = true;
console.log(settings.notifications);   // true

// delete でキーごと取り除く
delete settings.language;
console.log(settings.language);        // undefined

// in はキーの有無を返す
console.log("language" in settings);   // false
console.log("theme" in settings);      // true

// 値が undefined でも、キーがあれば true
settings.theme = undefined;
console.log("theme" in settings);      // true

アプリの設定オブジェクトに項目を足したり外したりして、いま何が残っているかを確かめます。settings は宣言済みです。

① 通知を受け取るかどうかの項目 notifications を、値 true で追加してください。

② 言語の項目を取り除いてください。

③ 追加した項目と取り除いた項目が残っているかを、1 つずつ調べて表示してください。

④ 変更後の設定の中身を、そのまま表示してください。

キーと値をまとめて取り出す — Object.keys / values / entries

設定が何項目あるかを数えたい、登録されている項目を全部並べたい、といった場面では、キー名を 1 つずつ書いていられません。オブジェクトの中身を配列に変換すると、配列で使えた操作をそのまま持ち込めます。

Object.keys(オブジェクト) はキーだけを並べた配列を返します。Object.values(オブジェクト) は値だけを並べた配列、Object.entries(オブジェクト) は [キー, 値] という 2 要素の配列を並べた配列を返します。

どれも元のオブジェクトは変えません。

返ってくるのは配列なので、length で項目数を数えたり、join でつないだり、includes で探したりできます。Object.keys(settings).length が、そのままオブジェクトのプロパティ数です。

const order = {
  orderId: "ORD-1042",
  customer: "佐藤 花子",
  total: 12800,
};

// キーだけ / 値だけを配列で取り出す
console.log(Object.keys(order).join(", "));       // orderId, customer, total
console.log(Object.values(order).join(" / "));    // ORD-1042 / 佐藤 花子 / 12800

// 項目数は配列の length で数える
console.log(Object.keys(order).length);           // 3

// entries は [キー, 値] の配列を並べて返す
console.log(Object.entries(order)[1].join(": ")); // customer: 佐藤 花子

注文オブジェクトの中身を、キー・値・組の 3 つの形で取り出して一覧にします。order は宣言済みです。

① キーだけを取り出して「, 」でつないで表示してください。

② 値の中に「佐藤 花子」が含まれているかどうかを表示してください。

③ キーと値の組が何組あるかを表示してください。

④ 組を 1 つずつ「キー: 値」の形にして、3 行で表示してください。