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. Immutable.jsとReact
    @Wantedly
    入門編
    Kento Moriwaki / 森脇健斗

    View full-size slide

  2. シゴトでココロオドル
    • 森脇健斗
    • Wantedlyの新卒二年目エンジニア
    • フロントエンド好き
    – Angular書いてた
    • 最近、Wantedlyのフロントエンド開発環
    境を刷新した
    – そのとき導入したImmutable.jsについて話し
    ます
    自己紹介

    View full-size slide

  3. シゴトでココロオドル
    • Facebookが開発している不変オブジェクト
    を扱うライブラリ
    Immutable.jsとは
    https://facebook.github.io/immutable-­‐js/

    View full-size slide

  4. シゴトでココロオドル
    • オブジェクトのプロパティに代入する代わりに、
    新しいオブジェクトを返す
    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)

    View full-size slide

  5. シゴトでココロオドル
    • 便利なメソッド、効率的な変更、深いオブジェ
    クトも操作しやすい
    基本的な挙動
    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

    View full-size slide

  6. シゴトでココロオドル
    • List
    • Set
    • OrderedMap
    – IDで検索する機会の多いリストに便利
    • OrderedSet
    • Record
    – Immutableなモデルクラス作れる (後述)
    便利な型

    View full-size slide

  7. シゴトでココロオドル
    • ReactとImmutable.jsは相性いい
    • 主なメリットは、
    1. パフォーマンス向上
    2. ステートの更新が簡単に書ける
    3. モデルクラス作れる
    Reactと組み合わせるメリット

    View full-size slide

  8. シゴトでココロオドル
    • shouldComponentUpdate
    – Reactのパフォーマンス向上の基本
    – 再レンダーが必要かどうか返す
    – 自分や親コンポーネントのstateやpropsが変
    わった時に呼ばれる
    – デフォルトは常にtrue
    パフォーマンス向上
    shouldComponentUpdate(nextProps, nextState) {
    return compareSomehow(this, nextProps, nextState)
    }

    View full-size slide

  9. シゴトでココロオドル
    • shouldComponentUpdate
    – 簡単に
    • コンポーネント毎に複雑な処理を書きたくない
    – 高速に
    • 再レンダーするより変更チェックが速くあるべき
    – 正確に
    • 間違っていると、変更が反映されないようになる
    パフォーマンス向上
    shouldComponentUpdate(nextProps, nextState) {
    return this.props.foo !== nextProps.foo
    }

    View full-size slide

  10. シゴトでココロオドル
    • 実際に変更されたかチェックする
    – 変更がない場合は、同じオブジェクトにしたい
    • 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 })
    }

    View full-size slide

  11. シゴトでココロオドル
    • 変更がなければ、自動的に同じオブジェクト
    を返す
    • 必要最小限だけ変更される
    – 変更がないオブジェクトはコピーされない
    – Object.assignより効率的
    – 簡潔に書ける
    Immutable.jsを使用すれば
    onChange(obj) {
    let newMap = this.state.map.set('x', obj.x)
    this.setState({ map: newMap })
    }

    View full-size slide

  12. シゴトでココロオドル
    • Reactのpropsを明確化したい
    – どんなプロパティを期待しているか不明
    – 型が指定できれば嬉しい
    • モデルにメソッド持たせたい
    2. モデルクラスが作れる
    TickerComponent.propTypes = {
    ticket: PropTypes.object.isRequired,
    }
    TickerComponent.propTypes = {
    ticket: PropTypes.instanceOf(Ticket).isRequired,
    }

    View full-size slide

  13. シゴトでココロオドル
    • 型を定義できる
    – フィールドを定義したクラスを作れる
    • メソッドを定義できる
    – 継承して、メソッドを持たせることができる
    – 複雑なフィールド更新をモデルに持たせる
    • これも非破壊操作になる
    Immutable.Record

    View full-size slide

  14. シゴトでココロオドル
    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)
    }
    }

    View full-size slide

  15. シゴトでココロオドル
    • Immutable.js使えば
    – Reactのパフォーマンスが簡単に向上できる
    – ステートの更新が簡潔に書ける
    – Reactで使いやすい独自モデルクラスが定義で
    きる
    まとめ

    View full-size slide

  16. シゴトでココロオドル
    最後に

    View full-size slide

  17. シゴトでココロオドル
    • 一緒に働いてくれる仲間を募集しています。
    一緒にReact書きませんか?
    https://www.wantedly.com/projects/51709

    View full-size slide