JavaScriptでオブジェクト配列から重複するidキーを持つ要素を削除する方法

例えば、次のようなURLとidを持つオブジェクトの配列があるとします。

const arr = [
    {
        url: 'www.example.com/hello',
        id: "22"
    },
    {
        url: 'www.example.com/hello',
        id: "22"
    },
    {
        url: 'www.example.com/hello-how-are-you',
        id: "23"
    },
    {
        url: 'www.example.com/i-like-cats',
        id: "24"
    },
    {
        url: 'www.example.com/i-like-pie',
        id: "25"
    }
];

この中には、同じid（"22"）を持つオブジェクトが2つ含まれています。今回の課題は、このような配列を受け取り、重複したidキーを持つオブジェクトを配列から取り除くJavaScript関数を作成することです。ただし、underscoreなどの外部ライブラリは使用せず、素のJavaScriptだけで実装することが条件です。

実装例：splice()を使った方法

まずは、元の配列から直接重複を取り除くシンプルな実装を見てみましょう。

const arr = [
    {
        url: 'www.example.com/hello',
        id: "22"
    },
    {
        url: 'www.example.com/hello',
        id: "22"
    },
    {
        url: 'www.example.com/hello-how-are-you',
        id: "23"
    },
    {
        url: 'www.example.com/i-like-cats',
        id: "24"
    },
    {
        url: 'www.example.com/i-like-pie',
        id: "25"
    }
];

const removeDuplicate = (arr = []) => {
    const map = {};
    for(let i = 0; i < arr.length; ){
        const { id } = arr[i];
        if(map.hasOwnProperty(id)){
            arr.splice(i, 1);
        }else{
            map[id] = true;
            i++;
        }
    }
};

removeDuplicate(arr);
console.log(arr);

コードの動作解説

この関数のロジックを順番に確認していきます。

• 最初に空のオブジェクトmapを用意し、「すでに登場したid」の記録簿として利用します。
• forループで配列を先頭から走査します。重要なのは、要素を削除したときだけループカウンタiを増やさない点です。splice()で要素を1つ削除すると、後続の要素が自動的に前に詰められるため、iを固定したままにすることで次の要素を見逃しません。
• const { id } = arr[i];という分割代入で現在のオブジェクトからidを取り出し、hasOwnProperty()によって登録済みかどうかを判定します。
• 未登録の場合はmap[id] = true;で記録してからi++で次へ進み、登録済みの場合はarr.splice(i, 1)で該当オブジェクトを削除します。

この処理により、各idについて最初に出現したオブジェクトだけが残り、2回目以降の出現分がすべて削除されます。

出力結果

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

[
    { url: 'www.example.com/hello', id: '22' },
    { url: 'www.example.com/hello-how-are-you', id: '23' },
    { url: 'www.example.com/i-like-cats', id: '24' },
    { url: 'www.example.com/i-like-pie', id: '25' }
]

別解：filter()とSetを組み合わせるモダンな書き方

上記の方法は元の配列を直接書き換える（破壊的な）アプローチです。一方、元の配列を保持したまま新しい配列として重複除去の結果を得たい場合は、filter()とSetを組み合わせるのがおすすめです。

const removeDuplicate = (arr = []) => {
    const seen = new Set();
    return arr.filter(obj => {
        if(seen.has(obj.id)){
            return false;
        }
        seen.add(obj.id);
        return true;
    });
};

const uniqueArr = removeDuplicate(arr);
console.log(uniqueArr);

filter()は、コールバックがtrueを返した要素だけを集めた新しい配列を返します。また、Setによる一意性判定は非常に高速なため、要素数の多い配列でも効率的に動作します。Reactなどで状態管理を行う場合や、元データを壊したくない場面では、このイミュータブルな手法が特に役立ちます。

まとめ

• 重複判定の基準となるプロパティ（ここではid）を決め、出現済みかどうかを記録しながら走査するのが基本戦略です。
• 元の配列を書き換えてよいならsplice()方式、新しい配列が必要ならfilter()+Set方式を選びましょう。
• どちらの方法も外部ライブラリ不要で、数行のコードで簡単に実装できます。