JavaScriptでオブジェクトの配列からプロパティごとに個別の配列を抽出する方法

はじめに

JavaScriptでは、複数のオブジェクトを含む配列（オブジェクト配列）を扱う場面がよくあります。たとえば、次のようなクライアント情報を格納した配列があるとします。

const arr = [{
    name : 'Client 1',
    total: 900,
    value: 12000
}, {
    name : 'Client 2',
    total: 10,
    value: 800
}, {
    name : 'Client 3',
    total: 5,
    value : 0
}];

ここで求められるのは、このような配列を受け取り、各オブジェクトのプロパティごとに個別の配列を取り出すJavaScript関数を作成することです。

つまり、name プロパティ用の配列、total 用の配列、value 用の配列をそれぞれ1つずつ作ります。もしオブジェクトにもっと多くのプロパティが存在すれば、それらに対しても同様に配列を分離していくことになります。

実装例

実際のコードは次のようになります。

const arr = [{
    name : 'Client 1',
    total: 900,
    value: 12000
}, {
    name : 'Client 2',
    total: 10,
    value: 800
}, {
    name : 'Client 3',
    total: 5,
    value : 0
}];
const separateOut = arr => {
    if(!arr.length){
        return [];
    };
    const res = {};
    const keys = Object.keys(arr[0]);
    keys.forEach(key => {
        arr.forEach(el => {
            if(res.hasOwnProperty(key)){
                res[key].push(el[key])
            }else{
                res[key] = [el[key]];
            };
        });
    });
    return res;
};
console.log(separateOut(arr));

コードの解説

この関数の処理の流れを簡単に整理してみましょう。

1. 空配列のチェック： まず if(!arr.length) によって、入力された配列が空の場合には空の配列を返して処理を終了します。これによりエラーを未然に防げます。

2. キーの取得： Object.keys(arr[0]) を使って、最初のオブジェクトが持つすべてのプロパティ名（キー）を取得します。

3. 各キーごとに値を収集： 取得したキーを forEach でループし、その中でさらに元の配列の各要素を巡回します。hasOwnProperty() を使って結果オブジェクトにすでにそのキーが存在するかどうかを判定し、存在すれば push() で値を追加、存在しなければ新しい配列として値をセットします。

出力結果

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

{
    name: [ 'Client 1', 'Client 2', 'Client 3' ],
    total: [ 900, 10, 5 ],
    value: [ 12000, 800, 0 ]
}

このように、元のオブジェクト配列から各プロパティの値だけを集めた配列が、キーをラベルとしてまとまったオブジェクト形式で得られます。

補足：reduceを使ったより簡潔な書き方

同じ処理は Array.prototype.reduce() を使うことで、より簡潔に記述することもできます。

const separateOut = arr =>
    arr.reduce((acc, obj) => {
        Object.keys(obj).forEach(key => {
            (acc[key] = acc[key] || []).push(obj[key]);
        });
        return acc;
    }, {});

こちらの書き方は空配列チェックも兼ねており（reduce の初期値 {} により、空の配列が渡されてもそのまま空オブジェクトが返る）、コードも短くなるため実務でもよく使われるパターンです。

まとめ

オブジェクトの配列からプロパティごとに個別の配列を抽出したい場合は、Object.keys() でキー一覧を取得し、ループまたは reduce() を活用して値を振り分けるのが基本の考え方です。データの整形やグラフ描画用のデータ準備など、さまざまな場面で役立つテクニックなので、ぜひ覚えておきましょう。