【JavaScript】 Set の便利な使い方の紹介

ECMAScript 6（ES6）に導入された Set オブジェクトは、値の集合を扱うための機能を提供します。 Set は、その中の各要素がユニークであることを保証します。

つまり、同じ値は Set 内に一度だけしか存在できません。

この記事では、そんな Set の便利な使い方を紹介します。

Setの使い方

基本的なSetの使用方法です。 サンプルコードを見れば使い方はわかると思うので細かく解説はしません。

作成と追加

const mySet = new Set();

mySet.add(1); // Setに1を追加
mySet.add(5); // Setに5を追加
mySet.add(5); // すでに存在するので追加されない
mySet.add('text'); // 文字列も追加可能

console.log(mySet); // Set {1, 5, "text"}

存在チェックと削除

if (mySet.has(1)) {
    console.log("1は存在します");
}

mySet.delete(5); // 5を削除

console.log(mySet); // Set {1, "text"}

サイズ取得

console.log(mySet.size); // 2

要素の反復処理

for (const item of mySet) {
    console.log(item);
}
// 1
// "text"

Setの使いどき

Set は、覚えておくと地味に重宝します。

ユニークな要素のコレクションが必要な場合

Setは自動的に重複を排除します。 ユニークな値のみを保持する必要がある場合に便利です。

例えば、以下のように配列の値を一意にすることができます。

const sampleArray = ['Apple', 'Banana', 'Lemon', 'Banana'];
const uniqueValues = new Set(sampleArray);

複雑な if 文の効率化

こんなケースってないでしょうか。

if (value === 'Apple' || value === 'Banana' || value==='Lemon' || ... ) {
  // 何らかの処理
}

何をやりたいかはわかりますが、メンテナンス性に欠けますね。 Setのhasメソッドは、要素が存在するかどうかを効率的にチェックできます。

こう書きませんか？

const targets = new Set(['Apple', 'Banana', 'Lemon', ...]);
if (targets.has(value)) {
  // 何らかの処理
}

これなら if 文に手を加えなくてすみますね。

ちなみに、配列の includes によるチェックよりも Set の has の方が効率的だったはず（間違ってたらゴメンナサイ）です。

さらにおまけ

こんな関数をユーティリティとして定義しておくと、地味に便利です。

function isUniqueItemsArray(array) {
  const uniqueItems = new Set(array);
  return array.length === uniqueItems.size;
}

参考

• MDN Web Docs -Set

初めてのJavaScript 第3版 ES2015以降の最新ウェブ開発 [ Ethan Brown ] 楽天で購入

おわりに

ES6 では便利な機能や構文、関数が追加されています。 レガシーな書き方からの脱却を目指しましょう。