Map / Set とイミュータブルな更新 ― データを賢く持つ

導入

配列とオブジェクト以外にも、**重複を許さない集合（Set）とキーと値の対応（Map）**という便利なデータ構造があります。あわせて、React などで重要な「元を壊さずに更新する（イミュータブル）」考え方も学びます。

説明

Set は同じ値を1つしか持ちません。重複除去に便利です。

const tags = new Set(["js", "web", "js", "css"]);
console.log(tags.size);         // 3（重複した "js" は1つに）
console.log([...tags].join(",")); // js,web,css（配列に戻せる）
console.log(tags.has("web"));   // true

Map はキーと値の対応表です。オブジェクトと似ていますが、キーの順序が保たれ、size で件数を取れます。

const scores = new Map();
scores.set("太郎", 80);
scores.set("花子", 95);
console.log(scores.get("花子"));  // 95
console.log(scores.size);         // 2

Set や Map をそのまま console.log すると中身がうまく表示されません。.size や .get()、[...set] で取り出して確認しましょう。

イミュータブルな更新とは、元のデータを書き換えず、新しいデータを作ることです。スプレッドを使います。

const state = { count: 1, name: "太郎" };
const next = { ...state, count: state.count + 1 };  // 元を壊さず新しく作る
console.log(state.count);  // 1（元はそのまま）
console.log(next.count);   // 2

配列も、push（元を書き換える）ではなくスプレッドで新しく作れます。

const list = [1, 2, 3];
const added = [...list, 4];   // list は変えない
console.log(list.length, added.length);  // 3 4

なぜ元を壊さないのか——React などでは「新しいデータかどうか」で画面の再描画を判断するため、元を書き換えず作り直すのが基本ルールだからです。

やってみよう

Set に重複した値を入れて size を確かめたり、Map に人を追加したり、スプレッドでオブジェクトの一部だけを更新してみましょう。

演習

new Set([1, 1, 2, 3, 3, 3]) の要素数（size）を表示してください。