【JavaScript】setオブジェクトの便利な使い方をご紹介します！

2022年6月6日
Javascript
Javascript

JavaScriptのsetオブジェクトをご存知でしょうか？

JavaScriptの標準仕様を規定しているECMAScriptが2015年にアップデートされ、さまざまな機能・仕様が新しく盛り込まれ、その中の一つに、setオブジェクトと呼ばれるオブジェクトが存在します。setオブジェクトを理解できれば、複数のデータをリスト形式で取り扱うことができます。

今回は、新しく追加されたオブジェクトであるsetオブジェクトの使用方法を詳しく解説していきます。オブジェクトの宣言やデータの追加・削除などの基礎的な操作方法から、反復処理への応用方法までを解説していますので、ぜひ参考にしてください。

フリーランス案件を探すならこのエージェント！


運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社Hajimari
対応エリア	東京・神奈川・埼玉・千葉大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉茨城・大阪・兵庫・福岡
案件数	約28,000件	約3,300件	約4,200件
平均単価	68.2万円	72.2万円	–
最高月収	145万円	200万円	176万円
特徴	・高単価な案件が多い・福利厚生サービスが受けられる・首都圏の案件が中心	・給与保証制度で安定した収入を得られる・税務処理のサポートあり・マージン率は実質20%	・週2/週3の案件が多い・在宅/リモート案件が多い・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例	・株式会社Gunosy ・株式会社バンダイナムコホールディングス・株式会社ユーザベース	・Sansan株式会社・株式会社一休・株式会社FiNC Technologies など	・クックパッド株式会社・株式会社カオナビ・株式会社Kaizen Platform など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

転職を考えているならこのエージェント！


運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社リブセンス
対応エリア	東京・神奈川・埼玉・千葉大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉茨城・大阪・兵庫・福岡
案件数	約13,000件	約800件 ※非公開求人が多い	– ※ドラフト制のため、対象外
年齢層	20代：◎ 30代：〇 40代：〇	20代：〇 30代：〇 40代：△	20代：〇 30代：〇 40代：〇
特徴	・エンジニア・デザイナーを専門としている・カウンセリングに時間をかける・年収アップ率60％の実績	・IT/Web/ゲーム業界専門の転職エージェント・業界経験者がキャリアコンサルタントを務める・丁寧なカウンセリングで入社後の離職率1%以下を実現	・ドラフト制による採用を叶える特殊なサービス・スキル・経験重視で評価してもらえる・他エンジニアの入札結果を見ることで自分の市場価値が分かる
紹介企業例	・サイボウズ株式会社・株式会社サイバーエージェント・Chatwork株式会社など	・DMM.com ・Money Forward ・SmartHR など	・メルカリ・ZOZOテクノロジーズ・freee など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

1 setオブジェクトとは？
2 setオブジェクトの基本的な使い方
3 setオブジェクトで反復処理を実行する
4 setオブジェクトを使って配列の重複を削除する
5 最後に

setオブジェクトとは？

setオブジェクトは、JavaScriptで用意されているオブジェクトの一つで、データをリスト形式で保持する機能を持ちます。保持できるデータの種類に制限はなく、int型や文字列型、オブジェクトなどを格納できます。

一見すると配列と同じようなものに見えますが、setオブジェクトには配列には存在しない2つの特徴があります。

1つ目は、重複する値を保持できないことです。このような性質を「一意性」といいます。setオブジェクトは、配列のようなデータ構造でありながら複数の要素に同じ値を格納できない、一意性を持ったオブジェクトです。

2つ目は、添字の概念が存在しないことです。配列では、添字を指定することである一つの要素を取得できますが、setオブジェクトにはそのような仕組みが存在しません。

つまり、すでに定義されたsetオブジェクトに対して、特定の要素を取得することができないのです。setオブジェクトで値を取得するには、反復処理を実装することが前提となります。

setオブジェクトの基本的な使い方

はじめに、setオブジェクトの宣言方法とデータの追加・削除などの基本的な操作方法を解説していきます。

setオブジェクトを宣言する

最初は、setオブジェクトの宣言方法について確認してみましょう。

先述したように、setオブジェクトはオブジェクトの一種です。したがって、newキーワードを使って以下のように書きます。

// setオブジェクトの宣言
let data_collection = new Set();

setコンストラクタには、配列を始めとした反復処理可能なオブジェクトを渡すことができます。以下のサンプルコードは、配列を渡しながら宣言したsetオブジェクトと出力処理です。

// setコンストラクタには配列を渡すことが可能
let data_collection = new Set([2, 4, 6, 8, 10]);

console.log(data_collection); // 結果：{2, 4, 6, 8, 10}

配列の各要素が、それぞれsetオブジェクトの一要素として再配置され、要素数が5のsetオブジェクトが作成されます。

setオブジェクトへ値を追加する

次に、setオブジェクトに対してデータを追加する方法です。

データを追加するには、setオブジェクトのadd()メソッドを呼び出します。add()メソッドは、setオブジェクトに挿入したいデータ（型の種類は不問）を引数として、挿入後の新しいsetオブジェクトを戻り値として返します。

サンプルコードは以下の通りです。

let my_data_set = new Set();

