JavaScriptでカンマとセミコロン区切りの文字列を2次元配列に変換する方法

例えば、ユーザー情報を格納した文字列変数「users」があるとします。この文字列では、各ユーザーがセミコロン（;）で区切られ、各ユーザーの属性がカンマ（,）で区切られています。

const users = 'Bob,1234,Bob@example.com;Mark,5678,Mark@example.com';

このような文字列を受け取り、以下のような2次元配列に分割するJavaScript関数を作成することを目標とします。

const arr = [
    ['Bob', 1234, 'Bob@example.com'],
    ['Mark', 5678, 'Mark@example.com']
];

解決のアプローチ

基本的な考え方はシンプルです。String.prototype.split()メソッドを2段階で使います。

1. まず split(';') で文字列をセミコロン基準に分割し、ユーザーごとの文字列の配列を取得します。
2. 次に、ループ処理で各要素に対して split(',') を適用し、属性ごとの配列に変換します。

サンプルコード

実際のコードは以下のようになります。

const users = 'Bob,1234,Bob@example.com;Mark,5678,Mark@example.com';

const splitByPunctuations = (str = '') => {
    let res = [];
    res = str.split(';');
    for(let i = 0; i < res.length; i++){
        res[i] = res[i].split(',');
    };
    return res;
};

console.log(splitByPunctuations(users));

実行結果

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

[
    [ 'Bob', '1234', 'Bob@example.com' ],
    [ 'Mark', '5678', 'Mark@example.com' ]
]

map()を使ったより簡潔な書き方

for文の代わりにArray.prototype.map()を組み合わせると、同じ処理を1行で表現できます。

const splitByPunctuations = (str = '') => {
    return str.split(';').map(user => user.split(','));
};

console.log(splitByPunctuations(users));

こちらの方が宣言的で読みやすく、モダンなJavaScriptらしい書き方と言えます。

注意点

• split() の結果はすべて文字列になります。上の例では「1234」「5678」も文字列として扱われます。数値型が必要な場合は Number() や parseInt() を使って明示的に変換してください。
• データ内に余分な空白が含まれる可能性がある場合は、trim() を組み合わせると安全です。