はじめに

JavaScriptでプログラムを書く際、データを構造化して扱うために欠かせないのが「オブジェクト」です。オブジェクトは、関連するデータや機能をまとめて管理するための仕組みであり、JavaScriptにおける最も重要なデータ型の1つです。

本記事では、以下の内容を初心者向けにわかりやすく解説します。

  • オブジェクトとは何か
  • オブジェクトの作成方法（オブジェクトリテラル、コンストラクター）
  • プロパティの参照・追加・更新・削除
  • よく使う静的メソッド（Object.keys、Object.values、Object.entries）
  • オブジェクトの実践的な活用パターン

オブジェクトとは

オブジェクトとは、キー（プロパティ名）と値のペアを複数まとめて管理できるデータ構造です。配列がインデックス（数値）で要素を管理するのに対し、オブジェクトは名前付きのキーで値を管理します。

1
2
3
4
5
6
7
8
9

// オブジェクトの例
const user = {
  name: "田中太郎",
  age: 25,
  email: "tanaka@example.com"
};

// 配列の例（比較用）
const colors = ["赤", "青", "緑"];

オブジェクトを使うことで、「ユーザー情報」「商品データ」「設定値」など、意味のあるまとまりとしてデータを表現できます。

オブジェクトの作成方法

JavaScriptでオブジェクトを作成する方法は主に3つあります。

オブジェクトリテラル（最も一般的）

波括弧 {} を使ってオブジェクトを直接記述する方法です。最もシンプルで、日常的なコーディングで最も頻繁に使用されます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// 空のオブジェクト
const emptyObj = {};

// プロパティを持つオブジェクト
const book = {
  title: "JavaScript入門",
  author: "山田花子",
  price: 2980,
  isAvailable: true
};

console.log(book);
// { title: 'JavaScript入門', author: '山田花子', price: 2980, isAvailable: true }

プロパティ名には文字列を使用しますが、識別子として有効な名前であれば引用符を省略できます。空白やハイフンを含む場合は引用符が必要です。

1
2
3
4
5

const product = {
  name: "ノートPC",           // 引用符なし
  "product-id": "NPC-001",   // ハイフンを含むため引用符が必要
  "full name": "高性能ノートパソコン"  // 空白を含むため引用符が必要
};

Objectコンストラクター

new Object() を使ってオブジェクトを作成する方法です。オブジェクトリテラルと同じ結果になりますが、リテラル記法のほうが簡潔なため、こちらはあまり使用されません。

1
2
3
4
5

const person = new Object();
person.name = "佐藤次郎";
person.age = 30;

console.log(person); // { name: '佐藤次郎', age: 30 }

Object.create()メソッド

既存のオブジェクトをプロトタイプとして、新しいオブジェクトを作成する方法です。継承を明示的に制御したい場合に便利です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// プロトタイプとなるオブジェクト
const animal = {
  type: "動物",
  speak() {
    console.log("鳴き声");
  }
};

// animalをプロトタイプとして新しいオブジェクトを作成
const dog = Object.create(animal);
dog.name = "ポチ";

console.log(dog.name); // "ポチ"
console.log(dog.type); // "動物"（プロトタイプから継承）
dog.speak();           // "鳴き声"

プロパティの参照（アクセス）

オブジェクトのプロパティにアクセスするには、ドット記法とブラケット記法の2つの方法があります。

ドット記法

オブジェクト名の後にドット（.）とプロパティ名を続けます。シンプルで読みやすいため、通常はこちらを使用します。

1
2
3
4
5
6
7
8
9

const user = {
  name: "田中太郎",
  age: 25,
  city: "東京"
};

console.log(user.name); // "田中太郎"
console.log(user.age);  // 25
console.log(user.city); // "東京"

ブラケット記法

オブジェクト名の後に角括弧 [] でプロパティ名を文字列として指定します。以下のケースではブラケット記法が必須です。

  • プロパティ名に空白やハイフンが含まれる場合
  • プロパティ名が変数に格納されている場合
  • プロパティ名を動的に決定する場合
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

const product = {
  name: "スマートフォン",
  "product-id": "SP-001",
  price: 89800
};

// ハイフンを含むプロパティ名
console.log(product["product-id"]); // "SP-001"
// console.log(product.product-id); // エラーになる

// 変数を使ったアクセス
const key = "price";
console.log(product[key]); // 89800

// 動的なプロパティアクセス
const properties = ["name", "price"];
properties.forEach(prop => {
  console.log(`${prop}: ${product[prop]}`);
});
// name: スマートフォン
// price: 89800

存在しないプロパティへのアクセス

存在しないプロパティにアクセスすると、エラーではなく undefined が返されます。

1
2
3
4

const user = { name: "田中太郎" };

console.log(user.email);    // undefined
console.log(user.address);  // undefined

