【JavaScript】1つの配列の全要素を別の配列の各要素と組み合わせてオブジェクト配列を生成する方法

問題の概要

次のように、ユーザー名を格納した文字列の配列と、データ（SOP）を格納した文字列の配列の2つがあるとします。

const users = ['Rahul', 'Dinesh', 'Rohit'];
const data = ["SOP1", "SOP2", "SOP3", "SOP4"];

ここで求められているのは、このような2つの配列を受け取り、すべての組み合わせを含む新しいオブジェクト配列を返すJavaScript関数を作成することです。

つまり、新しい配列には「users配列の各要素」と「data配列の各要素」の全組み合わせ（直積・デカルト積）に対応するオブジェクトが含まれる必要があります。

したがって、上記の配列の場合、期待される出力は次のようになります。

const output = [
    { user: 'Rahul', sop: 'SOP1' },
    { user: 'Rahul', sop: 'SOP2' },
    { user: 'Rahul', sop: 'SOP3' },
    { user: 'Rahul', sop: 'SOP4' },
    { user: 'Dinesh', sop: 'SOP1' },
    { user: 'Dinesh', sop: 'SOP2' },
    { user: 'Dinesh', sop: 'SOP3' },
    { user: 'Dinesh', sop: 'SOP4' },
    { user: 'Rohit', sop: 'SOP1' },
    { user: 'Rohit', sop: 'SOP2' },
    { user: 'Rohit', sop: 'SOP3' },
    { user: 'Rohit', sop: 'SOP4' }
];

実装方法：forEachによる二重ループ

最も基本的なアプローチは、forEach()メソッドを使った二重ループです。外側のループでユーザーを、内側のループでデータを順に処理し、その組み合わせをオブジェクトとして新しい配列へ追加していきます。

コード例

const users = ['Rahul', 'Dinesh', 'Rohit'];
const data = ["SOP1", "SOP2", "SOP3", "SOP4"];
const multiplyUserData = (users = [], data = []) => {
    const res = [];
    users.forEach(user => {
        data.forEach(el => {
            res.push({
                'user': user,
                'sop': el
            });
        });
    });
    return res;
};
console.log(multiplyUserData(users, data));

出力結果

コンソールに出力される結果は以下の通りです。3人のユーザー × 4種類のSOPで、合計12個のオブジェクトが生成されていることがわかります。

[
    { user: 'Rahul', sop: 'SOP1' },
    { user: 'Rahul', sop: 'SOP2' },
    { user: 'Rahul', sop: 'SOP3' },
    { user: 'Rahul', sop: 'SOP4' },
    { user: 'Dinesh', sop: 'SOP1' },
    { user: 'Dinesh', sop: 'SOP2' },
    { user: 'Dinesh', sop: 'SOP3' },
    { user: 'Dinesh', sop: 'SOP4' },
    { user: 'Rohit', sop: 'SOP1' },
    { user: 'Rohit', sop: 'SOP2' },
    { user: 'Rohit', sop: 'SOP3' },
    { user: 'Rohit', sop: 'SOP4' }
]

より簡潔な書き方：flatMapとmapの組み合わせ

ES2019以降では、flatMap()とmap()を組み合わせることで、同じ処理をより宣言的かつ簡潔に記述できます。

const multiplyUserData = (users = [], data = []) =>
    users.flatMap(user => data.map(sop => ({ user, sop })));

console.log(multiplyUserData(users, data));

flatMap()は「マップしてからフラット化する」という操作を一度に行うメソッドのため、ネストした配列を自動的に1次元化してくれます。可読性が高く、モダンなコードスタイルにも合うため、実務でもおすすめの書き方です。

まとめ

• 2つの配列の全組み合わせ（直積）が必要な場合は、二重ループまたはflatMap() + map()で実装できる。
• forEach()による二重ループは初心者にもわかりやすい定番の手法。
• flatMap()を使うとコードが大幅に簡潔になり、宣言的なスタイルで書ける。
• 結果の要素数は「配列Aの長さ × 配列Bの長さ」になる点に注意する。