JavaScriptのSet（セット）入門：初心者向けに基本をわかりやすく解説

JavaScriptでSetを使う方法：初心者向けガイド

「重複しない一意な値だけを格納したいデータリストがある」という場面はありませんか？そんなときに活躍するのが、JavaScriptのSet（セット）というデータ型です。Setは、重複を許さない一意な値のコレクションを作成できるオブジェクトの一種で、同じ値を複数回格納することができません。

この記事では、Setとは何か、どのように動作するのか、どんな場面で役立つのかを解説します。さらに、JavaScriptで利用できる各Setメソッドの具体的な使用例も紹介していきます。

Setとは何か？

Setとは、重複した値を含むことができない値のコレクションです。このデータ型はECMAScript 6（ES6）で導入されました。なお、Setのような機能は他の多くのプログラミング言語にも存在します。

配列（リスト）は複数の値を格納できるため便利ですが、重複した値もそのまま保存されます。これは多くの場面で有用です。

例えば、コーヒーショップの注文履歴を保存する場合、同じドリンクを注文する顧客が複数いるかもしれないので、重複した値をそのまま保持する必要があります。

しかし、リストには一意な値だけを格納したい場合もあります。そんなときに使うのがSetオブジェクトです。Set内の値は一度しか出現できません。

JavaScriptでは、Setは他のオブジェクトと同じように宣言できます。地元のティールームでお客様から聞いた好きなケーキの一覧を保存するSetを作成してみましょう：

let cakes = new Set();
console.log(cakes);

このコードを実行すると Set [] と表示されます。これで空のSetが作成できました。出力結果からわかるように、現時点ではまだ値が入っていません。次に値を追加していきましょう。

初期値を指定してSetを初期化する

Setは、配列・文字列・その他のイテラブル（反復可能オブジェクト）から初期化できます。これにより、値を1つずつ手動で追加する必要がなく、既存のデータをもとにSetを作成できるのが便利な点です。

次の配列を見てみましょう：

let cake_list = ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake"];

現在これらの値は配列に格納されています。これらをSetに変換するには、新しいSetオブジェクトを作成するときに配列を渡すだけです：

let cakes = new Set(cake_list);
console.log(cakes);

実行結果：

Set(3) ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake"]

Setに値を追加する

Setオブジェクトには add() メソッドが用意されており、これを使えば簡単に要素を追加できます。メソッド名も直感的で覚えやすいですね。

例として、地元のベーカリーで販売するケーキのリストに「Boston Cream Pie」を追加してみましょう。add() メソッドを使ってこの値を追加します：

cakes.add("Boston Cream Pie");
console.log(cakes);

実行結果：

Set(4) ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Boston Cream Pie"]

Setには4つの要素が含まれるようになりました。すでにSetに存在する値を追加しようとしても、その値は追加されません。Setは重複した値を格納できないからです。

Setに特定の値が存在するか確認する

ここで、「Boston Cream Pie」がケーキのリストに登録されているかどうかを確認する必要が出てきました。新しく追加された商品なので、パン屋さんが念のためダブルチェックしたいとのことです。

そんなときに便利なのが has() メソッドです。has() メソッドを使うと、Setがある特定の値を持っているかどうかを確認できます。こちらも名前の通りで覚えやすいですね。

次のコードを見てください：

var has_boston_cream_pie = cakes.has("Boston Cream Pie");
console.log(has_boston_cream_pie);

実行結果は true です。has() メソッドは、Setが指定した値を含んでいるかどうかに応じて、trueまたはfalseのブール値を返します。配列で使う includes() メソッドに似ていますが、has() はSet専用である点が異なります。

Setから値を削除する

パン屋さんは、ストロベリーチーズケーキの提供をやめることにしました。他のケーキより製造に時間がかかるわりに人気がなかったのです。

Setから値を削除するには、その名の通りの delete() メソッドを使用します。「Strawberry Cheesecake」をSetから削除してみましょう：

cakes.delete("Strawberry Cheesecake");
console.log(cakes);

実行結果：

Set(3) ["Lemon Cake", "Carrot Cake", "Boston Cream Pie"]

ストロベリーチーズケーキがSetから削除されました。

また、clear() メソッドを使えば、Set内のすべての値を一括で削除できます。

Setを反復処理する

Setは配列と同じく反復可能（イテラブル）なオブジェクトです。つまり、ループ処理で中身を順番に取り出せるということです。

for-eachループを使って、cakesセットの中身を1つずつ取り出し、コンソールに出力してみましょう：

cakes.forEach(cake => {
	console.log(cake);
});

このコードを実行すると、Set内の各値がコンソールに出力されます：

Lemon Cake
Carrot Cake
Boston Cream Pie

とても簡単ですね！for-ofループを使うこともできます：

for (let cake of cakes) {
	console.log(cake);
}

このコードは forEach ループと同じ出力になります：

Lemon Cake
Carrot Cake
Boston Cream Pie

通常のforループでもSetを反復処理できますが、Setはイテラブルなオブジェクトなので、for-eachやfor-ofループを使う方がシンプルでおすすめです。

Setを使って重複した値を削除する

配列からSetを初期化すると、重複した値は自動的に削除されます。これは非常に便利な機能です。

例えば、ケーキの注文リストがあったとしましょう：

var cakes = ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Lemon Cake", "Chocolate Cake", "Chocolate Fudge Cake", "Chocolate Cake", "Red Velvet Cake"];

このリストにはベーカリーへのすべてのケーキ注文が記録されています。合計8つの値があり、うち2つは重複しています。

パン屋さんがキッチンの準備をするために、「どんな種類のケーキが注文されたのか」を知りたいとします。これは、配列をSetに変換することで調べられます：

var unique_cakes = new Set(cakes);
console.log(unique_cakes);

実行結果：

Set(6) [ "Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Chocolate Cake", "Chocolate Fudge Cake", "Red Velvet Cake" ]

リストが6つの値に絞り込まれました。これが注文リストから抽出された一意な値すべてです。あともう1ステップだけ残っています。

標準的な配列メソッドを使って操作できるよう、ケーキのSetを再び配列に戻しましょう。これには Array.from() メソッドを使用します：

let final_cakes = Array.from(unique_cakes);
console.log(final_cakes);

実行結果：

[ "Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Chocolate Cake", "Chocolate Fudge Cake", "Red Velvet Cake" ]

出力結果はSetの場合と似ていますが、大きな違いが1つあります。それは、データが配列として格納されているという点です。これにより、JavaScriptに組み込みのすべての配列メソッドを使ってデータを操作できるようになります。

まとめ

Setオブジェクトを使うと、重複しない一意な値だけを格納するリストを作成できます。Setは、配列や文字列など、既存のイテラブルなオブジェクトから初期化することも可能です。

Setは重複した値を自動的に除去してくれるため、配列から重複を取り除く手段としても活用できます。処理が終わったら、Array.from() を使ってSetを配列に戻せばOKです。

これであなたも、プロのようにJavaScriptのSetを使いこなせるはずです！