JavaScriptでカンマ区切りの文字列をオブジェクト内の配列に変換する方法

次のような文字列があるとします。

const str = 'dress/cotton/black, dress/leather/red, dress/fabric, houses/restaurant/small, houses/school/big, person/james';

このような文字列を受け取り、カテゴリ（最初の単語）ごとに値をまとめた、以下のような配列を持つオブジェクトを生成するJavaScript関数を作成する必要があります。

const output = {
    dress: ["cotton", "leather", "black", "red", "fabric"],
    houses: ["restaurant", "school", "small", "big"],
    person: ["james"]
};

実装コードの例

const str = 'dress/cotton/black, dress/leather/red, dress/fabric, houses/restaurant/small, houses/school/big, person/james';

const buildObject = (str = '') => {
    const result = {};
    const strArr = str.split(', ');
    strArr.forEach(el => {
        const values = el.split('/');
        const key = values.shift();
        result[key] = (result[key] || []).concat(values);
    });
    return result;
};

console.log(buildObject(str));

コードの仕組み

この関数は、次の手順で処理を行います。

1. 文字列をグループに分割

まず split(', ') を使って、元の文字列を「dress/cotton/black」のようなグループ単位に分割します。区切り文字として「カンマ＋半角スペース」を指定している点に注意してください。

2. 各グループをキーと値に分解

次に、各グループを split('/') でスラッシュ区切りに分解します。そして shift() を使って先頭の要素を取り出し、それをオブジェクトのキーとして使用します。残りの要素がそのキーに対応する値の配列になります。

3. 同じキーへの値の追記

同じキーがすでに存在する場合は concat() で既存の配列に値を連結し、存在しない場合は空の配列から新しく作成します。(result[key] || []) の部分がこの判定を担っています。

出力結果

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

{
    dress: [ 'cotton', 'leather', 'black', 'red', 'fabric' ],
    houses: [ 'restaurant', 'small', 'school', 'big' ],
    person: [ 'james' ]
}

このように、split()・shift()・concat() を組み合わせるだけで、構造化されていない文字列データを扱いやすいオブジェクト形式へ簡単に変換できます。CSVライクなデータやURLパスのような階層データの前処理にも応用できる便利なパターンです。