JavaScriptのreduceで配列内の連続する重複要素をまとめる方法

はじめに

JavaScriptでは、reduce() メソッドを活用することで、配列内の連続する重複要素を効率的に1つの要素へと結合できます。
本記事では、その具体的な実装方法をサンプルコード付きで解説します。

課題の内容

まず、次のように重複した文字列を含む配列があると仮定しましょう。

const arr = ['blue', 'blue', 'green', 'blue', 'yellow', 'yellow', 'green'];

ここで求められているのは、この配列を受け取り、隣り合う重複要素同士を結合して1つにまとめるJavaScript関数を作成することです。

ポイントは、離れた位置にある同じ値（例：先頭付近の 'blue' と3番目の 'blue'）は結合せず、あくまで直前の要素と同じ場合のみ連結するという点です。

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

const output = ['blueblue', 'green', 'blue', 'yellowyellow', 'green'];

実装コード

実際のコードは以下の通りです。

const arr = ['blue', 'blue', 'green', 'blue', 'yellow', 'yellow',
'green'];

const combineDuplicate = (arr = []) => {
    let prev = null;
    const groups = arr.reduce((acc, value) => {
        if (prev === value) {
            acc[acc.length - 1] += value;
        } else {
            prev = value;
            acc.push(value);
        }
        return acc;
    }, []);
    return groups;
};

console.log(combineDuplicate(arr));

コードの仕組み

この実装の動作を順番に見ていきましょう。

• 変数 prev：直前に処理した要素の値を保持します。初期値は null です。
• reduce() の初期値：空の配列 [] をアキュムレータとして渡しています。
• 現在の値が直前の値と一致する場合：acc[acc.length - 1] += value; によって、アキュムレータの最後の要素に現在の値を連結します。これにより 'blue' + 'blue' = 'blueblue' となります。
• 一致しない場合：prev を更新し、新しい要素として push します。

この処理により、元の配列の順序を保ちながら、連続する重複だけを結合した新しい配列が生成されます。

実行結果

コンソールに出力すると、以下の結果が得られます。

[ 'blueblue', 'green', 'blue', 'yellowyellow', 'green' ]

まとめ

reduce() を使えば、ループ処理や一時的な状態管理をシンプルに記述でき、連続する重複要素の結合もわずか十数行で実現できます。ログデータの整形や、連続イベントの集計など、さまざまな場面で応用できるテクニックなので、ぜひ覚えておきましょう。