JavaScriptで複数の配列からすべての組み合わせを動的に生成する方法

はじめに

JavaScriptでは、複数の配列を受け取り、それらの要素をすべて組み合わせた結果（直積）を生成したい場面がよくあります。例えば、次のような2つの配列があるとします。

const arr1 = ['a', 'b', 'c'];
const arr2 = ['d', 'e', 'f'];

この2つの配列から作れるすべての組み合わせを求めたい場合、期待される出力は以下のようになります。

const output = ['ad', 'ae', 'af', 'bd', 'be', 'bf', 'cd', 'ce', 'cf'];

この記事では、可変長引数を使うことで、任意の数の配列に対応できる汎用的な関数を実装する方法を解説します。

再帰を使った実装方法

ポイントは、各配列の要素を順番に連結していく再帰処理です。可変長引数（スプレッド構文）を使うことで、渡す配列の数がいくつであっても柔軟に対応できます。

サンプルコード

const arr1 = ['a', 'b', 'c'];
const arr2 = ['d', 'e', 'f'];

const combineArrays = (...arr) => {
    const res = [];
    const combinePart = (part, index) => {
        arr[index].forEach(el => {
            const p = part.concat(el);
            // すべての配列の要素を結合し終えたら結果に追加
            if (p.length === arr.length) {
                res.push(p.join(''));
                return;
            }
            // 次の配列へ処理を進める（再帰呼び出し）
            combinePart(p, index + 1);
        });
    };
    combinePart([], 0);
    return res;
};

console.log(combineArrays(arr1, arr2));

コードの解説

• combineArrays(...arr): 可変長引数として任意の数の配列を受け取ります。
• combinePart(part, index): 現在までに組み立てた部分文字列 part と、処理中の配列のインデックス index を受け取ります。
• 各配列の要素を1つずつ part に連結し、すべての配列を処理し終えたタイミング（p.length === arr.length）で join('') により文字列化して結果配列に格納します。
• まだ処理すべき配列が残っている場合は、自身を再帰的に呼び出して次の配列へ進みます。

実行結果

コンソールには以下のように出力されます。

[
    'ad', 'ae', 'af',
    'bd', 'be', 'bf',
    'cd', 'ce', 'cf'
]

3つ以上の配列にも対応可能

この実装の利点は、引数の配列が増えてもコードを変更する必要がないことです。例えば3つ目の配列を追加しても、そのまま動作します。

const arr3 = ['x', 'y'];
console.log(combineArrays(arr1, arr2, arr3));
// ['adx', 'ady', 'aex', ...] のように全27通りが出力される

組み合わせの総数は、各配列の要素数の積になります（上記の例なら 3 × 3 × 2 = 27通り）。そのため、配列の数や要素数が大きくなると結果の件数が急激に増える点には注意してください。

まとめ

• 再帰処理を使うことで、任意の数の配列からすべての組み合わせを動的に生成できる。
• 可変長引数（...arr）により、関数の使い回しが容易になる。
• 組み合わせの総数は各配列の要素数の積となるため、大規模なデータには注意が必要。