Immutable.jsチートシート

React.jsと一緒に使うことで、immutableなオブジェクトを扱うことができ、パフォーマンスが向上する「facebook/immutable-js」の紹介と簡単なチートシートです。

🏀 Immutable.jsとは

Immutable.jsはimmutableなデータ構造を扱うJavaScriptのライブラリです。

const { Map } = require('immutable')
const map1 = Map({ a: 1, b: 2, c: 3 })

// map1からbを変更した別のオブジェクトを生成
const map2 = map1.set('b', 50)

// map1のオブジェクトはそのまま
map1.get('b') // 2

🍮 Immutable.jsをReactに導入

ReactにImmutable.jsを導入することで変更ロジックをモデルの中にまとめ、保守性を向上できます。


  post={this.props.post}
  onChange={this.props.onChange}
/>

Immutable.jsのない通常のReact Component：

class PostEditor extends React.Component {
  addTag(tag) {
    this.props.onChange(this.props.post.addTag(tag));
  }

  removeTag(tag) {
    this.props.onChange(this.props.post.removeTag(tag));
  }
}

this.props.onChangeのメソッドでstateの更新を行います。

Immutable.jsを含んだコード：

import { Record, List } from 'immutable';

const PostRecord = Record({title: '', content: '', tags: List() });

class Post extends PostRecord {
  addTag(tag) {
    return this.set('tags', this.tags.push(tag));
  }

  removeTag(tag) {
    return this.set('tags', this.tags.filter(t => t !== tag));
  }
}

新しいオブジェクトを生成して、それを返り値にします。ロジックがImmutable.jsのコード内に集約されるのでテストが見通しが良くなります。

🎂 チートシート

Immutable.jsでよく使う型のチートシートです。

Record型の更新

Record型はJSのObjectにフィールドとそのデフォルト値がついたしくみです。

// 新規オブジェクトの生成
const ABRecord = Record({ a: 1, b: 2 });
const record1 = new ABRecord({ b: 3 });

// 対象のフィールドの取得
record1.get('a'); //=> 1

// 対象フィールドの削除
const record2 = record1.remove('b')

// 独自メソッドの追加も可能
class ABRecord extends Record {
  getAB() {
    return this.get('a') + this.get('b');
  }
}
const record3 = new ABRecord({b: 3})
record3.getAB(); //=> 4

// 特定の1つのカラムの更新
ImmutableObj.set('key', 'value');

// 複数カラムの更新
const newContent = oldContext.merge({
    "logged": true,
    "error": false
});

Map型について

Map型はkeyとvalueのセットの構造です。

const map1 = Map({a: 'hoge', b: 'fuga'});

// aの値を取得
map1.get('a'); //=> 1

// cの値を追加
const map2 = map1.set('c', 'piyo'); //=> { a: "hoge", b: "fuga", c: "piyo" }

// 複数の要素の更新
const map3 = map2.merge({ d: 'tora', e: 'goza' });

// ループ処理は entrySeq entryKey
map2.entrySeq().forEach(e => {
  console.log(`key: ${e[0]}, value: ${e[1]}`)
});

List型について

List型の基本的な使い方は次のとおりです。

// List 生成
const list1 = Immutable.List.of(1, 2);

// List の末尾への追加
const list2 = list1.push(3, 4, 5);
list2.size; //=> 5

// List の先頭への追加
const list3 = list2.unshift(0);
list3.size //=> 6

// List 同士の結合
var list4 = list1.concat(list2, list3);
list4.size //=> 13

// Array への変換
list1.toArray(); //=> [1, 2]

// Objectへの変換
list1.map(i => i + 1).toObject();
// { 0: 2,
//   1: 3 }

// Listの中にMapがあったり、ネストする場合は toJSを使うと良さそう
list1.map(i => i + 1).toJS();

// ネストされたマップへの追加
const list5 = List([ 0, 1, 2, List([ 3, 4 ])])
list5.setIn([3, 0], 999);