TypeScript Set

TypeScriptで利用できるデータ構造の1つにSetがあります。Setは一意な値の集まりであり、Setは重複を許しません。

TypeScript Setの生成方法

TypeScriptでは、Setクラスの新しいインスタンスを作成することで、Setを定義することができます。

Note: 集合とは一意な値を集めたものです。集合の数学的定義は、コンピュータサイエンスにおけるSetデータ構造の基礎となっています。コンピュータサイエンスでは、集合は値のコレクションを保存および管理するために使用され、一般に要素の順序を持ちません。ただし、JavaScriptのSetは要素を追加した順に取り出せます。数学と同様に、コンピュータサイエンスにおける集合は、値の重複を許しません。

Setは、以下のように宣言されます。

let s = new Set();

Setクラスの引数には、オプションで反復可能なオブジェクトを指定することができます。前述のような空のSetオブジェクトの型はSetになります。

例えば数値型を指定したい場合は次のようになります。

let s = new Set<number>();

const mySet = new Set([1, 2, 3, 4]);

この例では、新しいSetインスタンスを作成し、反復可能なオブジェクトとして配列を渡しています。結果として得られるSetには、1,2,3および4の値が含まれます。

TypeScript Setの操作

TypeScriptでは、Setに対していくつかの操作を行うことができます。よく使われる操作としては、以下のようなものがあります。

sizeプロパティ

Setのサイズを返します。

const mySet = new Set([1, 2, 3, 4]);
console.log(mySet.size); // 4

addメソッド

Setに値を追加します。Setは重複を許しません。そのため、同じ値を複数回追加してもSetに格納される値は1つのみです。

const mySet = new Set([1, 2, 3, 4]);
mySet.add(5);
console.log(mySet); // Set(5) { 1, 2, 3, 4, 5 }
mySet.add(5);
console.log(mySet); // Set(5) { 1, 2, 3, 4, 5 }

deleteメソッド

Setから値を削除します。

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

hasメソッド

ある値がSetの中に存在するかどうかをチェックします。

const mySet = new Set([1, 2, 3, 4]);
console.log(mySet.has(3)); // true
console.log(mySet.has(5)); // false

clearメソッド

Setからすべてを取り除きます。

const mySet = new Set([1, 2, 3, 4]);
mySet.clear();
console.log(mySet); // Set(0) {}

TypeScript Setに対する反復処理

組み込みのforEach()メソッドまたはfor...ofループを使用して、Setに対して反復処理を行うことができます。

以下は、forEach()メソッドを使った例です。

const mySet = new Set([1, 2, 3]);

mySet.forEach((value) => {
    console.log(value);
});

以下は、for...ofループを使った例です。

const mySet = new Set([1, 2, 3]);

for (const value of mySet) {
    console.log(value);
}

どちらのループにおいてもSetに入っている値が、追加した順に一つずつ表示されます。

TypeScript メソッドチェーン

addメソッドはSet自身を返すため、続けて別のメソッドを呼び出すメソッドチェーンが使えます。なお、deleteメソッドは真偽値を返すため、その後ろにSetのメソッドを連結することはできません。

console.log(mySet.add(6).has(6)); // true

この例では、最初にaddメソッドが呼び出され、値6がSetに追加されます。addメソッドの結果はSetそのものなので、hasメソッドをその末尾に連結して、値が正常に追加されたかどうかをチェックすることができます。

TypeScript Setの例

オンラインショッピングのWebアプリケーションで、Set型を使って、ユーザーのカートにアイテムを格納するシーンを考えてみましょう。

interface Product {
    id: number;
    name: string;
    price: number;
}

const shoppingCart = new Set<Product>();

function addToCart(product: Product) {
    shoppingCart.add(product);
    console.log(`${product.name} has been added to the cart.`);
}

const product1: Product = { 
    id: 1, 
    name: 'T-Shirt', 
    price: 25 
};

const product2: Product = { 
    id: 2, 
    name: 'Jeans', 
    price: 50 
};

const product3: Product = { 
    id: 3, 
    name: 'Sneakers', 
    price: 75 
};

addToCart(product1); // "T-Shirt has been added to the cart."
addToCart(product2); // "Jeans has been added to the cart."
addToCart(product3); // "Sneakers has been added to the cart."
addToCart(product1); // "T-Shirt has been added to the cart."

console.log(shoppingCart);
// Set(3) {
//   { id: 1, name: 'T-Shirt', price: 25 },
//   { id: 2, name: 'Jeans', price: 50 },
//   { id: 3, name: 'Sneakers', price: 75 }
// }
console.log(shoppingCart.size) // 3

shoppingCartは一意なアイテムのみを含むので、カート内にすでに存在するproductを追加しようとしても、それは再び追加されません。ただし、Setはオブジェクトの重複を参照で判定します。そのため、中身が同じでも別に作成したオブジェクトは、別の要素として追加されます。