JavaScriptのObject.fromEntriesの使い方！キーと値のペアからオブジェクト生成

JavaScriptのObject.fromEntriesメソッドは、[キー, 値]のペアのリスト（iterable、例えば配列やMap）を受け取ります。
そして、それらのペアから新しいオブジェクトを生成するために使用されます。

これは、Object.entriesの逆の操作であり、オブジェクトのプロパティを操作した後で元のオブジェクト形式に戻したい場合や、Mapオブジェクトをプレーンなオブジェクトに変換したい場合などに非常に便利です。
データの変換、整形、特定の処理後にオブジェクトを再構築する際に強力なツールとなります。

この記事では、Object.fromEntriesメソッドの基本的な使い方、引数、戻り値、主要な使用例、そして使用する際の重要な注意点について解説します。

Object.fromEntriesメソッドの基本的な構文

Object.fromEntriesメソッドの基本的な構文は以下の通りです。

Object.fromEntries(iterable)
  • iterable: 必須。[キー, 値]のペア（エントリー）を含む反復可能なオブジェクト（例: Array、Map、Setなど）です。

引数(iterable)

  • 必須です。
  • この引数は、[キー, 値]のペアを要素として持つ反復可能なオブジェクトである必要があります。
  • 最も一般的なのは、Object.entriesの戻り値である配列の配列や、Map オブジェクトです。
  • 要素が2つ以上の配列であっても、最初の2つの要素がキーと値として使用されます。

Object.fromEntriesの戻り値

指定されたエントリーから生成された新しいオブジェクトが返されます。

Object.fromEntriesメソッドを使ってみる

Object.fromEntriesを実際に使ってみて、動作を確認します。

例1： Object.entriesの逆の操作

Object.entriesでオブジェクトをエントリーの配列に変換し、それをObject.fromEntriesで元のオブジェクトに戻します。

const user = {
  name: 'Alice',
  age: 30,
  city: 'New York'
};

// Object.entriesで [キー, 値] のペアの配列を取得
const userEntries = Object.entries(user);
console.log("エントリーの配列:", userEntries);
/*
出力:
エントリーの配列: [
  [ 'name', 'Alice' ],
  [ 'age', 30 ],
  [ 'city', 'New York' ]
]
*/

// Object.fromEntriesでエントリーの配列からオブジェクトを再構築
const newUser = Object.fromEntries(userEntries);
console.log("再構築されたオブジェクト:", newUser);
// 出力: 再構築されたオブジェクト: { name: 'Alice', age: 30, city: 'New York' }

console.log(user === newUser); // 出力: false (新しいオブジェクトが生成される)

最初にuserオブジェクトを作成して、次の処理でObject.entriesを使用して配列に戻しています。
出力すると、配列になっていることが確認できます。

その配列に対して、Object.fromEntriesを使用して、もう一度オブジェクトに戻しています。
出力すると、元のオブジェクトと同じ構成でオブジェクトができていることが確認できました。

このように、Object.fromEntriesはObject.entriesと対になる非常に便利なメソッドです。

例2： Mapオブジェクトをプレーンなオブジェクトに変換する

Mapオブジェクトはキーの順序を保持し、任意の型のキーを使用できますが、プレーンなオブジェクトに変換したい場合に役立ちます。

const userMap = new Map([
  ['id', 101],
  ['username', 'john_doe'],
  ['isActive', true]
]);

console.log("Mapオブジェクト:", userMap);
// 出力: Map(3) { 'id' => 101, 'username' => 'john_doe', 'isActive' => true }

// MapをObject.fromEntries()でオブジェクトに変換
const userObject = Object.fromEntries(userMap);
console.log("変換されたオブジェクト:", userObject);
// 出力: 変換されたオブジェクト: { id: 101, username: 'john_doe', isActive: true }

userMap変数に対して、Mapを作成しました。
出力すると、Mapになっています。

そのuserMap変数をObject.fromEntriesに渡すことで、オブジェクトに変換できました。

例3： 配列の配列からオブジェクトを生成する

配列の中に[キー, 値]の形式の配列があれば、Object.entriesの出力でなくてもObject.fromEntriesに渡すことができます。

const customData = [
  ['productName', 'Laptop Pro'],
  ['price', 1200],
  ['stock', 50]
];

const productObject = Object.fromEntries(customData);
console.log("カスタムデータから生成されたオブジェクト:", productObject);
// 出力: カスタムデータから生成されたオブジェクト: { productName: 'Laptop Pro', price: 1200, stock: 50 }

