JavaScript Setクラスの使い方

  • JavaScript
  • クラス
最終更新日:

この記事のポイント

JavaScript開発において重複のない値を効率的に管理できるデータ構造について学ぶことができます。

  • 重複を自動的に排除する便利なデータ構造の特徴と基本概念
  • 値の追加、削除、検索などの基本的な操作方法と実装テクニック
  • 配列との違いや実際の開発現場での活用場面と応用事例

これらのポイントを押さえることで、より効率的なJavaScriptプログラムの作成が可能になります。

目次

Setクラスとは？

Setクラスは、重複のない値のコレクションを作成するためのデータ構造です。配列と似ていますが、同じ値を2回以上格納することができないという特徴があります。この特性により、データの重複を自動的に排除し、ユニークな値のみを保持できます。

Setクラスに格納される値は、プリミティブ型（数値、文字列、真偽値など）からオブジェクトまで、あらゆる型のデータに対応しています。また、値の追加、削除、存在確認などの操作を高速に実行できるため、効率的なデータ処理が可能です。

【関連】
JavaScriptをもっと詳しく学ぶならpaizaラーニング

基本構文

Setクラスを使用するための基本的な構文をご紹介します。新しいSetクラスの作成はnew Setコンストラクタを使用します。空のSetクラスを作成することも、初期値を配列として渡すことも可能です。

const emptySet = new Set(); const animalSet = new Set(['ネコ', 'イヌ', 'ウサギ']); console.log('空の Set:', emptySet); console.log('初期値を持つ Set:', animalSet);







出力結果
空の Set: Set(0) {}
初期値を持つ Set: Set(3) { 'ネコ', 'イヌ', 'ウサギ' }
値の追加にはaddメソッド、削除にはdeleteメソッドを使用します。また、特定の値がSetクラスに含まれているかを確認するにはhasメソッドが便利です。

  
const fruits = new Set();

fruits.add('リンゴ');
fruits.add('バナナ');
fruits.add('オレンジ');

console.log(fruits.has('バナナ'));

fruits.delete('バナナ');

fruits.forEach(fruit => console.log(fruit));

  


  







出力結果
true
リンゴ
オレンジ
実用例
ここからは、Setクラスの具体的な使用例を詳しく見ていきましょう。実際の開発現場で使用される基本的な操作から応用的な活用方法まで、サンプルコードとともに解説していきます。
基本的な値の追加と削除
Setクラスに動物の名前を追加し、不要になった値を削除する例です。同じ値を複数回追加しても重複は自動的に排除されます。

  
const animals = new Set();
animals.add('ライオン');
animals.add('トラ');
animals.add('ライオン');
animals.delete('トラ');
console.log(animals);

  


  







出力結果
Set(1) { 'ライオン' }
配列から重複を削除
重複した動物名を含む配列から、ユニークな値のみを抽出する際にSetクラスが威力を発揮します。スプレッド構文と組み合わせることで簡潔に記述できる例です。

  
const duplicateAnimals = ['ネコ', 'イヌ', 'ネコ', 'ウサギ', 'イヌ'];
const uniqueAnimals = [...new Set(duplicateAnimals)];
console.log(uniqueAnimals);

  


  







出力結果
['ネコ', 'イヌ', 'ウサギ']
セットの値を確認
特定の動物がSetクラスに含まれているかどうかを確認する例です。hasメソッドを使用します。このメソッドは真偽値を返すため、条件分岐での使用に適しています。

  
const zooAnimals = new Set(['ゾウ', 'キリン', 'ライオン']);
console.log(zooAnimals.has('ゾウ'));
console.log(zooAnimals.has('ペンギン'));

  


  







出力結果
true
false
セットのサイズを取得
Setクラスに含まれる要素の数を確認したい場合は、sizeプロパティを使用します。これは配列のlengthプロパティに相当する機能です。

  
const petAnimals = new Set(['ハムスター', 'ウサギ', 'インコ']);
petAnimals.add('フェレット');
console.log(petAnimals.size);

  


  







出力結果
4
セットをクリア
Setクラスのすべての要素を一度に削除したい場合は、clear()メソッドを使用します。これにより、Setクラスは空の状態に戻ります。

  
const farmAnimals = new Set(['ウシ', 'ブタ', 'ニワトリ']);
console.log(farmAnimals.size);
farmAnimals.clear();
console.log(farmAnimals.size);

  


  







出力結果
3
0
セットの値を繰り返し処理
Setクラスの各要素に対して処理を実行したい場合は、forEach()メソッドやfor...of文を使用できます。配列と同様の方法でイテレーションが可能です。

  
const wildAnimals = new Set(['クマ', 'オオカミ', 'シカ']);
wildAnimals.forEach(animal => {
  console.log(`野生動物: ${animal}`);
});

  


  







出力結果
野生動物: クマ
野生動物: オオカミ
野生動物: シカ
複数のセットを結合
2つのSetクラスを結合して新しいSetクラスを作成する場合は、スプレッド構文を活用します。重複する値は自動的に除去されます。

  
const mammals = new Set(['ネコ', 'イヌ', 'ウマ']);
const birds = new Set(['ニワトリ', 'ハト', 'ネコ']);
const allAnimals = new Set([...mammals, ...birds]);
console.log(allAnimals);

  


  







出力結果
Set(5) { 'ネコ', 'イヌ', 'ウマ', 'ニワトリ', 'ハト' }
セットの値をフィルタリング
条件に合致する要素のみを含む新しいSetクラスを作成したい場合は、配列に変換してからfilterメソッドを使用し、再びSetクラスに戻します。

  
const animals = new Set(['ライオン', 'ネコ', 'トラ', 'イヌ', 'ゾウ']);
const longNameAnimals = new Set([...animals].filter(animal => animal.length > 2));
console.log(longNameAnimals);

  


  







出力結果
Set(1) { 'ライオン' }
まとめ
Setクラスは、重複のない値を効率的に管理するための強力なデータ構造です。配列との違いを理解し、適切な場面で活用することで、より効率的なプログラムを作成できます。基本的な操作から応用的な使い方まで幅広い活用方法があり、現代のJavaScript開発において欠かせないツールとなっています。
Setクラスの活躍する場面
    

  • フォームの入力値や APIレスポンスから重複した値を自動的に排除する場面
    • 

  • ユーザーIDや商品コードなど、一意性が重要なデータの管理
    • 

  • 大量のデータから特定の値を高速で検索したい場面
    • 

重要なポイント
    

  • 同じ値を複数回追加しても自動的に重複が除去される特性の活用
    • 

  • has()メソッドを使用した効率的なデータの存在確認機能
    • 

  • 配列との相互変換によるフィルタリングや加工処理の実現
    • 

これらの特徴を理解し、適切な場面でSetクラスを活用することで、パフォーマンスの向上と保守性の高いコードの作成が可能になります。特に大量のデータを扱うアプリケーションにおいて、その効果を実感できるでしょう。
レベルを更に上げたい方はpaizaプログラミングスキルチェックへ





























  1. paizaラーニングトップ
  2. リファレンス
  3. JavaScriptのリファレンス記事一覧
  4. JavaScript Setクラスの使い方