【JavaScript】連続する要素をグループ化して配列を圧縮する方法

はじめに

本記事では、ハイフン（-）で区切られた単語が含まれる文字列から、連続して出現する同じ単語をグループ化し、それぞれの連続出現回数とともにオブジェクトの配列として返す関数をJavaScriptで実装します。

問題の概要

まず、次のように繰り返しの単語がハイフン（-）で区切られて含まれる文字列が与えられます。

const str = 'monday-sunday-tuesday-tuesday-sunday-sunday-monday-monday-monday';

ここでの課題は、各オブジェクトが val と count という2つのプロパティを持つ配列を返す関数を書くことです。val は文字列内の単語（monday、tuesday、sundayなど）、count はその単語の連続出現回数を表します。

上記の文字列の場合、期待される結果は次のようになります。

const arr = [
  {
    val: 'monday',
    count: 1
  },
  {
    val: 'sunday',
    count: 1
  },
  {
    val: 'tuesday',
    count: 2
  },
  {
    val: 'sunday',
    count: 2
  },
  {
    val: 'monday',
    count: 3
  }
]

これは、mondayが1回、続いてsundayが1回、tuesdayが2回、sundayが2回、最後にmondayが3回連続して出現しているためです。

実装のアプローチ

実装の手順は以下の通りです。

1. String.prototype.split() を使って、文字列をハイフンで分割し配列に変換します。
2. Array.prototype.reduce() メソッドを使って、結果の配列を再帰的に（畳み込みながら）構築していきます。
3. 直前の要素と現在の単語が一致する場合は count をインクリメントし、一致しない場合は新しいオブジェクトを追加します。

なお、コード内では acc[l-1]?.val のようにオプショナルチェイニング（?.）を使用しています。これにより、初期状態で空配列の場合でもエラーが発生せず、安全に処理できます。

サンプルコード

以下が完全なコードです。

const str = 'monday-sunday-tuesday-tuesday-sunday-sunday-monday-monday-monday';
const str2 = 'friday-friday-sunday-tuesday-sunday-sunday-monday-thursday-monday';

const compressString = (str) => {
  return str.split('-').reduce((acc, val) => {
    const { length: l } = acc;
    if (acc[l - 1]?.val === val) {
      // 直前のグループと同じ単語ならカウントを増やす
      acc[l - 1].count++;
      return acc;
    } else {
      // 新しい単語なら新しいグループを作成
      return acc.concat({
        val,
        count: 1
      });
    }
  }, []);
}

console.log(compressString(str));
console.log(compressString(str2));

処理の流れを詳しく解説

• split('-')：文字列をハイフンで分割し、['monday', 'sunday', 'tuesday', ...] のような単語の配列を生成します。
• reduce()：初期値として空配列 [] を渡し、各単語を順番に処理します。
• 条件分岐：累積配列 acc の最後の要素の val が現在の単語と一致すれば count++ で連続回数を更新。不一致なら { val, count: 1 } を新たに追加します。

実行結果

上記のコードをコンソールで実行すると、次のような出力が得られます。

[
  { val: 'monday', count: 1 },
  { val: 'sunday', count: 1 },
  { val: 'tuesday', count: 2 },
  { val: 'sunday', count: 2 },
  { val: 'monday', count: 3 }
]
[
  { val: 'friday', count: 2 },
  { val: 'sunday', count: 1 },
  { val: 'tuesday', count: 1 },
  { val: 'sunday', count: 2 },
  { val: 'monday', count: 1 },
  { val: 'thursday', count: 1 },
  { val: 'monday', count: 1 }
]

まとめ

このように、split() と reduce() を組み合わせることで、文字列内の連続する同一単語を効率的にグループ化できます。このテクニックは、ログデータの集計や時系列データの圧縮など、さまざまな場面で応用できる汎用的なパターンです。ぜひ実際のプロジェクトでも活用してみてください。