JavaScriptで配列を扱っていると、意図せず重複する要素が生じてしまい、データ処理やUI表示に混乱をきたすことがあります。この記事では「JavaScript 配列 重複 削除」というキーワードの元に、配列の重複を効率的に削除する方法を丁寧に解説します。プリミティブ型・オブジェクト型それぞれに対応した手法、パフォーマンス比較、最新版のES機能を含め、実務で使えるノウハウを網羅しています。これを読めば配列重複の問題はすべて解決できます。
JavaScript 配列 重複 削除 の基本的な目的と意義
配列に含まれる重複を削除することは、データの正確性を保つため非常に重要です。例えばユーザー入力の一覧、APIからのレスポンス、ログ情報など、同じ値または同じオブジェクトが複数回出現すると、誤ったカウント・表示・集計が発生します。
重複削除によりメモリ使用効率も改善され、アルゴリズムの処理時間の無駄が省かれます。
さらに重複の有無がバグの原因となる場合も多く、またセキュリティや整合性の観点からも重複排除は欠かせません。
そのため「JavaScript 配列 重複 削除」をキーワード検索するユーザーは、効率の良い方法、最新のやり方、オブジェクト型への対応、巨大配列での性能などを期待しています。
配列重複削除の基本的な要件とは、重複要素が取り除かれ、元のデータの順序（必要なら）を可能な限り維持し、性能が許容範囲内であることです。
特にプリミティブ型（数値・文字列など）は手軽ですが、オブジェクト・ネスト配列になると比較関数やキー指定が求められるようになります。
また、最新のJavaScript仕様（ES2015以降）には重複削除を助ける構造体と文法が追加されており、それらを活用することが望まれます。
重複削除で重要な要素
どの方法を選ぶかは次の要素で判断すべきです。
・配列の要素型（プリミティブかオブジェクトか）
・順序を保持するかどうか
・パフォーマンス（要素数が多いか少ないか）
・メモリ使用量
これらを理解しておくことで、具体的な重複削除手法を選ぶ際に適切な判断ができます。
性能比較で分かる最適な重複削除の手法
重複削除の方法は複数ありますが、性能差が無視できないケースがあります。ここでは一般的な手法を比較し、それぞれの長所短所を性能やメモリ観点から分析します。
実際に100,000要素程度の配列でベンチマーク測定された値によると、Setを使う方法が最も高速であり、indexOfとfilterを組み合わせた方法は要素数が多くなるほど性能が低下します。
このようなベンチマーク結果を理解したうえで、用途に合わせて手法を選ぶ必要があります。
Setを使った重複削除の特徴と性能
Setはコレクションの中で値の重複を自動的に削除する構造体で、プリミティブ型の重複排除に非常に向いています。配列をSetに変換し、再び配列に戻すことで簡潔に重複削除が可能です。
性能面では、大量の要素がある場合でも高速であり、内部でハッシュ構造を利用しているためルックアップが定数時間に近く済みます。
ただしオブジェクト比較では参照の違いを見てしまうので、内容が同じでも異なるオブジェクトは重複として扱われない点に注意が必要です。
filter と indexOf を用いた重複削除の特徴
filterメソッドとindexOfを組み合わせる方法は、「その要素が最初に出現した位置かどうか」を判断して重複を除去します。
コードが直感的で読みやすく、小規模または中規模の配列に適しています。
ただし配列全体をindexOfで走査するため、要素数が多いと二重ループに近くなり性能が大幅に落ちます。多くのブラウザや環境でSetよりも遅いことが測定されています。
プリミティブ型とオブジェクト型の性能差
プリミティブ型（数値・文字列等）は単純比較で済むため重複検出が容易ですが、オブジェクト型になるとプロパティの比較やシリアライズ、キーによるハッシュ化が必要になることがあります。
オブジェクト型重複削除の典型的手法としては、MapやWeakMapをプロパティキーと対応させて使う方法や、reduceとtrail用関数を用いるものがあります。
このような場合、性能は比較的コスト高になりやすいので、対象データの構造を理解して最適なメソッドを選ぶべきです。
プリミティブ型配列で使える具体的な重複削除方法
数値や文字列だけで構成されたプリミティブ型配列であれば、比較的簡潔で高速な方法が複数あります。順序を維持したいかどうかで選ぶ手法が変わります。ここでは具体例を示します。
Set を使う方法
Setを使った方法は記述がシンプルで、順序も初出順序が維持されます。例えば、次のように書きます。
const arr = [3,1,2,3,2,4];
const unique = […new Set(arr)];
この方法は数値や文字列の配列に最適です。読みやすさと性能のバランスに優れており、配列要素数が数万～十万件レベルでも実用的です。
filter と indexOf を使う方法
filterメソッドを使って、各要素がその配列で最初に現れたかどうかをindexOfで判断する方法です。
const unique = arr.filter((val, idx, self) => self.indexOf(val) === idx);
この手法はコードの可読性が高く、小～中規模配列においては十分な速度です。しかし、indexOfが内部で線形探索をするため、要素数が増えると性能が急激に低下する点に留意が必要です。
forEach と includes を使う方法
forEachで配列を巡回し、新しい配列(uniqueArray)を用意して includes を使って重複をチェックしながら要素を追加する方法です。
const uniqueArray = [];
arr.forEach(item => { if (!uniqueArray.includes(item)) uniqueArray.push(item); });
この方法も可読性は高いですが、includesも線形探索なので性能的には filter/indexOf と似ており、大規模データでは Set を使った方法が優れています。
オブジェクト型配列や複数条件で重複削除が必要な場合
ユーザー情報などオブジェクトの配列で、特定のキー（たとえば id や name）で重複排除を行いたい場合があります。また、複数のプロパティを組み合わせて重複を判断したいこともあります。そのようなケースに特化した手法を紹介します。
Map を使ってオブジェクトの重複をキーで判定する方法
Mapを使えばオブジェクト配列で特定のキーを用いて重複を識別できます。たとえば id に基づいて重複を排除するなら、Map の key を id にして value をオブジェクトにする、という手順です。
const map = new Map();
arr.forEach(obj => { if (!map.has(obj.id)) map.set(obj.id, obj); });
const uniqueObjects = Array.from(map.values());
この方法はオブジェクトの内容に対して明確なキーがある場合に非常に使いやすく、安全で高速です。
reduce を使って複数プロパティで重複判定する方法
reduce を用いて accumulator（累積値）に重複かどうかを判断するロジックを組み込むことも可能です。複数のキーを組み合わせて複雑な重複判定を行いたい場合に適しています。
const unique = arr.reduce((acc, obj) => { const exists = acc.find(item => item.id === obj.id && item.name === obj.name); if (!exists) acc.push(obj); return acc; }, []);
このように書くことで複数条件で判定できる一方、find が線形探索となるため要素数が多いとコストが増します。
外部ライブラリを用いた方法
Lodash や Underscore.js といったライブラリには重複削除を簡単に行う util 関数が付属しており、オブジェクト型にも対応しているものが多いです。
ただし最新情報とブラウザ互換性を確認する必要があります。
また、ライブラリの導入コストやバンドルサイズを考慮して、本当に必要な部分のみを使うかどうか判断することが望ましいです。
順序・安定性・メモリ消費の観点からの選び方
重複削除を行う際には、ただ単に重複が消えるだけでなく、「元の順序が保たれるか」「処理が安定しているか」「メモリ・CPUの消費はどの程度か」という点も重視すべきです。
特にユーザー表示や履歴データなどでは、順序の維持が UX に直結します。逆に順序を無視できるならソートしてから重複排除する手もあります。
順序保持と安定性とは何か
順序保持とは、重複削除後にも配列の中で最初に出現した要素の順番が前後しないことです。Set や filter（indexOf）を用いる方法は、元の順序を保ちます。対してソートしてから重複削除する方法は順序を変える可能性があります。
安定性とは、同じ要素が残る選択が一貫することを意味します。順序保持と密接に関係し、重複要素のどちらが残るかが予測可能であることが保証されます。
メモリと処理時間のトレードオフ
重複削除において、Set や Map を使う方法は補助的なストレージを使用します。これはメモリ使用量が増えることを意味しますが、処理時間は通常短くなります。
その一方で filter/indexOf や includes を使う方法は追加ストレージをあまり使いませんが、処理時間が要素数に対して二乗近く増えることがあります。
特に大規模データでは、空間複雑度と時間複雑度のバランスを考えて手法を選ぶことが重要です。
巨大配列での最適手法
数十万件以上の要素を持つ配列を扱う際には、Set や Map を使った手法が現実的です。プリミティブ型なら Set の使用が最も高速で効率的です。オブジェクト型でも Map をキーとして使えばかなり効果的になります。
また並列処理や Web ワーカーを使うなど、処理を分割する方法もありますが、まずはシングルスレッドで最もコスト低い方法を選択することが望まれます。
最新の仕様や環境で使える応用的テクニック
近年のJavaScript（ES2015～ES2024）では、重複削除を簡潔に書ける構文や、型安全性・関数型プログラミング寄りのアプローチが強化されています。最新情報を踏まえ、実践的なテクニックも習得しましょう。
UnionDedup や Array.from を使う構文
配列を Set に変換する手法以外にも、Array.from を使うことで同様の重複削除を記述できます。
const unique = Array.from(new Set(arr));
これはスプレッド構文とほぼ同等ですが、コードのスタイルや可読性に応じて選べます。
最新版の JavaScript 環境ではこの構文も完全にサポートされており、ブラウザ互換性も良好です。
数式・条件付き重複除去 with reducer や comparator 関数
特定条件（たとえば日付順、属性の一致、あるいは正規表現のマッチなど）に基づいて重複を判断したい場合、reducer や custom comparator 関数を用いる方法があります。
arr.reduce((acc,obj) => { if (!acc.some(prev => 判断関数(prev,obj))) acc.push(obj); return acc; }, []);
こういった手法では「判断関数」の設計が鍵であり、比較対象のプロパティを明確にしないと意図しない重複が残るかもしれません。
イミュータブルな操作と不変性を保つパターン
状態管理や React/Vue といったフレームワークで配列を操作する際、不変性（immutable）を保つことが重要です。元の配列を変更せず、新しい配列を返す方法が望まれます。Set や filter や reduce を使う方法はほとんどがイミュータブルな操作です。
逆に splice や sort を使う方法では元の配列が変化する可能性があるため、注意して使う必要があります。
よくある誤解と注意点
重複削除については誤った使い方や過剰な期待が混じることがあります。ここではよくある誤解と、それを避けるコツを挙げます。
オブジェクトの重複判定で参照比較だけになっている
多くの初学者はオブジェクトを直接比較すると参照（アドレス）の比較になることを忘れがちです。内容は同じでも、別のオブジェクトインスタンスであれば重複と判断されません。
内容比較をしたい場合はキーや JSON 文字列化・比較関数を用いますが、文字列化にはコストがかかりますし誤差や順序の影響が出ることがあります。
順序を意図せず変更してしまう手法の落とし穴
ソートを使ってから重複削除を行うと、順序が入れ替わることがあります。たとえば数値の配列を sort() した場合、文字列的な順序でソートされると意図しない順序になる可能性があります。
順序を保持したいのであれば、filter や Set を使った構文を選ぶことが望ましいです。
大きな配列でのスタックオーバーフローやメモリ不足に注意
非常に大きな配列（数百万要素など）を扱う場合、filter/indexOf の組み合わせなど複雑なループは処理時間のほかスタック使用量や実行環境の制限に引っかかることがあります。
そのような場合は chunk に分ける、非同期処理や Web ワーカーを利用する、またメモリ効率の良いデータ構造を使うことを検討してください。
具体的なコード例と比較表
ここまでの情報を活かして、実際のコード例をいくつか示し、それぞれのメリット・デメリットを比較表でまとめます。
コード例一覧
プリミティブ型配列での重複削除例。
例1: Set を使う方法
const arr = [5,3,1,2,5,3,4];
const unique1 = […new Set(arr)];
例2: filter と indexOf の組み合わせ
const unique2 = arr.filter((v,i,self) => self.indexOf(v) === i);
例3: forEach と includes の手動チェック
let unique3 = [];
arr.forEach(item => { if (!unique3.includes(item)) unique3.push(item); });
比較表
| 手法 | メリット | デメリット |
|---|---|---|
| Set → スプレッド構文 | 記述が簡潔・高速・順序保持 | オブジェクトの場合参照比較で意図しない結果になることがある |
| filter + indexOf | わかりやすく直感的、小中規模で有用 | 大規模配列での性能低下、O(n²)に近い時間 |
| forEach + includes | 制御しやすく可読性が高い | includesも線形検索でコストがかかる |
| Map を使ったオブジェクト重複排除 | キー指定が可能・柔軟性がある | キー設計に誤りがあると重複が消えない・コードが長くなる |
実践例：具体的なユースケースでの重複削除
実際に開発現場で使うようなシナリオを想定して、重複削除を適用する具体例を見ていきます。APIデータ処理、フォームデータ、ログ集計など多彩なケースで使える技術を示します。
フォームでの入力データの重複チェック
ユーザーフォームでタグやキーワードを配列で受け取るケースがあります。同じキーワードを何度も入力された場合、それをユニークにすることで UI を綺麗に保てます。
スプレッド+Set を使う方法が最も簡単で、順序も入力順が保持されるためユーザーの意図とズレません。
APIレスポンスのリスト重複処理
サーバーから複数のリソースを取得し、それらが重複していることがある場合、プリミティブ型なら Set、オブジェクト型なら Map か reduce を使うことが多いです。
例えば id プロパティで重複を消す目的なら Map を使った方法がシンプルで効率的です。
ログや統計データ集計時の完全ユニーク要素抽出
ログデータやアクセス情報など、高頻度で値が重複するパスやユーザーIDをユニークに抽出することがあります。
この場合、「両方の重複インスタンスを除く」（単に一つ残すのではなく、重複するものを全て除外する）必要が生じることがあります。
このようなユニーク抽出には count を数えるオブジェクトを用いる方法が役立ちます。
まとめ
「JavaScript 配列 重複 削除」の方法は多数ありますが、用途とデータの性質に応じて最適な手法を選ぶことが肝心です。
プリミティブ型には Set を使うのが最も手軽で高速です。filter + indexOf や includes を使う方法は可読性が高く、小規模な配列では十分ですが、大規模データではコストがかかります。
オブジェクト配列や複数キーを使う重複判定には Map や reduce を使った手法が適しており、キーの設計や比較条件の明確化が重要です。
順序保持・処理時間・メモリ使用量を考慮し、最新の構文や環境サポートを活用することで、重複のないクリーンな配列操作が可能になります。
コメント