【JavaScript】オブジェクト（Object）の基本を解説｜Webの基礎

記事内には広告が含まれます

2026年9月13日

はじめに

前回の記事では、条件分岐・繰り返し処理の基本的な使い方を解説しました。

今回は、複数の値を1つにまとめて扱えるオブジェクト（Object）の基本を解説します。配列の操作を解説した記事では配列の中にオブジェクトを入れて扱う例を紹介しましたが、今回はそのオブジェクト自体の作り方・使い方にしぼって基礎から見ていきます。名前と値をペアで管理できるため、VBAで言うところの「連想配列」や「クラスのプロパティ」に近い役割を果たします。

オブジェクトとは？（基本の作り方）

オブジェクトとは、「プロパティ名（キー）」と「値」のペアをいくつもまとめて持てるデータです。{}（波括弧）の中にプロパティ名: 値を,（カンマ）区切りで並べて作ります。

const item = {
    name: "コピー用紙",
    price: 450,
    stock: 3,
};

この書き方をオブジェクトリテラルと呼びます。itemという1つの変数の中に、商品名・価格・在庫数という3つの値がまとまって入っている状態です。

配列の操作を解説した記事で扱った配列は「順番」で値を管理するのに対し、オブジェクトは「名前（プロパティ名）」で値を管理します。順番に意味がない・名前で呼び出したいデータにはオブジェクト、順番に意味がある・同じ種類のデータを並べたい場合は配列が向いています。

プロパティへのアクセス（ドット記法・ブラケット記法）

オブジェクトの中の値を取り出すには、2種類の書き方があります。

const item = {
    name: "コピー用紙",
    price: 450,
    stock: 3,
};

console.log(item.name);      // "コピー用紙"（ドット記法）
console.log(item["price"]);  // 450（ブラケット記法）

item.nameのように.（ドット）でつなぐ書き方をドット記法、item["price"]のように[]（角括弧）とプロパティ名の文字列で指定する書き方をブラケット記法と呼びます。

普段はドット記法で十分ですが、プロパティ名が変数に入っている場合はブラケット記法でしか書けません。

const key = "stock";
console.log(item[key]); // 3

item.keyと書いてしまうと「keyという名前のプロパティ」を探しにいってしまうため、変数の中身（”stock”）をプロパティ名として使いたいときはitem[key]のようにブラケット記法にする必要があります。

プロパティの追加・変更・削除

作成済みのオブジェクトにも、後からプロパティを追加・変更・削除できます。

const item = {
    name: "コピー用紙",
    price: 450,
};

item.stock = 3;       // 追加
item.price = 480;     // 変更
delete item.stock;    // 削除

console.log(item); // { name: "コピー用紙", price: 480 }

代入する形でプロパティを指定すれば、存在しなければ新規追加、存在すればその値を上書きします。削除したい場合はdelete演算子を使います。

constで宣言したオブジェクトでも、プロパティの追加・変更・削除は可能です。constが禁止しているのは変数自体への再代入（item = {}のように別のオブジェクトを入れ直すこと）であり、オブジェクトの中身を書き換えることではありません。

メソッド（オブジェクトの中に関数を持たせる）

プロパティの値には、文字列や数値だけでなく関数の使い方を解説した記事で紹介した関数を入れることもできます。オブジェクトの中に入っている関数を、特にメソッドと呼びます。

const item = {
    name: "コピー用紙",
    price: 450,
    stock: 3,
    describe() {
        return `${this.name}：¥${this.price}（残り${this.stock}）`;
    },
};

console.log(item.describe()); // "コピー用紙：¥450（残り3）"

メソッドの中ではthisを使うことで、そのメソッドを持っているオブジェクト自身（この例ではitem）のプロパティにアクセスできます。item.nameと書く代わりにthis.nameと書くイメージです。

Object.keysなどでプロパティを一覧取得する

オブジェクトが持つプロパティ名・値をまとめて取り出したい場合は、Objectに用意された関数を使います。

const item = {
    name: "コピー用紙",
    price: 450,
    stock: 3,
};

console.log(Object.keys(item));    // ["name", "price", "stock"]
console.log(Object.values(item));  // ["コピー用紙", 450, 3]
console.log(Object.entries(item)); // [["name","コピー用紙"], ["price",450], ["stock",3]]

keys関数はプロパティ名だけを、values関数は値だけを、entries関数は「プロパティ名と値のペア」を、それぞれ配列にして返します。いずれも配列の操作を解説した記事で紹介したforEach・mapと組み合わせて使うことが多い関数です。

Object.entries(item).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
});
// name: コピー用紙
// price: 450
// stock: 3

for…inでプロパティをくり返し処理する

条件分岐・繰り返しを解説した記事で紹介したfor文には、オブジェクトのプロパティを1つずつ取り出すための専用の書き方for...inがあります。

const item = {
    name: "コピー用紙",
    price: 450,
    stock: 3,
};

for (const key in item) {
    console.log(`${key}: ${item[key]}`);
}
// name: コピー用紙
// price: 450
// stock: 3

keyにはプロパティ名が順番に入るため、値を取り出すにはブラケット記法（item[key]）を使う必要があります。配列に対する繰り返しにはfor...ofやforEachを使いますが、オブジェクトに対してはfor...inを使う、と覚えておくとよいでしょう。

実務サンプル（在庫リストの合計金額を計算する）

配列の操作を解説した記事で扱った在庫リストを、オブジェクトの配列として作り直し、Object.valuesとreduceを組み合わせて合計金額を計算してみます。

const stockList = [
    { name: "コピー用紙", price: 450, stock: 3 },
    { name: "ファイル", price: 120, stock: 2 },
    { name: "ボールペン", price: 100, stock: 15 },
];

const lowStockItems = stockList.filter((item) => item.stock <= 3);

const totalAmount = stockList.reduce((sum, item) => {
    return sum + item.price * item.stock;
}, 0);

console.log(lowStockItems.map((item) => item.name));
// ["コピー用紙", "ファイル"]

console.log(`在庫金額合計：¥${totalAmount.toLocaleString()}`);
// "在庫金額合計：¥3,090"

配列の中の1件1件がオブジェクトになっており、item.stock・item.priceのようにドット記法でプロパティへアクセスしています。filter・reduce自体は配列の操作を解説した記事で紹介した内容そのままで、今回学んだオブジェクトの扱い方と組み合わせることで、より実務に近いデータ構造を扱えるようになります。