Zenn
AIQ Tech Blog (有志)Publicationへの投稿
😺

君はJavaScriptのSetを知っているか？Setの使い方・基本文法まとめ

まさぴょん
2023/11/13に公開
JavaScript
Next.js
React
TypeScript
frontend
tech

こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！
今回は、JavaScriptのSetとは何か、Setの使い方についてまとめて解説します。

JavaScriptのMapに関しては、こちらの記事で解説しています。

https://zenn.dev/aiq_dev/articles/1660d739a1369d

JavaScriptのSetとは何か？

Setは、コレクション・タイプの1つで、keyなしの値(value)の集合です。
Setには次のような特徴があります。

  1. Set内の値(value)は、必ず一意になる
    • 同じ値を追加しようとしても、追加されない。
  2. Setにはkeyがないため、valueを取り出す際には、工夫が必要です。
    • Array.from()で配列に変換して、取り出す。
    • SetのforEach()や、for ofなどの繰り返し処理で取り出す。
  3. Setの一意性チェックを高速に行うよう、内部的に最適化されている。
  4. Setはその要素について挿入順で反復処理を行うことができます。
    • 挿入順は、addメソッドによってSetに挿入された順番に対応します。

活用例：配列の重複する要素・値を削除するためにSetを使用する

活用事例(ユースケース)として、JavaScriptで配列の重複する要素・値を削除するには、Setを使用します。

const cardList = [
  {id: 1, participant: 'ロボたま', affiliation: 'エンジニア'},
  {id: 2, participant: 'まりたま', affiliation: 'エンジニア'},
  {id: 3, participant: '白桃', affiliation: '営業部'},
  {id: 4, participant: 'ももちゃん', affiliation: '営業部'},
  {id: 5, participant: 'まさぴょん', affiliation: '営業部'},
  {id: 6, participant: 'まりぴょん', affiliation: 'デザイナー'},
  {id: 7, participant: 'ハム太郎', affiliation: 'エンジニア'},
  {id: 8, participant: 'ロボ太郎', affiliation: 'デザイナー'},
  {id: 9, participant: 'まり太郎', affiliation: 'デザイナー'},
  {id: 10, participant: 'ぷる玉', affiliation: '人事部'},
  {id: 11, participant: 'ぷるぷる玉', affiliation: '人事部'},
  {id: 12, participant: 'ロボ玉試作1号機', affiliation: 'エンジニア'},
  {id: 13, participant: 'ロボ玉試作2号機', affiliation: 'デザイナー'},
  {id: 14, participant: 'ロボ玉試作1号機', affiliation: 'ロボ玉開発部'},
];

// 部署・情報だけの配列
const affiliationList = cardList.map(card => card.affiliation);
console.log('affiliationList', affiliationList);

// 1. 配列の重複を削除する処理 Ver. Array.form
const uniqueAffiliList = Array.from(new Set(affiliationList));
console.log('uniqueAffiliList', uniqueAffiliList);
// ['エンジニア', '営業部', 'デザイナー', '人事部', 'ロボ玉開発部']

// 2. 配列の重複を削除する処理 Ver. スプレッド構文
const uniqueAffiliList2 = [...new Set(affiliationList)];
console.log('uniqueAffiliList2', uniqueAffiliList2);
// ['エンジニア', '営業部', 'デザイナー', '人事部', 'ロボ玉開発部']

上記のSampleCodeは、私の個人ブログで、以前にご紹介した内容になります。

https://masanyon.com/javascript-array-list-unique-delete/

Setの使い方・基本文法

ここからは、Setの使い方・基本文法について解説していきます。
Setの主なメソッドは次の通りです。

Mapの主なメソッド
  1. const set = new Set(); – 新しいsetインスタンスを作ります。
  2. set.add(value) – valueを追加し、set自身を返します。
  3. set.has(value) – valueが存在する場合にtrueを返します。そうでなければfalseになります。
  4. set.delete(value) – valueを削除します。
    • valueが呼び出し時に存在すればtrue, そうでなければfalseを返します。
  5. set.clear() – setをクリア(中身のvalueをすべて削除)します。
  6. set.size – 現在のsetインスタンスの要素の数です。
  7. set.forEach() ー setインスタンスからvalueを1つずつ取り出す。

Setの新規作成(初期インスタンスの作成)

Setを新規作成する場合は、new Set()の形で、Setインスタンスを作成します。
また配列の形で 初期値を渡すことができます。

/** Setコレクションのインスタンスを生成する */ 
const set1 = new Set();
console.log('set1', set1); // set1 Set(0) {size: 0}

/** 3つの初期Dataがセットされている Set・インスタンス */ 
const set2 = new Set(["One", "Two", "Three"]);
console.log('set2', set2); // set2 Set(3) {'One', 'Two', 'Three'}

Setの長さ・sizeを測る

set.sizeで、Setの要素数・長さ(size)を測ることができます。

const set1 = new Set();

const set2 = new Set(["One", "Two", "Three"]);

// set.sizeで、Setの要素数・長さを測ります
console.log(set1.size); // 0
console.log(set2.size); // 3

Setに値(value)を追加する

set.add(value)の形で、Setに値(value)を追加することができます。

