【JavaScript】名前の頭文字（最初の1文字）ごとにグループ化する方法

はじめに

JavaScriptでは、配列内のデータを特定の条件で分類したい場面がよくあります。本記事では、名前が格納された配列を「頭文字（最初の1文字）」ごとにグループ化する方法を解説します。

たとえば、次のような名前の配列があるとします。

const arr = ["Simon", "Mike", "Jake", "Lara", "Susi", "Blake", "James"];

この配列を受け取り、以下の2つのプロパティを持つオブジェクトの配列を返す関数を作成する必要があります。

• letter … グループ化の基準となる頭文字
• names … その頭文字に該当する名前の配列

実装コード

この処理は、reduce()メソッドを使って頭文字をキーとしたマップを作成し、その後Object.keys()で整形するという流れで実現できます。コードは以下の通りです。

const arr = ["Simon", "Mike", "Jake", "Lara", "Susi", "Blake", "James"];

const groupNames = arr => {
    const map = arr.reduce((acc, val) => {
        let char = val.charAt(0).toUpperCase();
        acc[char] = [].concat((acc[char] || []), val);
        return acc;
    }, {});
    
    const res = Object.keys(map).map(el => ({
        letter: el,
        names: map[el]
    }));
    
    return res;
};

console.log(groupNames(arr));

コードのポイント

• charAt(0).toUpperCase(): 各名前の最初の1文字を取得し、大文字に変換してグループ化のキーとしています。これにより、「Simon」と「susi」のように大文字・小文字が混在していても同じグループにまとめられます。
• reduce(): 配列を走査しながら、頭文字をキー、名前の配列を値とするオブジェクト（マップ）を構築します。
• Object.keys().map(): 完成したマップを、要件どおり { letter, names } の形式を持つオブジェクトの配列に変換しています。

出力結果

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

[
    { letter: 'S', names: [ 'Simon', 'Susi' ] },
    { letter: 'M', names: [ 'Mike' ] },
    { letter: 'J', names: [ 'Jake', 'James' ] },
    { letter: 'L', names: [ 'Lara' ] },
    { letter: 'B', names: [ 'Blake' ] }
]

このように、同じ頭文字を持つ名前がきれいにグループ化されていることが確認できます。reduce()を活用したこの手法は、名前以外にも商品名やタグなど、さまざまな文字列データの分類に応用できる汎用的なパターンですので、ぜひ覚えておきましょう。