Immutable.js チートシート（不変永続データ構造）

Immutable.js は、JavaScript 向けに効率的な不変（Immutable）永続データ構造を提供し、React アプリケーションの差分検知を劇的に高速化します。

Map（不変キーバリューオブジェクト）

import { Map } from 'immutable';

const user = Map({ name: 'Alice', age: 30 });

// Accessing values
user.get('name');        // "Alice"
user.has('age');         // true

// Immutably updating (returns new Map instance)
const updated = user.set('age', 31);
const removed = user.delete('age');
const merged = user.merge({ role: 'admin', age: 32 });

// Converting back to plain JavaScript object
user.toJS();             // { name: "Alice", age: 30 }

---

List（不変配列）

import { List } from 'immutable';

const numbers = List([1, 2, 3]);

numbers.get(0);          // 1
const appended = numbers.push(4);    // List [1, 2, 3, 4]
const prepended = numbers.unshift(0);// List [0, 1, 2, 3]
const filtered = numbers.filter(n => n > 1);
const mapped = numbers.map(n => n * 2);

---

階層の深い更新操作（Deep Nested Updates）

import { fromJS } from 'immutable';

const state = fromJS({
  user: {
    profile: {
      location: 'San Francisco'
    }
  }
});

// Deep access
state.getIn(['user', 'profile', 'location']); // "San Francisco"

// Deep update
const nextState = state.setIn(['user', 'profile', 'location'], 'Tokyo');

// Deep update with function
const incremented = state.updateIn(['stats', 'views'], 0, v => v + 1);

---

関連するチートシート

• Redux
• React