JavaScriptのsetオブジェクトをご存知でしょうか?
JavaScriptの標準仕様を規定しているECMAScriptが2015年にアップデートされ、さまざまな機能・仕様が新しく盛り込まれ、その中の一つに、setオブジェクトと呼ばれるオブジェクトが存在します。setオブジェクトを理解できれば、複数のデータをリスト形式で取り扱うことができます。
今回は、新しく追加されたオブジェクトであるsetオブジェクトの使用方法を詳しく解説していきます。オブジェクトの宣言やデータの追加・削除などの基礎的な操作方法から、反復処理への応用方法までを解説していますので、ぜひ参考にしてください。
フリーランス案件を探すならこのエージェント!
転職を考えているならこのエージェント!
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より導入された機能のため、まだあまりよく知らないという方も多かったのではないでしょうか?
配列とは似て非なるもので、「重複した値を保持できない」という点が大きな特徴かと思います。この特徴を活用すれば、配列の重複削除も簡単に実装できますよね。
ご紹介した通り、使い方自体はとてもシンプルで簡単なので、本記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。
このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。
フリーランス案件を探すならこのエージェント!
転職を考えているならこのエージェント!