Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Immutable.jsとReact @Wantedly ~入門編~

Immutable.jsとReact @Wantedly ~入門編~

WantedlyでReactとImmutable.jsをどう使っているか

Kento Moriwaki

April 19, 2016
Tweet

More Decks by Kento Moriwaki

Other Decks in Programming

Transcript

  1. シゴトでココロオドル • 森脇健斗 • Wantedlyの新卒二年目エンジニア • フロントエンド好き – Angular書いてた •

    最近、Wantedlyのフロントエンド開発環 境を刷新した – そのとき導入したImmutable.jsについて話し ます 自己紹介
  2. シゴトでココロオドル • オブジェクトのプロパティに代入する代わりに、 新しいオブジェクトを返す Immutable import { Map } from

    'immutable' let map1 = Map({ x: 1, y: 2 }) let map2 = map1.set('x', 2) assert(map1.get('x') === 1) assert(map2.get('x') === 2) assert(map1 !== map2)
  3. シゴトでココロオドル • 便利なメソッド、効率的な変更、深いオブジェ クトも操作しやすい 基本的な挙動 let map1 = Map({ a:

    1, b: 2 }) let map2 = map1.merge({ b: 3, c: 4 }) alert(map2.get('b') == 3) // true // 変更なければ同じオブジェクトを返す let map3 = map1.set('a', 1) alert(map3 === map1) // true // 階層深い変更も簡単 let map3 = Immutable.fromJS({ a: { b: { c: 1 } } }) let map4 = map3.setIn(['a', 'b', 'c'], 2) alert(map4.getIn(['a', 'b', 'c']) === 2) // true
  4. シゴトでココロオドル • List • Set • OrderedMap – IDで検索する機会の多いリストに便利 •

    OrderedSet • Record – Immutableなモデルクラス作れる (後述) 便利な型
  5. シゴトでココロオドル • shouldComponentUpdate – Reactのパフォーマンス向上の基本 – 再レンダーが必要かどうか返す – 自分や親コンポーネントのstateやpropsが変 わった時に呼ばれる

    – デフォルトは常にtrue パフォーマンス向上 shouldComponentUpdate(nextProps, nextState) { return compareSomehow(this, nextProps, nextState) }
  6. シゴトでココロオドル • shouldComponentUpdate – 簡単に • コンポーネント毎に複雑な処理を書きたくない – 高速に •

    再レンダーするより変更チェックが速くあるべき – 正確に • 間違っていると、変更が反映されないようになる パフォーマンス向上 shouldComponentUpdate(nextProps, nextState) { return this.props.foo !== nextProps.foo }
  7. シゴトでココロオドル • 実際に変更されたかチェックする – 変更がない場合は、同じオブジェクトにしたい • Object.assign などが必要 – 変更ないオブジェクトもコピーされる

    Immutable.jsなしの場合 onChange(obj) { let newMap = this.state.map if (newMap.x !== obj.x) { newMap = Object.assign({}, newMap, { x: obj.x }) } this.setState({ map: newMap }) }
  8. シゴトでココロオドル • Reactのpropsを明確化したい – どんなプロパティを期待しているか不明 – 型が指定できれば嬉しい • モデルにメソッド持たせたい 2.

    モデルクラスが作れる TickerComponent.propTypes = { ticket: PropTypes.object.isRequired, } TickerComponent.propTypes = { ticket: PropTypes.instanceOf(Ticket).isRequired, }
  9. シゴトでココロオドル lib/immutable/Ticket.js const _Ticket = Record({ id: null, title: '',

    assignee: new User(), }) export default class Ticket extends _Ticket { static fromJS(ticket = {}) { return (new this).merge({ id: parseInt(ticket.number), title: ticket.title, assignee: User.fromJS(ticket.assignee), }) } isDarkColor() { return parseInt(this.colorCode.substring(1, 7), 16) > 8388607) } }