JavaScript | ES6+ 文法：オブジェクト拡張 – Object.fromEntries

JavaScript JavaScript
スポンサーリンク

Object.fromEntries とは何か

Object.fromEntries は、「配列（や Map）の一覧」からオブジェクトを作り直すためのメソッドです。
一言でいうと、Object.entries の「逆」です。

const entries = [
  ["id", 1],
  ["name", "Alice"]
];

const obj = Object.fromEntries(entries);
console.log(obj); // { id: 1, name: "Alice" }
JavaScript

ここが重要です：
Object.fromEntries(配列) は、「[キー, 値] の形の配列たち」からオブジェクトを作ります。
つまり、[["key1", value1], ["key2", value2], ...] → { key1: value1, key2: value2, ... } という変換です。

まずは Object.entries との関係をイメージする

entries → fromEntries で「行って戻る」

Object.entries は「オブジェクト → 配列の配列」でした。
Object.fromEntries はその逆、「配列の配列 → オブジェクト」です。

const user = { id: 1, name: "Alice" };

// オブジェクト → entries（配列の配列）
const entries = Object.entries(user);
console.log(entries);
// [ ["id", 1], ["name", "Alice"] ]

// entries（配列の配列） → オブジェクト
const obj = Object.fromEntries(entries);
console.log(obj);
// { id: 1, name: "Alice" }
JavaScript

ここが重要です：
Object.fromEntries(Object.entries(obj)) をすると、元のオブジェクトと同じものができる
（浅いコピーのようなイメージ）という関係になっています。

どんな形の配列を渡せばいいのか

基本形は「[key, value] の配列を並べた配列」

fromEntries に渡すのは、こういう形です。

const entries = [
  ["key1", "value1"],
  ["key2", "value2"],
];

const obj = Object.fromEntries(entries);
// { key1: "value1", key2: "value2" }
JavaScript

順番に見てみると、

1つ目の配列 ["key1", "value1"] → key1: "value1"
2つ目の配列 ["key2", "value2"] → key2: "value2"

という風に、「配列の0番目がキー」「1番目が値」として扱われます。

キーは文字列（もしくはシンボル）として扱われます。
通常は「文字列でOK」と覚えておけば問題ないです。

いちばんよくある使い方：entries と組み合わせる

オブジェクトを「配列として加工して」戻す

ES6+ では、「オブジェクトを一度 entries で配列に変換 → map / filter などで加工 → fromEntries でオブジェクトに戻す」というパターンが非常によく出てきます。

例：オブジェクトの「値」を2倍にした新しいオブジェクトを作る。

const priceTable = { apple: 100, orange: 80 };

const doubled = Object.fromEntries(
  Object.entries(priceTable).map(([name, price]) => [name, price * 2])
);

console.log(doubled);
// { apple: 200, orange: 160 }
JavaScript

流れを分解します。

  1. Object.entries(priceTable)
    → [["apple", 100], ["orange", 80]]
  2. .map(([name, price]) => [name, price * 2])
    → [["apple", 200], ["orange", 160]]
  3. Object.fromEntries(...)
    → { apple: 200, orange: 160 }

ここが重要です：
entries で「オブジェクト → 配列」、配列として自由に加工、fromEntries で「配列 → オブジェクト」
この往復が、Object.fromEntries 最大の使いどころです。

実務でよくあるパターン

特定のプロパティだけ残した新オブジェクトを作る

例：フラグオブジェクトから、値が true のものだけを残したオブジェクトを作る。

const flags = { debug: false, cache: true, log: true };

const enabledOnly = Object.fromEntries(
  Object.entries(flags).filter(([key, value]) => value === true)
);

console.log(enabledOnly);
// { cache: true, log: true }
JavaScript

ポイントはここです。

  1. Object.entries(flags) で [key, value] の配列一覧にする
  2. filter で value === true のものだけに絞る
  3. Object.fromEntries でオブジェクトに戻す

「オブジェクト版の filter」として使えるイメージです。

キーを変換した新オブジェクトを作る

例：キー名を全部大文字に変えたい。

const env = { node_env: "production", version: "1.0.0" };

const upperKeyEnv = Object.fromEntries(
  Object.entries(env).map(([key, value]) => [key.toUpperCase(), value])
);

console.log(upperKeyEnv);
// { NODE_ENV: "production", VERSION: "1.0.0" }
JavaScript

キー名も値も自由に変えられるのが、entries → fromEntries パターンの強さです。

フォームデータなど「entries を返すもの」からオブジェクトへ

ブラウザの FormData や URLSearchParams は、formData.entries() のように「イテラブルな entries」を返します。
それを Object.fromEntries にそのまま渡すことで、「普通のオブジェクト」に変換できます。

イメージだけ示します（ブラウザ環境想定）。

// 例：<form> から作った FormData
const formData = new FormData(formElement);

const data = Object.fromEntries(formData.entries());
console.log(data);
// 例えば { username: "alice", email: "a@example.com" } のような形
JavaScript

