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 }) const map2 = map1.set('b', 50) map1.get('b')
|
😸 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'); 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(); ImmutableObj.set('key', 'value'); const newContent = oldContext.merge({ "logged": true, "error": false });
|
Map型について
Map
型はkeyとvalueのセットの構造です。
const map1 = Map({a: 'hoge', b: 'fuga'}); map1.get('a'); const map2 = map1.set('c', 'piyo'); const map3 = map2.merge({ d: 'tora', e: 'goza' }); map2.entrySeq().forEach(e => { console.log(`key: ${e[0]}, value: ${e[1]}`) });
|
List型について
List
型の基本的な使い方は次のとおりです。
const list1 = Immutable.List.of(1, 2); const list2 = list1.push(3, 4, 5); list2.size; const list3 = list2.unshift(0); list3.size var list4 = list1.concat(list2, list3); list4.size list1.toArray(); list1.map(i => i + 1).toObject(); 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円/月と格安)