JavaScriptの基本！Objectと主要メソッドの詳細解説

JavaScriptの基礎であるオブジェクト（Object）は、キーと値のペアで構成されたデータ構造です。
オブジェクトを操作するための主要なメソッドとして、Object.keys、Object.values、
そしてObject.entriesがあります。
本記事では、これらの基本メソッドについて、具体例を交えながら詳しく解説します。

1. オブジェクト（Object）とは？

オブジェクトは、JavaScriptで最も基本的なデータ型であり、あらゆるプログラムで頻繁に使用されます。キー（プロパティ名）と値（プロパティ値）のペアで構成され、キーは文字列またはシンボルでなければなりません。

基本構文

const obj = {
  key1: "value1",
  key2: "value2",
};

例: シンプルなオブジェクト

const person = {
  name: "Alice",
  age: 30,
  isStudent: false,
};

console.log(person.name); // "Alice"
console.log(person["age"]); // 30

オブジェクト操作の基本メソッド

Object.keys()

概要: オブジェクトのすべてのキーを配列として取得します。
主な用途
オブジェクトのキーを反復処理する際に便利。
オブジェクトの構造を確認したいとき。

使用例

const person = { name: "Alice", age: 30, city: "Tokyo" };
const keys = Object.keys(person);

console.log(keys); // ["name", "age", "city"]

応用例: ループ処理

const person = { name: "Alice", age: 30, city: "Tokyo" };

Object.keys(person).forEach(key => {
  console.log(`${key}: ${person[key]}`);
});
// 出力:
// name: Alice
// age: 30
// city: Tokyo

Object.values()

概要: オブジェクトのすべての値を配列として取得します。
主な用途
値だけを抽出して操作する場面に便利。
特定の値を集計する場合など。

使用例

const person = { name: "Alice", age: 30, city: "Tokyo" };
const values = Object.values(person);

console.log(values); // ["Alice", 30, "Tokyo"]

応用例: 値の集計

const scores = { math: 90, english: 85, science: 88 };
const total = Object.values(scores).reduce((sum, score) => sum + score, 0);

console.log(total); // 263

2.3 Object.entries()

概要: オブジェクトのキーと値をペアにした配列の配列を返します。
主な用途
キーと値を同時に処理する場面で便利。
オブジェクトを簡単に変換する場合に活用。

使用例

const person = { name: "Alice", age: 30, city: "Tokyo" };
const entries = Object.entries(person);

console.log(entries);
// [["name", "Alice"], ["age", 30], ["city", "Tokyo"]]

応用例: 二次元配列をオブジェクトに変換

const entries = [["name", "Alice"], ["age", 30], ["city", "Tokyo"]];
const obj = Object.fromEntries(entries);

console.log(obj); // { name: "Alice", age: 30, city: "Tokyo" }

応用例: 動的な処理

const person = { name: "Alice", age: 30, city: "Tokyo" };

Object.entries(person).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});
// 出力:
// name: Alice
// age: 30
// city: Tokyo

これらのメソッドを使うメリット

1. コードの簡潔化: オブジェクトのキーや値を効率的に操作でき、コードの冗長さを減らせます。
2. 可読性の向上: 直感的に理解できるメソッド名で、意図が伝わりやすいコードを書けます。
3. 柔軟性: 配列の持つ高機能メソッド（map、filter、reduceなど）と組み合わせて、複雑な処理を簡単に実現できます。

使用上の注意点

プロトタイプのプロパティにはアクセスしない

Object.keys、Object.values、Object.entriesは、オブジェクト自身のプロパティ
（列挙可能なプロパティ）だけを取得します。プロトタイプチェーン上のプロパティは対象外です。

const obj = Object.create({ inherited: "value" });
obj.ownProperty = "value";

console.log(Object.keys(obj)); // ["ownProperty"]

順序は保証されない

オブジェクトのキーや値の順序は厳密には保証されません。
ただし、ほとんどのモダンなJavaScriptエンジンでは、
キーが文字列の場合に順序が保持される傾向があります。

まとめ

Object.keys、Object.values、Object.entriesは、
JavaScriptでオブジェクトを操作する際に欠かせない基本メソッドです。
これらをマスターすることで、より効率的で簡潔なコードを書けるようになります。
特に、ループ処理や動的なデータ操作の場面で活用する機会が多いので、ぜひ練習してみてください。

Favorite