また、Set内の値(value)は、必ず一意になる特性があるため、addメソッドで同じ値を追加しようとしても、追加されないという挙動があります。

const set1 = new Set();

// Set に value を追加する
set1.add(1).add(2).add(3)
set1.add(5).add(12)

// 同じ値を追加しようとしても、追加されない
set1.add(1).add(2)
console.log('set1', set1); // Set(5) {1, 2, 3, 5, 12}

Setの値(value)の存在確認をする

set.has(value)で、valueが存在するかどうかの確認ができます。
valueが存在する場合にtrueを返し、そうでなければfalseを返します。

const set1 = new Set([1,2,3,5,12]);

const isHas1 = set1.has(1)
const isHas8 = set1.has(8)
console.log('isHas1', isHas1); // isHas1 true
console.log('isHas8', isHas8); // isHas8 false

Setにセットしたvalueを削除する

set.delete(value)で、valueを削除します。

const set1 = new Set([1,2,3,5,12]);
console.log('set1', set1); // set1 Set(5) {1, 2, 3, 5, 12}

// Setから要素を削除する
set1.delete(1);
set1.delete(5)
console.log('set1', set1); // set1 Set(3) {2, 3, 12}

Setの中身をClear(すべて削除)する

set.clear()で、setをクリア(中身のvalueをすべて削除)します。

const set1 = new Set([1,2,3,5,12]);
console.log('set1', set1); // set1 Set(5) {1, 2, 3, 5, 12}

// Setのすべての要素を削除
set1.clear();
console.log('set1', set1); // set1 Set(0) {size: 0}

Setの値(value)を取得する方法

Setの値(value)を取得する方法には、主に次の3つがあります。

  1. set.forEach()で、setインスタンスからvalueを1つずつ取り出す。
  2. for of文で、valueを1つずつ取り出す。
  3. Array.from()で、Setを配列に変換して、valueを取り出す。

Setした値を取り出すSet.forEach(繰り返し処理)

set.forEach()で、setインスタンスからvalueを1つずつ取り出すことができます。

const userSet = new Set()

const robotama = { name: "ロボ玉" };
const momo = { name: "ももちゃん" };
const hakutou = { name: "白桃" };

userSet.add(robotama).add(momo).add(hakutou)
console.log('userSet', userSet);

userSet.forEach((value, valueAgain, set) => {
  console.log(value);
  console.log(valueAgain);
  console.log(set);
});

for of文でvalueを取り出す

for of文は、イテレーターならvalueを1つずつ取り出すことができます。

const userSet = new Set()

const robotama = { name: "ロボ玉" };
const momo = { name: "ももちゃん" };
const hakutou = { name: "白桃" };

userSet.add(robotama).add(momo).add(hakutou)

console.log('userSet', userSet);

// for of で value を取り出す
for (const user of userSet) {
  console.log(user.name);
}

Array.from()で配列に変換して、取り出す。

Array.from()で、Setを配列に変換して、valueを取り出す方法も有効な手段です。

const userSet = new Set()

const robotama = { name: "ロボ玉" };
const momo = { name: "ももちゃん" };
const hakutou = { name: "白桃" };

userSet.add(robotama).add(momo).add(hakutou)
console.log('userSet', userSet); // userSet Set(3) {{…}, {…}, {…}}
console.log('userSet[0]', userSet[0]); // userSet[0] undefined

const arrayUserSet = Array.from(userSet)
console.log('arrayUserSet', arrayUserSet); // arrayUserSet (3) [{…}, {…}, {…}]
console.log('arrayUserSet[0]', arrayUserSet[0]); // arrayUserSet[0] {name: 'ロボ玉'}

番外編:values, keys, entriesメソッドたち

Mapとの互換性のために、Mapがイテレーションのために持っているメソッドと同じメソッドをSetもサポートしています。

const userSet = new Set()

const robotama = { name: "ロボ玉" };
const momo = { name: "ももちゃん" };
const hakutou = { name: "白桃" };

// Mapと同じく、values, keys, entries もメソッドとして、存在する

const values = userSet.values()
console.log('values', values);

const keys = userSet.keys()
console.log('keys', keys);

const entries = userSet.entries()
console.log('entries', entries);

まとめ

Setの特徴である一意性のあるデータのコレクションが必要な際に、ぜひSetを活用してみてください。

個人で、Blogもやっています、よかったら見てみてください。

https://masanyon.com/

注意事項

この記事は、AIQ 株式会社の社員による個人の見解であり、所属する組織の公式見解ではありません。

求む、冒険者！

AIQ株式会社では、一緒に働いてくれるエンジニアを絶賛、募集しております🐱🐹✨

詳しくは、Wantedly (https://www.wantedly.com/companies/aiqlab)を見てみてください。

参考・引用

https://jsprimer.net/basic/map-and-set/

https://ja.javascript.info/map-set

https://masanyon.com/javascript-array-list-unique-delete/

AIQ Tech Blog (有志)
AIQ Tech Blog (有志)Publication

AIQ 株式会社 に所属するエンジニアが技術情報をお届けします。 ※ AIQ 株式会社 社員による個人の見解であり、所属する組織の公式見解ではありません。 Wantedly: wantedly.com/companies/aiqlab

Discussion