JavaScriptでオブジェクトの配列を1つのプレーンなオブジェクトにまとめる方法

JavaScriptでは、複数のオブジェクトに分かれたプロパティを、1つのプレーンなオブジェクト（単一のオブジェクト）に統合したい場面があります。本記事では、オブジェクトの配列を受け取って、その中に含まれるすべてのプロパティを1つのオブジェクトへ集約する方法を、サンプルコードとともにわかりやすく解説します。

変換元となるデータ

例として、次のように2つのオブジェクトを持つ配列を用意します。

const arr = [{
    name: 'Dinesh Lamba',
    age: 23,
    occupation: 'Web Developer',
}, {
    address: 'Vasant Vihar',
    experience: 5,
    isEmployed: true
}];

やりたいこと

この配列を引数として受け取り、配列内のすべてのオブジェクトに存在するすべてのプロパティを1つのオブジェクトにまとめたものを返す関数を作成します。上記の配列の場合、期待される出力は次のとおりです。

const output = {
    name: 'Dinesh Lamba',
    age: 23,
    occupation: 'Web Developer',
    address: 'Vasant Vihar',
    experience: 5,
    isEmployed: true
};

実装コード

以下は、forEachメソッドとfor...inループを組み合わせたシンプルな実装例です。

const arr = [{
    name: 'Dinesh Lamba',
    age: 23,
    occupation: 'Web Developer',
}, {
    address: 'Vasant Vihar',
    experience: 5,
    isEmployed: true
}];

const mergeObjects = (arr = []) => {
    const res = {};
    arr.forEach(obj => {
        for (const key in obj) {
            res[key] = obj[key];
        }
    });
    return res;
};

console.log(mergeObjects(arr));

コードのポイント

• まず空の結果オブジェクト res を用意します。
• forEach で配列内の各オブジェクトを順番に処理します。
• for...in ループで各オブジェクトのキーを1つずつ取り出し、res に代入していきます。
• 最後に res を返すことで、すべてのプロパティを統合したオブジェクトが得られます。

出力結果

コンソールには次のように表示されます。

{
    name: 'Dinesh Lamba',
    age: 23,
    occupation: 'Web Developer',
    address: 'Vasant Vihar',
    experience: 5,
    isEmployed: true
}

別のアプローチ：Object.assignやスプレッド構文を使う

モダンなJavaScriptでは、Object.assign() やスプレッド構文（...）を使うことで、さらに簡潔に同じ処理を書くことができます。

// Object.assignを使う方法
const merged = Object.assign({}, ...arr);

// スプレッド構文を使う方法
const merged2 = {...arr[0], ...arr[1]};

console.log(merged);
console.log(merged2);

どちらの方法でも、配列内のすべてのプロパティを持つ1つのオブジェクトが生成されます。特に要素数が不定の場合は Object.assign({}, ...arr) の形式が便利です。

まとめ

オブジェクトの配列をプレーンなオブジェクトにまとめるには、forEach と for...in を使った基本的なループ処理でも十分ですが、Object.assign() やスプレッド構文を活用すれば、より短く読みやすいコードになります。用途や可読性に応じて使い分けるとよいでしょう。