JavaScript配列の重複除去（Set）の基本と実践
配列に同じ値が何度も入っているとき、「ユニークな値だけ欲しい」場面があります。そんなときに便利なのが Set とスプレッド構文 ... を組み合わせる方法です。
構文と考え方
const unique = [...new Set(arr)];
- Set: 値の重複を許さないコレクション。配列を渡すと自動的に重複が取り除かれる。
- スプレッド構文
...: Setの中身を展開して新しい配列に変換する。 - 返り値: 重複のない新しい配列。元の配列は変更されない。
すぐ使えるテンプレート集
基本：数値の重複除去
const nums = [1, 2, 2, 3, 4, 4, 5];
const uniqueNums = [...new Set(nums)];
console.log(uniqueNums); // [1, 2, 3, 4, 5]
- ポイント: 重複が自動的に消える。順序は「最初に出てきた順」が保たれる。
文字列の重複除去
const fruits = ["apple", "banana", "apple", "orange", "banana"];
const uniqueFruits = [...new Set(fruits)];
console.log(uniqueFruits); // ["apple", "banana", "orange"]
- ポイント: 文字列でも同じ。最初に出てきた順序が残る。
オブジェクトの重複は除去できない（参照が違うため）
const objs = [{id:1}, {id:1}];
const uniqueObjs = [...new Set(objs)];
console.log(uniqueObjs); // [{id:1}, {id:1}] （重複は消えない）
- ポイント: Setは「参照の同一性」で判定するため、同じ内容でも別オブジェクトなら残る。オブジェクトの重複除去は別の方法（例：filter＋map）を使う。
応用：配列を一気にユニーク化して結合
const a = [1, 2, 3];
const b = [2, 3, 4];
const mergedUnique = [...new Set([...a, ...b])];
console.log(mergedUnique); // [1, 2, 3, 4]
- ポイント: 結合＋重複除去を一行で書ける。
よくある落とし穴と対策
- オブジェクトや配列の重複は消えない: 値の内容ではなく「参照」が比較されるため。必要ならキーを基準にfilterやreduceで処理する。
- 順序が変わると思い込む: Setは「最初に出てきた順」を保持する。ソートはされない。
- 元配列が変わると思い込む: Set＋スプレッドは新しい配列を返すので、元はそのまま。
他の手段との使い分け
| 手段 | 主な用途 |
|---|---|
[...new Set(arr)] | 簡単に重複除去（プリミティブ値） |
| filter＋indexOf | 古い環境でも使える |
| reduce＋オブジェクト | 複雑な条件でユニーク化 |
| lodashのuniq | ライブラリ利用で簡潔に |
練習問題（手を動かして覚える）
1. 数値配列の重複を除去
const nums = [1, 1, 2, 3, 3, 4];
console.log([...new Set(nums)]); // [1,2,3,4]
2. 文字列配列の重複を除去
const names = ["Aki","Mao","Ren","Aki"];
console.log([...new Set(names)]); // ["Aki","Mao","Ren"]
3. 複数配列を結合してユニーク化
const arr1 = [1,2];
const arr2 = [2,3];
console.log([...new Set([...arr1,...arr2])]); // [1,2,3]
直感的な指針
- プリミティブ値の重複除去なら最短:
[...new Set(arr)] - オブジェクトの重複除去は別ロジックが必要: filterやreduceでキーを基準にする