プロパティの追加と更新

オブジェクトは作成後もプロパティを自由に追加・更新できます。

プロパティの追加

存在しないプロパティ名に値を代入すると、新しいプロパティが追加されます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

const user = {
  name: "田中太郎"
};

// プロパティの追加
user.age = 25;
user.email = "tanaka@example.com";
user["phone-number"] = "090-1234-5678";

console.log(user);
// {
//   name: '田中太郎',
//   age: 25,
//   email: 'tanaka@example.com',
//   'phone-number': '090-1234-5678'
// }

プロパティの更新

既存のプロパティに新しい値を代入すると、値が上書きされます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

const book = {
  title: "JavaScript入門",
  price: 2980
};

// プロパティの更新
book.price = 2480;
book.title = "JavaScript入門 改訂版";

console.log(book);
// { title: 'JavaScript入門 改訂版', price: 2480 }

プロパティの削除

delete 演算子を使用して、オブジェクトからプロパティを削除できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

const user = {
  name: "田中太郎",
  age: 25,
  email: "tanaka@example.com"
};

// プロパティの削除
delete user.email;

console.log(user);       // { name: '田中太郎', age: 25 }
console.log(user.email); // undefined

削除が成功すると true が返されます。ただし、const で宣言されたオブジェクト自体を削除することはできません（プロパティの削除は可能です）。

プロパティの存在確認

オブジェクトに特定のプロパティが存在するかを確認する方法はいくつかあります。

in演算子

プロパティがオブジェクト自身またはプロトタイプチェーンに存在するかを確認します。

1
2
3
4
5
6
7
8

const user = {
  name: "田中太郎",
  age: 25
};

console.log("name" in user);    // true
console.log("email" in user);   // false
console.log("toString" in user); // true（プロトタイプから継承）

Object.hasOwn()メソッド

オブジェクト自身のプロパティかどうかを確認します（プロトタイプチェーンは含まない）。ES2022で追加された推奨される方法です。

1
2
3
4
5
6
7
8

const user = {
  name: "田中太郎",
  age: 25
};

console.log(Object.hasOwn(user, "name"));     // true
console.log(Object.hasOwn(user, "email"));    // false
console.log(Object.hasOwn(user, "toString")); // false（自身のプロパティではない）

hasOwnProperty()メソッド

Object.hasOwn() と同様の機能ですが、Object.hasOwn() が使用できる環境ではそちらを優先してください。

1
2
3
4
5
6

const user = {
  name: "田中太郎"
};

console.log(user.hasOwnProperty("name"));  // true
console.log(user.hasOwnProperty("email")); // false

よく使うObjectの静的メソッド

Object には、オブジェクトを操作するための便利な静的メソッドが多数用意されています。

Object.keys() - キーの配列を取得

オブジェクトのすべてのキー（プロパティ名）を配列として取得します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

const user = {
  name: "田中太郎",
  age: 25,
  city: "東京"
};

const keys = Object.keys(user);
console.log(keys); // ["name", "age", "city"]

// キーを使ってループ処理
keys.forEach(key => {
  console.log(`${key}: ${user[key]}`);
});
// name: 田中太郎
// age: 25
// city: 東京

Object.values() - 値の配列を取得

オブジェクトのすべての値を配列として取得します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

const user = {
  name: "田中太郎",
  age: 25,
  city: "東京"
};

const values = Object.values(user);
console.log(values); // ["田中太郎", 25, "東京"]

// 値の合計を計算（数値のみ）
const scores = { math: 85, english: 72, science: 90 };
const total = Object.values(scores).reduce((sum, score) => sum + score, 0);
console.log(total); // 247

Object.entries() - キーと値のペアを取得

オブジェクトのキーと値のペアを [key, value] 形式の配列として取得します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

const user = {
  name: "田中太郎",
  age: 25,
  city: "東京"
};

const entries = Object.entries(user);
console.log(entries);
// [["name", "田中太郎"], ["age", 25], ["city", "東京"]]

// 分割代入を使ったループ処理
for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}
// name: 田中太郎
// age: 25
// city: 東京

Object.fromEntries() - 配列からオブジェクトを作成

[key, value] 形式の配列からオブジェクトを作成します。Object.entries() の逆の操作です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

const entries = [
  ["name", "田中太郎"],
  ["age", 25],
  ["city", "東京"]
];

const user = Object.fromEntries(entries);
console.log(user);
// { name: "田中太郎", age: 25, city: "東京" }

// Map からオブジェクトへの変換にも使える
const map = new Map([
  ["a", 1],
  ["b", 2]
]);
const obj = Object.fromEntries(map);
console.log(obj); // { a: 1, b: 2 }

Object.assign() - オブジェクトのコピー・マージ

