Immutable.js とは何か
- JavaScript で不変なデータ構造を扱うためのライブラリ
- 不変なデータは変更ができないため、なんらかの処理で更新した結果を新しいデータとして生成する
- Immutable.js では List, Map, OrderedMap, Record などが不変データ構造として提供されている
Immutable.js を使用するメリットは?
- データが不変であるため、ソースコードの可読性が向上する
- 変更は常に新しいデータコレクションになる
- React/Redux ではビジネスロジックを Model という形で閉じ込める用途にも使用可能
Immutable.js のインストール
$ npm install immutable
または
$ yarn add immutable
Immutable.js が提供する代表的なコレクション
List
- JS の配列相当の順序付けされたコレクション
List
const { List } = require('immutable');
const array = List([1, 2, 3, 4, 5]);
// List 生成
List(); // List []
List([1, 2, 3]); // List [1, 2, 3]
List.of(1, 2, 3); // List [1, 2, 3]
// List かどうかチェック
List.isList([]); // false
List.isList(List()); // true
// List の長さ
List([1, 2, 3]).size; // 3
// 値の取得
array.get(4); // 5
// 値のセット
array.set(0, 5); // List [ 5, 2, 3, 4, 5 ]
// 値の削除
array.delete(4); // List [ 1, 2, 3, 4 ]
array.remove(4); // List [ 1, 2, 3, 4 ] : delete の alias
// 値の存在確認
array.includes(5); // true
// List の初期化
array.clear(); // List []
// List のコレクションを JS の配列に変換
array.toJS(); // [ 1, 2, 3, 4, 5 ]
Map
- JS のオブジェクト相当で順序が未定義のコレクション
- Map の key は任意の型を指定できる
Map
const { Map } = require('immutable');
const map = Map({ a: 'valueA', b: 'valueB', c: 'ValueC' });
// Map 生成
Map(); // Map {}
Map({ a: 'valueA', b: 'valueB' }); // Map { "a": "valueA", "b": "valueB" }
// Map かどうかチェック
Map.isMap({}); // false
Map.isMap(map); // true
// Map の長さ
map.size; // 3
// 値の取得
map.get('a'); // 'valueA'
map.get(a); // undefined
// 値のセット
map.set('d', 'valueD'); // Map { "a": "valueA", "b": "valueB", "c": "ValueC", "d": "valueD" }
// 値の削除
map.delete('b'); // Map { "a": "valueA", "c": "ValueC" }
// 値の存在確認
map.includes('valueB'); // true
// Map の初期化
map.clear(); // Map {}
// Map のコレクションを JS のオブジェクトに変換
map.toJS(); // { a: 'valueA', b: 'valueB', c: 'ValueC' }
Record
- JS のオブジェクトに似ているコレクションを生成
- 特定の key を強制適用し、デフォルト値を持つのが特徴
Record
const { Record } = require('immutable');
const Person = Record({ name: null }, 'Person');
Person(); // Person { "name": null }
const me = Person({ name: 'Taro' }); // Person { "name": "Taro" }
// 値の取得
me.get('name'); // 'Taro'
// サイズの取得
me.size; // 1