JavaScriptの画像データを含む配列から重複する値を削除する方法

JavaScriptでは、オブジェクトの配列から特定のプロパティの値が重複している要素を取り除きたい場面がよくあります。特に画像データを扱う際には、同じ画像ファイルへの参照が配列内に何度も現れることがあります。

問題の概要

以下のような、画像に関するデータを持つ配列があるとします。

const arr = [{
    'image': "jv2bcutaxrms4i_img.png",
    'gallery_image': true
},
{
    'image': "abs.png",
    'gallery_image': true
},
{
    'image': "acd.png",
    'gallery_image': false
},
{
    'image': "jv2bcutaxrms4i_img.png",
    'gallery_image': true
},
{
    'image': "abs.png",
    'gallery_image': true
},
{
    'image': "acd.png",
    'gallery_image': false
}];

この配列には、'image' プロパティの値が重複しているオブジェクトが含まれています。ここでの課題は、このような配列を受け取るJavaScript関数を作成し、'image' プロパティの値が重複しているオブジェクトを配列から削除することです。

重複削除の基本的な実装例

まずは、forEach ループを使って、既存の結果配列と比較しながら重複を除外するシンプルなアプローチを見てみましょう。

const arr = [{
    'image': "jv2bcutaxrms4i_img.png",
    'gallery_image': true
},
{
    'image': "abs.png",
    'gallery_image': true
},
{
    'image': "acd.png",
    'gallery_image': false
},
{
    'image': "jv2bcutaxrms4i_img.png",
    'gallery_image': true
},
{
    'image': "abs.png",
    'gallery_image': true
},
{
    'image': "acd.png",
    'gallery_image': false
}];
const buildUnique = (arr = []) => {
    const unique = [];
    arr.forEach(obj => {
        let found = false;
        unique.forEach(uniqueObj => {
            if(uniqueObj.image === obj.image) {
                found = true;
            };
        });
        if(!found){
            unique.push(obj);
        };
    });
    return unique;
};
console.log(buildUnique(arr));

コードの解説

この関数の動作は以下の流れになっています。

• 結果を格納するための空の配列 unique を用意します。
• 元の配列の各オブジェクトについて、すでに unique 配列内に同じ image 値を持つオブジェクトが存在するかどうかを確認します。
• 存在しない場合のみ、そのオブジェクトを unique 配列に追加します。
• これにより、元の並び順を保ったまま、各画像が最初に出現したオブジェクトだけが残ります。

実行結果

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

[
    { image: 'jv2bcutaxrms4i_img.png', gallery_image: true },
    { image: 'abs.png', gallery_image: true },
    { image: 'acd.png', gallery_image: false }
]

より効率的な代替方法：Set を活用する

上記の方法は直感的で分かりやすい反面、ネストしたループにより計算量が O(n²) となるため、配列の要素数が多い場合にはパフォーマンスが低下します。Set と filter を組み合わせれば、線形時間 O(n) で処理でき、より効率的です。

const buildUnique = (arr = []) => {
    const seen = new Set();
    return arr.filter(obj => {
        if(seen.has(obj.image)){
            return false;
        }
        seen.add(obj.image);
        return true;
    });
};
console.log(buildUnique(arr));

この方法では、Set の has メソッドによって各要素の重複チェックが高速に行われ、大きなデータセットでも快適に動作します。用途やデータサイズに応じて、両者の使い分けを検討するとよいでしょう。