1つ以上のソースオブジェクトのプロパティをターゲットオブジェクトにコピーします。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// オブジェクトのコピー（シャローコピー）
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original);
console.log(copy); // { a: 1, b: 2 }

// 複数のオブジェクトをマージ
const defaults = { theme: "light", language: "ja" };
const userSettings = { theme: "dark" };
const merged = Object.assign({}, defaults, userSettings);
console.log(merged); // { theme: "dark", language: "ja" }

ES6以降では、スプレッド構文を使うとより簡潔に書けます。

1
2
3
4
5

// スプレッド構文によるコピー
const copy = { ...original };

// スプレッド構文によるマージ
const merged = { ...defaults, ...userSettings };

オブジェクトのネスト

オブジェクトのプロパティには、別のオブジェクトを値として持たせることができます。これを「ネストしたオブジェクト」と呼びます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

const company = {
  name: "株式会社サンプル",
  address: {
    postalCode: "100-0001",
    city: "東京都千代田区",
    building: "サンプルビル3F"
  },
  employees: [
    { name: "田中太郎", role: "エンジニア" },
    { name: "山田花子", role: "デザイナー" }
  ]
};

// ネストしたプロパティへのアクセス
console.log(company.address.city);      // "東京都千代田区"
console.log(company.employees[0].name); // "田中太郎"

ネストが深い場合、途中のプロパティが undefined だとエラーになります。オプショナルチェーン（?.）を使うと安全にアクセスできます。

1
2
3
4
5
6
7
8
9

const user = {
  name: "田中太郎"
};

// オプショナルチェーンなし（エラーになる可能性）
// console.log(user.address.city); // TypeError

// オプショナルチェーンあり
console.log(user.address?.city); // undefined（エラーにならない）

実践的な活用例

設定オブジェクトとデフォルト値

関数に複数のオプションを渡す場合、オブジェクトを使うと便利です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

function createUser(options) {
  // デフォルト値とマージ
  const defaults = {
    name: "ゲスト",
    age: 0,
    role: "user",
    isActive: true
  };
  
  const user = { ...defaults, ...options };
  
  return user;
}

const user1 = createUser({ name: "田中太郎", age: 25 });
console.log(user1);
// { name: "田中太郎", age: 25, role: "user", isActive: true }

const user2 = createUser({ name: "山田花子", role: "admin" });
console.log(user2);
// { name: "山田花子", age: 0, role: "admin", isActive: true }

オブジェクトを使ったデータ変換

配列とオブジェクトを組み合わせて、データを変換する例です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

const users = [
  { id: 1, name: "田中太郎", department: "開発部" },
  { id: 2, name: "山田花子", department: "営業部" },
  { id: 3, name: "佐藤次郎", department: "開発部" }
];

// IDをキーとしたオブジェクトに変換
const userById = Object.fromEntries(
  users.map(user => [user.id, user])
);

console.log(userById[1].name); // "田中太郎"

// 部署ごとにグルーピング
const byDepartment = users.reduce((acc, user) => {
  const dept = user.department;
  if (!acc[dept]) {
    acc[dept] = [];
  }
  acc[dept].push(user);
  return acc;
}, {});

console.log(byDepartment);
// {
//   "開発部": [{ id: 1, ... }, { id: 3, ... }],
//   "営業部": [{ id: 2, ... }]
// }

オブジェクトの比較に関する注意点

JavaScriptでは、オブジェクトは参照型です。同じ内容のオブジェクトでも、別々に作成された場合は等しくありません。

1
2
3
4
5
6
7
8

const obj1 = { name: "田中" };
const obj2 = { name: "田中" };

console.log(obj1 === obj2); // false（異なるオブジェクト）

// 同じオブジェクトへの参照
const obj3 = obj1;
console.log(obj1 === obj3); // true（同じオブジェクトを参照）

オブジェクトの内容を比較したい場合は、JSON.stringify() を使う方法があります（ただし、プロパティの順序が異なると等しくならない点に注意）。

1
2
3
4

const obj1 = { name: "田中", age: 25 };
const obj2 = { name: "田中", age: 25 };

console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true

まとめ

この記事では、JavaScriptのオブジェクトについて基本操作を解説しました。

操作 方法
作成 オブジェクトリテラル {}、new Object()、Object.create()
参照 ドット記法 obj.key、ブラケット記法 obj["key"]
追加・更新 obj.newKey = value
削除 delete obj.key
キー取得 Object.keys(obj)
値取得 Object.values(obj)
キー・値ペア取得 Object.entries(obj)
存在確認 Object.hasOwn(obj, key)、"key" in obj

オブジェクトはJavaScriptの核心的なデータ構造であり、配列やJSONとの組み合わせで強力なデータ処理が可能になります。まずは基本操作をしっかり身につけ、実践的なコードで活用してみてください。

参考リンク