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を導入することで変更ロジックをモデルの中にまとめ、保守性を向上できます。

<PostEditor
  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);

😼 参照リンク

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です！(有償でも1,480円/月と格安)