高校倫理1433840 views
LaTeX957673 views
中学英語809046 views
中学理科1626729 views
世界の国560930 views
英語608453 views
MathPython492025 views
高校国語785873 views
小学社会308762 views
りんご194232 views
Help
Tools

English

Object.fromEntries() の使い方

Object.fromEntries() は、キーと値のペアからなる配列(または iterable)をオブジェクトに変換するメソッドです。ES2019 で追加され、Object.entries() の逆操作として使用されます。

基本的な使い方

[キー, 値] の形式の配列を渡すと、オブジェクトが生成されます。

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

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

Object.entries() との組み合わせ

Object.entries() で配列に変換し、加工してから Object.fromEntries() でオブジェクトに戻すパターンが非常に便利です。

const prices = { apple: 100, banana: 80, orange: 120 };

// 全ての価格を2倍にする
const doubled = Object.fromEntries(
  Object.entries(prices).map(([key, value]) => [key, value * 2])
);

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

Object.entries() でペア配列に変換

map() で各ペアを加工

Object.fromEntries() でオブジェクトに戻す

フィルタリング

特定の条件に合うプロパティだけを抽出することもできます。

const scores = { math: 80, english: 45, science: 90, history: 55 };

// 60点以上の科目だけを抽出
const passed = Object.fromEntries(
  Object.entries(scores).filter(([subject, score]) => score >= 60)
);

console.log(passed);
// { math: 80, science: 90 }

キー名の変換

オブジェクトのキー名を一括で変換する際にも活用できます。

const data = { user_name: "田中", user_age: 25 };

// スネークケースをキャメルケースに変換
const camelCase = Object.fromEntries(
  Object.entries(data).map(([key, value]) => {
    const newKey = key.replace(/_([a-z])/g, (_, c) => c.toUpperCase());
    return [newKey, value];
  })
);

console.log(camelCase);
// { userName: "田中", userAge: 25 }

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

Map オブジェクトは iterable で [キー, 値] のペアを返すため、Object.fromEntries() に直接渡せます。

const map = new Map([
  ["name", "山田"],
  ["age", 30]
]);

const obj = Object.fromEntries(map);
console.log(obj); // { name: "山田", age: 30 }

URLSearchParams からの変換

URLSearchParams も iterable なので、クエリパラメータをオブジェクトに変換できます。

const params = new URLSearchParams("name=tanaka&age=25&city=tokyo");

const obj = Object.fromEntries(params);
console.log(obj);
// { name: "tanaka", age: "25", city: "tokyo" }
注意点

URLSearchParams の値はすべて文字列になります。数値として使いたい場合は、別途変換が必要です。

同名パラメータ

同じキーが複数ある場合、最後の値のみが残ります。

重複キーの扱い

入力配列に同じキーが複数存在する場合、後の値で上書きされます。

const entries = [
  ["a", 1],
  ["b", 2],
  ["a", 3]  // キー "a" が重複
];

const obj = Object.fromEntries(entries);
console.log(obj); // { a: 3, b: 2 }

Object.fromEntries() と Object.entries() を組み合わせることで、オブジェクトに対して配列メソッドの豊富な機能を適用できるようになります。