// add()メソッドによるデータの追加
my_data_set.add(124);
my_data_set.add("sample data");
my_data_set.add({name: "Sato Taro", age: 18});

// メソッドチェーンを記述可能
my_data_set.add("a").add("b").add("c");

add()メソッドは、データ追加後のオブジェクトを戻り値としているため、7行目のように連続でadd()メソッドを呼び出すことが可能です。

冒頭で述べたように、setオブジェクトは一意性の性質を持っているため、すでにセットされているものと同じデータを追加することはできません。以下のサンプルコードを実行しても分かるように、同じデータを2回追加する操作を実施しても、データが2つ保持されることはありません。

let name_list = new Set();

// 「Yamada Hanako」を追加する操作を2回実施
name_list.add("Yamada Hanako");
name_list.add("Yamada Hanako");

console.log(name_list); // 結果：{"Yamada Hanako"}

setオブジェクトから値を削除する

次は、setオブジェクトからデータを削除する方法について説明します。

データの削除には2つの方法が存在し、要素を1つ削除する場合はdelete()メソッド、データを全削除する場合はclear()メソッドを利用しましょう。サンプルコードを以下に示します。

let product_list_1 = new Set(["pen", "shirt", "cup", "mask"]);
let product_list_2 = new Set(["pen", "shirt", "cup", "mask"]);

// データを1個削除
let result = product_list_1.delete("cup");

console.log(result ? "削除成功" : "削除失敗"); // 結果：削除成功
console.log(product_list_1); // 結果： {"pen", "shirt", "mask"}

result = product_list_1.delete("cap");

console.log(result ? "削除成功" : "削除失敗"); // 結果：削除失敗
console.log(product_list_1); // 結果： {"pen", "shirt", "mask"}

// データを全部削除
product_list_2.clear();

console.log(product_list_2); // 結果： {}

delete()メソッドは、削除したいデータを引数とし、削除できたか否かの結果をブール値として返します。

5行目では、product_list_1内に存在する要素「cup」の削除操作を実施しているため、戻り値はtrueとなり要素数は3つに減少します。一方、product_list_1内には存在しない要素を指定した場合はfalseが返され、要素数に変化はありません。

一方、clear()メソッドは引数を指定する必要はありません。一度呼び出せば、今まで追加されたデータたちはすべて削除され、要素数0の空っぽのオブジェクトになります。

setオブジェクトの値を確認する

setオブジェクトの中身に探したいデータがあるかどうか確認したい場合は、has()メソッドを利用しましょう。has()メソッドの利用方法のサンプルを、以下に示します。

let language_list = new Set(["Japanese", "English", "French", "Chinese"]);

if (language_list.has("Chinese")) {
  console.log("「中国語」がリストに存在します"); // 結果：この行が実行される
} else {
  console.log("「中国語」がリストに存在しません");
}

if (language_list.has("Portuguese")) {
  console.log("「ポルトガル語」がリストに存在します");
} else {
  console.log("「ポルトガル語」がリストに存在しません"); // 結果：この行が実行される
}

has()メソッドの引数は探索したいデータ、戻り値は探索結果に応じたブール値で、存在すればtrue、そうでなければfalseが返されます。

setオブジェクトで反復処理を実行する

setオブジェクトは配列と同じように、for…of構文やmap()メソッドなど、反復処理で利用される機能を使うことができます。以下に、反復処理のサンプルコードを載せましたので、動作確認をしながら挙動を理解しましょう。

let product_price_list = new Set([
	224,
	536,
	1033,
	6352,
	430,
	34,
	392,
	800,
	2385
]);

// 価格を一点ずつ表示する処理
product_price_list.forEach( (price) => console.log(price + "円") );

// 合計金額を計算する処理
let price_sum = 0;
for (let price of product_price_list) {
  price_sum = price_sum + price;
}

console.log("合計" + price_sum + "円"); // 結果：合計12186円

サンプルコードを見ても分かるように、実装方法は配列を採用した場合と大差がないことが分かります。

setオブジェクトを使って配列の重複を削除する

setオブジェクトのコンストラクタに配列を渡せば、配列内の重複するデータが削除されたうえでオブジェクトが作成できます。この仕組みを利用して、配列の重複要素を削除する処理を、以下のように実装できます。

// 重複ありのリスト
let pref_array = [ "東京都", "神奈川県", "埼玉県", "神奈川県", "千葉県", "東京都"];

// setオブジェクトを介して重複分を削除
let pref_list = new Set(pref_array);

// 再度配列化
let unique_pref_array = Array.from(pref_list);

console.log(unique_pref_array); // 結果：{"東京都", "神奈川県", "埼玉県", "千葉県"}

最後に

さて、ここまでJavascriptのsetオブジェクトの使い方やその実装例について解説してきましたがいかがでしたか？

ECMAScript2015より導入された機能のため、まだあまりよく知らないという方も多かったのではないでしょうか？

配列とは似て非なるもので、「重複した値を保持できない」という点が大きな特徴かと思います。この特徴を活用すれば、配列の重複削除も簡単に実装できますよね。

ご紹介した通り、使い方自体はとてもシンプルで簡単なので、本記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。

このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。