JavaScriptで配列の重複を削除する方法（Set）
JavaScriptで配列から重複する要素を取り除きたいとき、Setを使えば一行で書けます。昔は手間がかかった処理も、今はとてもシンプル。コピペで使える基本形と仕組みを押さえましょう。
const arr = [1, 2, 2, 3, 3, 3];
const unique = [...new Set(arr)];
// 結果: [1, 2, 3]| 要素 | 役割 |
|---|---|
| new Set(arr) | 重複を除いた集合を作る |
| [... ] | 集合を配列に戻す（スプレッド） |
仕組みを理解する
Setは「重複を許さない集合」です。
- Setで重複が消える
- Setは同じ値を1つしか持てないデータ構造。配列をSetに入れると、自動的に重複が取り除かれます。
- 配列に戻す
- Setのままでは配列の操作ができないので、スプレッド構文 [...] で配列に戻します。これで重複なしの配列が完成します。
コツ：この[...new Set(arr)]が、重複削除の定番イディオムです。短く読みやすいので、数値や文字列の配列ならこれが一番手軽。覚えておくと便利です。
注意点と応用
使える場面と限界を知っておきます。
- プリミティブ向き…数値・文字列の重複削除に最適。
- オブジェクト配列は不可…オブジェクトは中身が同じでも別物扱いになる。
- 順序は保たれる…Setは挿入順を保つので、元の並び順が維持される。
注意：Setはオブジェクトの配列では重複を判定できません。中身が同じオブジェクトでも別のものとして扱われるためです。オブジェクト配列の重複削除には、特定のキーで判定するなど別の方法が必要です。
あわせて読みたい：JavaScriptで日付を「YYYY-MM-DD」形式にする方法／Pythonで辞書を値（value）でソートする方法／JavaScriptの記事一覧
まとめ
JavaScriptの配列重複削除は[...new Set(arr)]が定番。Setが重複を取り除き、スプレッド構文で配列に戻します。数値や文字列の配列に最適で、順序も保たれます。ただしオブジェクトの配列では中身で判定できないため、別の方法が必要です。
よくある質問
JavaScriptで配列の重複を削除するには？
Setを使い [...new Set(arr)] と書くのが定番です。Setが重複を取り除き、スプレッド構文 [...] で配列に戻します。数値や文字列の配列に最適です。
なぜSetで重複が消えるの？
Setは同じ値を1つしか持てない「集合」だからです。配列をSetに入れると自動的に重複が取り除かれ、スプレッド構文で配列に戻せます。
元の順序は保たれる？
保たれます。Setは挿入順を保持するため、[...new Set(arr)] で重複を削除しても、元の配列の並び順が維持されます。
オブジェクトの配列でも使える？
そのままでは使えません。Setは中身が同じオブジェクトでも別物として扱うためです。特定のキーで判定するなど、別の方法で重複削除する必要があります。