● Javascript の Set とは

Set は重複のない値の管理に特化したデータ構造で、既読メッセージIDの管理には配列よりもはるかに適しています。
特に大量のメッセージがある場合のパフォーマンス差は顕著に現れます。

Set とは

基本的な特徴

// Set の作成
const mySet = new Set();

// 値の追加
mySet.add('apple');
mySet.add('banana');
mySet.add('apple'); // 重複は無視される

console.log(mySet); // Set(2) {'apple', 'banana'}
console.log(mySet.size); // 2

配列との違い

// 配列の場合（重複あり）
const fruits = ['apple', 'banana', 'apple'];
console.log(fruits.length); // 3
console.log(fruits); // ['apple', 'banana', 'apple']

// Set の場合（重複なし）
const fruitsSet = new Set(['apple', 'banana', 'apple']);
console.log(fruitsSet.size); // 2
console.log(fruitsSet); // Set(2) {'apple', 'banana'}

既読管理での Set の利点

1. 重複の自動排除

const [readMessageIds, setReadMessageIds] = useState<Set<string>>(new Set());

// 同じメッセージIDを何度追加しても重複しない
setReadMessageIds(prev => new Set([...prev, 'message-123']));
setReadMessageIds(prev => new Set([...prev, 'message-123'])); // 重複無視

2. 高速な存在チェック

// ✅ Set: O(1) - 超高速
const isRead = readMessageIds.has('message-123');

// ❌ 配列: O(n) - 要素数に比例して遅くなる
const isRead = readMessageArray.includes('message-123');

Set の主要メソッド

const mySet = new Set();

// 追加
mySet.add('value1');
mySet.add('value2');

// 存在チェック
console.log(mySet.has('value1')); // true
console.log(mySet.has('value3')); // false

// 削除
mySet.delete('value1');

// 全削除
mySet.clear();

// サイズ
console.log(mySet.size); // 0

// 配列に変換
const array = [...mySet]; // または Array.from(mySet)

// ループ処理
mySet.forEach(value => console.log(value));
for (const value of mySet) {
  console.log(value);
}

配列 vs Set のメソッド比較