JavaScript 逆引き集 | 配列の重複除去（Set）

JavaScript

2025.12.032026.07.14

Set で「重複を消してユニークな配列にする」

[...new Set(arr)] は、配列から重複した値を取り除いて、「一度だけ出てくる値だけの配列」を作るための書き方です。天才プログラマー視点で言うと、「とりあえず重複を消したい」ときの最短ルートがこれです。

Set が「重複を許さない箱」、スプレッド ... が「その箱の中身を配列に戻すためのバラし機」と考えるとイメージしやすいです。

まず、Set とは何かを押さえます。

const s = new Set([1, 2, 2, 3]);
console.log(s); // Set { 1, 2, 3 }

const s = new Set([1, 2, 2, 3]);
console.log(s); // Set { 1, 2, 3 }

JavaScript

Set は、同じ値を2回入れようとしても、1回分しか持たないという性質を持っています。つまり、「重複を自動的に排除してくれるコレクション」です。

この性質を利用して、「配列 → Set に入れる → 重複が消える → それをまた配列に戻す」という流れを作るのが [...new Set(arr)] です。

具体的な例で見てみます。

const arr = [1, 2, 2, 3, 3, 3];

const unique = [...new Set(arr)];

console.log(unique); // [1, 2, 3]

const arr = [1, 2, 2, 3, 3, 3];

const unique = [...new Set(arr)];

console.log(unique); // [1, 2, 3]

JavaScript

ここで起きていることを順番に説明します。

まず new Set(arr)。これは「配列 arr の中身を Set に入れる」という意味です。 Set は重複を許さないので、結果は「1, 2, 3」だけを持つ Set になります。

次に [...new Set(arr)]。スプレッド ... は、「Set の中身をバラして並べる」という意味です。それを [...] の中に入れることで、Set の中身を配列として取り出すことができます。

結果として、「重複が消えた配列」が手に入ります。

よくあるパターンとして、「タグの一覧から重複を消したい」というケースがあります。

const tags = ["js", "web", "js", "frontend", "web"];

const uniqueTags = [...new Set(tags)];

console.log(uniqueTags); // ["js", "web", "frontend"]

const tags = ["js", "web", "js", "frontend", "web"];

const uniqueTags = [...new Set(tags)];

console.log(uniqueTags); // ["js", "web", "frontend"]

JavaScript

ここでは、

同じタグが何度も出てきても、最終的に「js」「web」「frontend」が1回ずつだけ残る形になります。

「とりあえずユニークな一覧が欲しい」という場面では、この書き方が圧倒的にシンプルです。

Set は、「同じ値かどうか」を === に近いルールで判断します。

数値や文字列などの原始値なら、直感通りに動きます。

const arr = [1, 1, "1", "1"];

const unique = [...new Set(arr)];

console.log(unique); // [1, "1"]

const arr = [1, 1, "1", "1"];

const unique = [...new Set(arr)];

console.log(unique); // [1, "1"]

JavaScript

数値の 1 と文字列の "1" は別物なので、両方残ります。このおかげで、意図しない「ごっちゃな重複削除」が起きにくいです。

一方、オブジェクトの場合は「参照」が基準になります。

const a = { id: 1 };
const b = { id: 1 };

const arr = [a, b];

const unique = [...new Set(arr)];

console.log(unique.length); // 2

const a = { id: 1 };
const b = { id: 1 };

const arr = [a, b];

const unique = [...new Set(arr)];

console.log(unique.length); // 2

JavaScript

見た目が同じでも、別々に作られたオブジェクトは別物として扱われます。初心者のうちは、「Set で重複を消すのは、数値や文字列に対して使うのが基本」と覚えておくと安全です。

[...new Set(arr)] は、元の配列 arr を一切変更しません。

const arr = [1, 2, 2, 3];

const unique = [...new Set(arr)];

console.log(arr);    // [1, 2, 2, 3]
console.log(unique); // [1, 2, 3]

const arr = [1, 2, 2, 3];

const unique = [...new Set(arr)];

console.log(arr);    // [1, 2, 2, 3]
console.log(unique); // [1, 2, 3]

JavaScript

「重複を消したバージョン」と「元の生データ」を両方持っていたいときに、この書き方はとても扱いやすいです。

配列から重複を消したい。ユニークな値だけの一覧が欲しい。元の配列はそのまま残しておきたい。

そんなときに、 [...new Set(arr)] と一行で書けることが、 JavaScript 初心者から一歩抜け出すための、かなり強力な武器になります。