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

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

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

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


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


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); // 結果:{"東京都", "神奈川県", "埼玉県", "千葉県"}

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

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

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

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

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

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

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