【JavaScript】mapとreduceを使って月ごとのキャッシュフローデータを結合する方法

はじめに

JavaScriptでは、複数の配列を組み合わせて新しいデータ構造を作り出す場面がよくあります。本記事では、「月の一覧」と「キャッシュフローの記録」の2つの配列から、すべての月を網羅した1つのオブジェクト配列を生成する方法を、実際のコード例とともに解説します。

まず、次のような2つの配列を想定してみましょう。

const months = ["jan", "feb", "mar", "apr"];
const cashflows = [
    {'month':'jan', 'value':10},
    {'month':'mar', 'value':20}
];

months 配列には月の名前が格納され、cashflows 配列には「月」と「その月の値」を持つオブジェクトが入っています。ただし、cashflows には一部の月しか含まれていない点に注意してください。

やりたいこと

今回求められているのは、これら2つの配列を受け取り、months のすべての月に対してオブジェクトを1つずつ含む配列を構築する関数です。該当するキャッシュフローデータが存在しない月については、value を空文字列にします。

つまり、上記の入力に対する期待される出力は以下のとおりです。

const output = [
    {'month':'jan', 'value':10},
    {'month':'feb', 'value':''},
    {'month':'mar', 'value':20},
    {'month':'apr', 'value':''}
];

実装コード

この処理を実現するコードは次のとおりです。

const months = ["jan", "feb", "mar", "apr"];
const cashflows = [
    {'month':'jan', 'value':10},
    {'month':'mar', 'value':20}
];
const combineArrays = (months = [], cashflows = []) => {
    let res = [];
    res = months.map(function(month) {
        return this[month] || { month: month, value: '' };
    }, cashflows.reduce((acc, val) => {
        acc[val.month] = val;
        return acc;
    }, Object.create(null)));
    return res;
};
console.log(combineArrays(months, cashflows));

実行結果

コンソールに出力される結果は以下のようになります。

[
    { month: 'jan', value: 10 },
    { month: 'feb', value: '' },
    { month: 'mar', value: 20 },
    { month: 'apr', value: '' }
]

コードの仕組みを解説

この実装のポイントは、大きく分けて2段階の処理にあります。

1. reduceによる検索用マップの作成： まず cashflows.reduce(...) の部分で、月名をキー・対応するオブジェクトを値とする辞書（マップ）を構築しています。初期値に Object.create(null) を指定することで、プロトタイプチェーンを持たない純粋なオブジェクトを生成でき、"constructor" などの既存プロパティ名との衝突を防げます。
2. mapによる配列の結合： 次に months.map(...) の第2引数として、先ほどのマップを this として渡しています。各月について、マップ内に該当データがあればそのオブジェクトを返し、存在しなければ value が空文字列の新規オブジェクトを返す仕組みです。

このように map と reduce を組み合わせることで、簡潔かつ効率的に2つの配列を結合できます。特に、検索用マップを事前に作成しておくことで、ループ内の線形探索を回避でき、データ量が多い場合でも高速に動作するのが大きなメリットです。同様のパターンは、売上データや勤怠データなど、キーとなる項目で複数のデータソースを統合したいあらゆる場面で応用できます。