JavaScriptで配列から一意な最長文字列値を検索・抽出する方法

JavaScriptでは、オブジェクトの配列から特定の条件を満たす要素を抽出したい場面がよくあります。本記事では、「text」というキーを持つオブジェクトの配列から、文字列が最も長い要素を重複なしで指定件数だけ取り出す関数の実装方法を解説します。

問題の定義

まず、次のようなオブジェクト配列を例に考えてみましょう。

サンプルデータ

const arr = [
    {text:'use'},
    {text: 'secur'},
    {text: 'form'},
    {text: 'user'},
    {text: 'users'},
    {text: 'form'},
    {text: 'secur'},
    {text: 'sec'},
    {text: 'users'},
    {text: 'secu'},
    {text: 'secur'},
    {text: 'for'},
    {text: 'form'}
]

私たちのタスクは、この配列と数値 n を受け取る関数を作成することです。関数の仕様は以下のとおりです。

• text キーの文字列値が最も長いオブジェクトを n 個返す
• 返されるすべてのオブジェクトは、text キーの値が一意（ユニーク）であること
• n 個の一意なオブジェクトが存在しない場合は、存在するすべての一意なオブジェクトを返す

実装コード

それでは、この仕様を満たす関数を実際に書いてみましょう。

const arr = [
    {text: 'use'},
    {text: 'secur'},
    {text: 'form'},
    {text: 'user'},
    {text: 'users'},
    {text: 'form'},
    {text: 'secur'},
    {text: 'sec'},
    {text: 'users'},
    {text: 'secu'},
    {text: 'secur'},
    {text: 'for'},
    {text: 'form'}
];
const sorter = (a, b) => {
    return b.text.length - a.text.length;
}
const longestUnique = (arr, num) => {
    const copy = arr.slice();
    copy.sort(sorter);
    const map = new Map();
    const uniqueCopy = copy.filter(el => {
        const exists = map.get(el.text);
        if(exists){
            return false;
        };
        map.set(el.text, 1);
        return true;
    });
    return uniqueCopy.splice(0, num);
}
console.log(longestUnique(arr, 4));
console.log(longestUnique(arr, 12));

コードの解説

1. sorter 関数： text キーの文字列長を比較し、降順（長いものが先頭に来るように）ソートするための比較関数です。
2. slice() によるコピー： 元の配列を破壊的に変更しないよう、まず配列のコピーを作成しています。
3. sort(sorter)： コピーした配列を文字列長の降順に並べ替えます。
4. Map を使った重複排除： filter() の処理中に Map へ既出の text 値を記録することで、同じ値を持つオブジェクトを効率的に除外できます。
5. splice(0, num)： 重複を除いた配列の先頭から num 件を切り出して返します。要素数が num に満たない場合は、存在する分だけがそのまま返されます。

実行結果

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

[
    { text: 'secur' },
    { text: 'users' },
    { text: 'form' },
    { text: 'user' }
]
[
    { text: 'secur' },
    { text: 'users' },
    { text: 'form' },
    { text: 'user' },
    { text: 'secu' },
    { text: 'use' },
    { text: 'sec' },
    { text: 'for' }
]

ご覧のとおり、longestUnique(arr, 4) では最も長い文字列から順に4つの一意なオブジェクトが返されます。一方、longestUnique(arr, 12) を呼び出した場合、一意な text 値は8種類しか存在しないため、8件すべてが返されている点に注目してください。

この手法は、sort・Map・filter といった標準的なメソッドを組み合わせるだけで実現できるため、ランキング表示やタグの一覧取得など、実務でも幅広く応用できるパターンです。