customData変数に二次元配列を作成しました。
その配列をObject.fromEntriesに渡して、オブジェクトに変換しました。

また、配列の中の配列の要素は、それぞれふたつずつですが二つ以上の場合は、最初のふたつの要素が「キーと値」として使われます。
下記のような感じです。

const data = [
  ['a', 1, 'extra'],
  ['b', 2]
];
console.log(Object.fromEntries(data)); // { a: 1, b: 2 }

例4： Array.prototype.mapと組み合わせてオブジェクトの値を変換する

オブジェクトのプロパティを変換してから新しいオブジェクトを再構築する際に非常に強力です。

const scores = {
  math: 85,
  science: 92,
  history: 78
};

// 1. Object.entries() でキーと値のペアを取得
// 2. map() で各スコアを10点加算する
// 3. Object.fromEntries() で新しいオブジェクトを生成
const boostedScores = Object.fromEntries(
  Object.entries(scores).map(([key, value]) => {
    return [key, value + 10]; // スコアに10点加算
  })
);

console.log("元のスコア:", scores);
// 出力: 元のスコア: { math: 85, science: 92, history: 78 }

console.log("ブーストされたスコア:", boostedScores);
// 出力: ブーストされたスコア: { math: 95, science: 102, history: 88 }

scoresオブジェクトをObject.entriesで配列にしたあと、mapを使って値に「+10」した新しい二次元配列を作成しています。
そして、Object.fromEntriesでオブジェクトに戻しています。

結果を確認すると、元のオブジェクトの値が変更された新しいオブジェクトが作成されました。

Object.fromEntriesを使う際の重要な注意点

Object.fromEntriesを使うときの注意点です。

重複するキーの扱い

iterable内に同じキーを持つ複数のエントリーが存在する場合、後から出現するエントリーの値が前の値を上書きします。

const duplicateEntries = [
  ['a', 1],
  ['b', 2],
  ['a', 3] // キー 'a' が重複
];
const obj = Object.fromEntries(duplicateEntries);
console.log(obj); // 出力: { a: 3, b: 2 } (最後の 'a' の値が採用される)

非文字列/シンボルキーの変換

iterable内のキーが文字列でもシンボルでもない場合（例: 数値、真偽値、オブジェクトなど）
それらは自動的に文字列に変換されてプロパティ名として使用されます。

const nonStringKeys = [
  [1, 'one'],
  [true, 'boolean'],
  [{ prop: 'obj' }, 'object key'] // オブジェクトは文字列 '[object Object]' に変換される
];
const obj = Object.fromEntries(nonStringKeys);
console.log(obj);
// 出力: { '1': 'one', 'true': 'boolean', '[object Object]': 'object key' }

プロパティの属性

Object.fromEntriesで作成されるプロパティは、デフォルトで列挙可能（enumerable: true）、書き込み可能（writable: true）、設定可能（configurable: true）です。
これらの属性を制御したい場合は、Object.definePropertyやObject.definePropertiesを別途使用する必要があります。

シャロー変換

Object.fromEntriesは、Object.assignと同様に、シャロー（浅い）変換を行います。
エントリーの値がオブジェクトの場合、そのオブジェクトへの参照が新しいオブジェクトにコピーされます。

ディープコピーが必要な場合は、別途処理が必要です。

順序の保証

Object.fromEntriesによって生成されるオブジェクトのプロパティの順序は、ECMAScriptの仕様では厳密には保証されていませんが、現代のJavaScriptエンジンでは一般的に、iterable内のエントリーの挿入順序が保持されます（特に文字列キーの場合）
ただし、数値キーは昇順にソートされることがあります。

まとめ

JavaScriptのObject.fromEntriesメソッドは、[キー, 値]のペアのリストから新しいオブジェクトを生成するための非常に強力で便利なツールです。
Object.entriesとの組み合わせでオブジェクトの変換・再構築を効率化したり、Mapオブジェクトをプレーンなオブジェクトに変換したりする際に活躍します。

重複キーの扱いや非文字列キーの変換、プロパティの属性など、いくつかの重要な注意点を理解して使用することが不可欠です。
これらのポイントを踏まえ、Object.fromEntriesを効果的に活用し、JavaScriptアプリケーションにおけるデータ変換とオブジェクト操作を効率化しましょう。

コメント