Set<T>

SetはJavaScriptの組み込みAPIのひとつで、値のコレクションを扱うためのオブジェクトです。Setには重複する値が格納できません。Setに格納された値は一意(unique)になります。

Setオブジェクトの作り方

Setオブジェクトを新たに作るには、Setクラスをnewします。コンストラクタに配列を渡すと、値がSetに格納されます。

ts
const fruits = new Set(["apple", "orange", "banana"]);
console.log(fruits);
Set { 'apple', 'orange', 'banana' }

ts
const fruits = new Set(["apple", "orange", "banana"]);
console.log(fruits);
Set { 'apple', 'orange', 'banana' }

コンストラクタに渡す配列の中に重複がある場合、重複した値は取り除かれます。

ts
const fruits = new Set(["apple", "apple", "apple"]);
console.log(fruits);
Set { 'apple' }

ts
const fruits = new Set(["apple", "apple", "apple"]);
console.log(fruits);
Set { 'apple' }

コンストラクタ引数を省略した場合、空のSetオブジェクトが作られます。

ts
const fruits = new Set();
console.log(fruits);
Set {}

ts
const fruits = new Set();
console.log(fruits);
Set {}

空のSetオブジェクトのTypeScript上の型はSet<unknown>になります。これでは後からSetに値を追加できないので、空のSetを作るときは、Setの型変数を指定する必要があります。

ts
const fruits = new Set<string>();
//                    ^^^^^^^^ 型変数を指定

ts
const fruits = new Set<string>();
//                    ^^^^^^^^ 型変数を指定

Setの型注釈

TypeScriptでSetの型注釈をする場合は、Set<string>のようにSet要素の型を型変数に指定します。

ts
function doSomething(strings: Set<string>) {
  // ...
}

ts
function doSomething(strings: Set<string>) {
  // ...
}

Setの操作

値を追加する - Set.prototype.add()

Setに値を追加するにはaddメソッドを用います。同じ値は何度追加しても増えないようになっています。

ts
const fruits = new Set<string>();
fruits.add("apple");
fruits.add("apple");
console.log(fruits);
Set (1) {"apple"}

ts
const fruits = new Set<string>();
fruits.add("apple");
fruits.add("apple");
console.log(fruits);
Set (1) {"apple"}

追加した値は最後に足されます。すでに存在する値は、追加されず順番は変わりません。

ts
const numbers = new Set<number>();
numbers.add(1).add(2).add(3);
numbers.add(1);
console.log(numbers);
Set (3) {1, 2, 3}

ts
const numbers = new Set<number>();
numbers.add(1).add(2).add(3);
numbers.add(1);
console.log(numbers);
Set (3) {1, 2, 3}

値を削除する - Set.prototype.delete()

Setから値を取り除くには、deleteメソッドを使います。

ts
const numbers = new Set([1, 2, 3]);
numbers.delete(3);
console.log(numbers);
Set (2) {1, 2}

ts
const numbers = new Set([1, 2, 3]);
numbers.delete(3);
console.log(numbers);
Set (2) {1, 2}

値の有無を確認する - Set.prototype.has()

Setに値が存在するかどうかはhasメソッドで調べられます。

ts
const numbers = new Set([1, 2, 3]);
console.log(numbers.has(1));
true
console.log(numbers.has(999));
false

ts
const numbers = new Set([1, 2, 3]);
console.log(numbers.has(1));
true
console.log(numbers.has(999));
false

値の個数を取得する - Set.prototype.size()

Setにいくつ値が登録されているかを調べるには、sizeフィールドの値を見ます。

ts
const fruits = new Set(["apple", "orange", "banana"]);
console.log(fruits.size);
3

ts
const fruits = new Set(["apple", "orange", "banana"]);
console.log(fruits.size);
3

Setを空っぽにする - Set.prototype.clear()

Setに登録された値をすべて削除するにはclearメソッドを使います。

ts
const fruits = new Set(["apple", "orange", "banana"]);
fruits.clear();
console.log(fruits);
Set (0) {}

ts
const fruits = new Set(["apple", "orange", "banana"]);
fruits.clear();
console.log(fruits);
Set (0) {}

Setをループする

Setオブジェクトはfor-of構文でループできます。

ts
const fruits = new Set(["apple", "orange", "banana"]);
 
for (const fruit of fruits) {
  console.log(fruit); // "apple"、"orange"、"banana"の順で出力される
}

ts
const fruits = new Set(["apple", "orange", "banana"]);
 
for (const fruit of fruits) {
  console.log(fruit); // "apple"、"orange"、"banana"の順で出力される
}

📄️ for-of文 - 拡張for文

JavaScriptで配列をループするのに使えるのがfor-of構文です。PHPのforeachやPythonのfor inと使い勝手が似ている構文です。

Setを配列に変換する

Setオブジェクトを配列に変換するには、スプレッド構文を用います。

ts
const fruits = new Set(["apple", "orange", "banana"]);
const array = [...fruits];
console.log(array);
["apple", "orange", "banana"]

ts
const fruits = new Set(["apple", "orange", "banana"]);
const array = [...fruits];
console.log(array);
["apple", "orange", "banana"]

📄️ 配列のスプレッド構文「...」

JavaScript の配列ではスプレッド構文「...」を使うことで、要素を展開することができます。

Setは直接JSONにできない

SetオブジェクトはJSON.stringifyにかけても、Setに登録されている値はJSONになりません。

ts
const fruits = new Set(["apple", "orange", "banana"]);
console.log(JSON.stringify(fruits));
"{}"

ts
const fruits = new Set(["apple", "orange", "banana"]);
console.log(JSON.stringify(fruits));
"{}"

SetオブジェクトのデータをJSON化したい場合は、一度配列にするなどひと手間必要です。

ts
const fruits = new Set(["apple", "orange", "banana"]);
const array = [...fruits];
console.log(JSON.stringify(array));
["apple","orange","banana"]

ts
const fruits = new Set(["apple", "orange", "banana"]);
const array = [...fruits];
console.log(JSON.stringify(array));
["apple","orange","banana"]

レシピ

配列から重複要素を取り除く

「Setに渡した値は重複しない」という特性を使って、配列から値が重複する要素を取り除く処理に応用できます。

js
const array1 = [0, 0, 1, 1, 2, 2];
const array2 = [...new Set(array1)];
console.log(array2);
[ 0, 1, 2 ]

js
const array1 = [0, 0, 1, 1, 2, 2];
const array2 = [...new Set(array1)];
console.log(array2);
[ 0, 1, 2 ]