JavaScriptプログラムに関する各種メモ書き

重複のない状態を担保した配列に Set を使う

● 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)
重複排除 手動実装必要 自動
No.2616
05/30 11:16

edit