ここが重要です：
「entries を返してくれるもの → fromEntries でオブジェクト化」という流れは、ブラウザでの実務でもかなり便利です。

Map との相性も良い

Map から普通のオブジェクトへ変換

Map 自体も「[key, value] の一覧」を持つオブジェクトです。
map.entries() を Object.fromEntries に渡せば、オブジェクトに変換できます。

const map = new Map();
map.set("id", 1);
map.set("name", "Alice");

const obj = Object.fromEntries(map);
console.log(obj);
// { id: 1, name: "Alice" }
JavaScript

Map はキーにオブジェクトなども使えますが、
Object.fromEntries でオブジェクトにするときは、キーは文字列（に変換されたもの）として扱われます。
初心者のうちは、「文字列キーの Map → オブジェクト」くらいで使うイメージで十分です。

分割代入と一緒に使うと読みやすくなる

entries 側の map/filter で [key, value] を分割する

Object.entries と組み合わせるとき、コールバック引数をそのまま [key, value] と分割する書き方がよく出てきます。

const original = { a: 1, b: 2, c: 3 };

const modified = Object.fromEntries(
  Object.entries(original).map(([key, value]) => {
    return [key, value * 10];
  })
);

console.log(modified);
// { a: 10, b: 20, c: 30 }
JavaScript

([key, value]) => [key, value * 10]
この形は、Object.fromEntries パターンの「定番フォーム」だと思ってよいです。

ここが重要です：
「entries で [key, value] に分解 → （key, value を何か変えて）[newKey, newValue] を返す → fromEntries で新オブジェクト」
という流れを意識しましょう。

注意点と知っておきたいこと（重要部分の深掘り）

形が合っていない配列を渡すとおかしなことになる

fromEntries は「配列の0番目をキー、1番目を値」として扱うので、
それ以外の形の配列を渡すと、意図しない動きになります。

const badEntries = [
  ["a"],          // 値がない → value は undefined と扱われる
  ["b", 2, 3],    // 3番目以降は無視される
];

const obj = Object.fromEntries(badEntries);
console.log(obj);
// { a: undefined, b: 2 }
JavaScript

初心者のうちは、
「必ず [キー, 値] の2要素配列だけを並べた配列を渡す」
と覚えておくと安全です。

entries → fromEntries は「浅いコピー」

Object.entries も Object.fromEntries も、「浅いコピー」です。
元オブジェクトの中にあるオブジェクトや配列は、そのまま共有されます。

const original = { user: { name: "Alice" } };

const copied = Object.fromEntries(Object.entries(original));

copied.user.name = "Bob";

console.log(original.user.name); // "Bob"
console.log(copied.user.name);   // "Bob"
JavaScript

ここが重要です：
構造（オブジェクトの箱そのもの）は新しくなるが、中のオブジェクトは共有される。
「中身まで完全に別にしたい」場合は、ディープコピーが必要になります（別の話題）。

例題で理解を固める

// 1) 単純な entries → fromEntries の往復
const user = { id: 1, name: "Alice" };
const entries = Object.entries(user);
const userCopy = Object.fromEntries(entries);
console.log(userCopy); // { id: 1, name: "Alice" }

// 2) 値を加工して新しいオブジェクトを作る
const prices = { apple: 100, orange: 80 };
const taxed = Object.fromEntries(
  Object.entries(prices).map(([name, price]) => [name, Math.round(price * 1.1)])
);
console.log(taxed); // { apple: 110, orange: 88 }

// 3) 値が true のものだけ残す
const flags = { debug: false, cache: true, log: true };
const enabled = Object.fromEntries(
  Object.entries(flags).filter(([key, value]) => value)
);
console.log(enabled); // { cache: true, log: true }

// 4) Map からオブジェクトへ変換
const m = new Map([
  ["id", 1],
  ["name", "Bob"]
]);
const objFromMap = Object.fromEntries(m);
console.log(objFromMap); // { id: 1, name: "Bob" }

// 5) ちょっとした rename（キー名の変更）
const config = { theme: "dark", lang: "ja" };
const renamed = Object.fromEntries(
  Object.entries(config).map(([key, value]) => {
    if (key === "lang") return ["language", value];
    return [key, value];
  })
);
console.log(renamed); // { theme: "dark", language: "ja" }
JavaScript

まとめ

Object.fromEntries の核心は、
「[キー, 値] の配列たちから、オブジェクトを組み立て直す」 ことです。

これにより、

  • Object.entries と組み合わせて、オブジェクトを配列的に自由に加工できる
  • map / filter / sort など、配列の強力なメソッドをオブジェクトにも応用できる
  • FormData や Map など「entries を返すもの」を、普通のオブジェクトに変換しやすくなる

というメリットがあります。

形のイメージ（[["key", value], ...]）と、
よくあるパターン（Object.fromEntries(Object.entries(obj).map(...))）を体で覚えると、
ES6+ の「オブジェクトを柔らかく扱う」テクニックが一気に使いやすくなります。

スポンサーリンク
タイトルとURLをコピーしました