● 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 のメソッド比較
操作 | 配列 | Set |
追加 | push() - O(1) | add() - O(1) |
存在チェック | includes() - O(n) | has() - O(1) |
削除 | splice() - O(n) | delete() - O(1) |
重複排除 | 手動実装必要 | 自動 |