TypeScript Set

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

TypeScript Setの生成方法

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

Note: 集合とは一意な値を集めたものです。集合の数学的定義は、コンピュータサイエンスにおける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 { 1, 2, 3, 4, 5 }
mySet.add(5);
console.log(mySet); // Set { 1, 2, 3, 4, 5 }

deleteメソッド

Setから値を削除します。

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

hasメソッド

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

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

clearメソッド

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

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

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 メソッドチェーン

TypeScriptのメソッドは連結して使用することができ、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); // { {"id": 1, "name": "T-Shirt", "price": 25}, {"id": 2, ...}, ...  }
console.log(shoppingCart.size) // 3

shoppingCartは一意なアイテムのみを含むので、カート内にすでに存在するproductを追加しようとしても、それは再び追加されません。

この記事を書いた人

著者の画像

Jeffry Alvarado

Ex-Facebook Engineer 大学ではコンピュータサイエンスを専攻し、在学中に複数のインターンシップを経験。コンピュータサイエンスが学習できるプラットフォームRecursionを創業し、CTOとしてカリキュラム作成、ソフトウェア開発を担当。

Twitter YouTube GitHub
前の記事
「タプル」
次の記事
「Map」

ツイート