LoginSignup
24

More than 5 years have passed since last update.

Immutable.js を触ったメモ

Last updated at Posted at 2017-05-07

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24