【JavaScript】配列の文字列を分割して集計オブジェクトに変換する方法

JavaScriptでは、ハイフン（-）で区切られた文字列が格納された配列を、階層的なオブジェクトへと変換したいケースがあります。本記事では、reduce()メソッドとsplit()メソッドを組み合わせて、この変換をスマートに実現する方法を解説します。

課題となるデータ

まず、次のような文字列の配列を例に考えてみましょう。

const arr = [
    "fiat-palio",
    "fiat-stilo",
    "fiat-strada",
    "fiat-uno",
    "fiat-uno",
    "gm-corsa",
    "gm-celta",
    "ford-fiesta",
    "volkswagen-gol",
    "volkswagen-gol",
    "volkswagen-gol",
    "volkswagen-voyage"
];

この配列のすべての要素は「メーカー-モデル名」という形式になっており、ハイフン（-）を境に2つの部分に分かれています。

要件

ここで求められるのは、以下のような処理を行う関数です。

• ハイフンの前半部分（メーカー名）をオブジェクトのキーとして扱う
• 後半部分（モデル名）を入れ子になったオブジェクトのキーとする
• 元の配列内で同じ組み合わせが出現した回数をカウントする

つまり、上記の配列を変換すると、期待される出力は次のようになります。

const output = {
    "fiat": {
        "palio": 1,
        "stilo": 1,
        "strada": 1,
        "uno": 2
    },
    "gm": {
        "corsa": 1,
        "celta": 1
    },
    "ford": {
        "fiesta": 1
    },
    "volkswagen": {
        "gol": 3,
        "voyage": 1
    }
};

「fiat-uno」は2回、「volkswagen-gol」は3回出現しているため、それぞれのカウントが反映されているのがわかります。

実装コード

この処理は、配列のreduce()メソッドを使うことで簡潔に実装できます。split('-')で各要素を分割し、キーの存在確認をしながらカウントを積み上げていきます。

const arr = [
    "fiat-palio",
    "fiat-stilo",
    "fiat-strada",
    "fiat-uno",
    "fiat-uno",
    "gm-corsa",
    "gm-celta",
    "ford-fiesta",
    "volkswagen-gol",
    "volkswagen-gol",
    "volkswagen-gol",
    "volkswagen-voyage"
];

const convertToObject = (arr = []) => {
    let res = arr.reduce((acc, val) => {
        let pair = val.split('-');
        let mark = pair[0];
        let model = pair[1];
        if (!acc.hasOwnProperty(mark)) {
            acc[mark] = {};
            acc[mark][model] = 1;
        } else {
            if (acc[mark].hasOwnProperty(model)) {
                acc[mark][model] += 1;
            } else {
                acc[mark][model] = 1;
            }
        }
        return acc;
    }, {});
    return res;
};

console.log(convertToObject(arr));

コードのポイント

• reduce()： 配列を走査しながら単一のオブジェクト（初期値 {}）を累積的に構築します。
• split('-')： 各文字列をハイフンで分割し、メーカー名とモデル名を取り出します。
• hasOwnProperty()： キーがすでに存在するかどうかを判定し、新規作成とカウントアップを切り替えています。

実行結果

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

{
    fiat: { palio: 1, stilo: 1, strada: 1, uno: 2 },
    gm: { corsa: 1, celta: 1 },
    ford: { fiesta: 1 },
    volkswagen: { gol: 3, voyage: 1 }
}

まとめ

reduce()とsplit()を組み合わせることで、ハイフン区切りの文字列配列を階層構造を持つ集計オブジェクトへと効率的に変換できます。このパターンは、ログデータの集計やタグの分類など、実際の開発でも応用範囲が広いテクニックです。ぜひ活用してみてください。