Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Immutable.jsとReact @Wantedly ~入門編~
Search
Kento Moriwaki
April 19, 2016
Programming
8
74k
Immutable.jsとReact @Wantedly ~入門編~
WantedlyでReactとImmutable.jsをどう使っているか
Kento Moriwaki
April 19, 2016
Tweet
Share
More Decks by Kento Moriwaki
See All by Kento Moriwaki
わかった気になれる CRDT を使った共同編集
kentomoriwaki
5
3.7k
デザインシステムを導入してUIに秩序を取り戻す - React (Native)編 #rejectron2018
kentomoriwaki
16
3.5k
ReactでWebとNativeの共通UIライブラリを作ろう
kentomoriwaki
0
1.1k
BFFを導入しなかった理由
kentomoriwaki
4
13k
TypeScript in Wantedly
kentomoriwaki
2
660
5分でわかる React "Suspense"
kentomoriwaki
3
1.4k
導入して1年経ったReact周辺の 技術スタックを反省します | React反省会@Wantedly
kentomoriwaki
10
8.5k
React速習会@Wantedly
kentomoriwaki
1
400
Other Decks in Programming
See All in Programming
イベント駆動で成長して委員会
happymana
1
330
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
10
1.3k
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
CSC509 Lecture 12
javiergs
PRO
0
160
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
300
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170
役立つログに取り組もう
irof
28
9.6k
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
2k
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130
CSC509 Lecture 13
javiergs
PRO
0
110
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
Fireside Chat
paigeccino
34
3k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
10 Git Anti Patterns You Should be Aware of
lemiorhan
655
59k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Teambox: Starting and Learning
jrom
133
8.8k
Automating Front-end Workflow
addyosmani
1366
200k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Transcript
Immutable.jsとReact @Wantedly 入門編 Kento Moriwaki / 森脇健斗
シゴトでココロオドル • 森脇健斗 • Wantedlyの新卒二年目エンジニア • フロントエンド好き – Angular書いてた •
最近、Wantedlyのフロントエンド開発環 境を刷新した – そのとき導入したImmutable.jsについて話し ます 自己紹介
シゴトでココロオドル • Facebookが開発している不変オブジェクト を扱うライブラリ Immutable.jsとは https://facebook.github.io/immutable-‐js/
シゴトでココロオドル • オブジェクトのプロパティに代入する代わりに、 新しいオブジェクトを返す 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)
シゴトでココロオドル • 便利なメソッド、効率的な変更、深いオブジェ クトも操作しやすい 基本的な挙動 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
シゴトでココロオドル • List • Set • OrderedMap – IDで検索する機会の多いリストに便利 •
OrderedSet • Record – Immutableなモデルクラス作れる (後述) 便利な型
シゴトでココロオドル • ReactとImmutable.jsは相性いい • 主なメリットは、 1. パフォーマンス向上 2. ステートの更新が簡単に書ける 3.
モデルクラス作れる Reactと組み合わせるメリット
シゴトでココロオドル • shouldComponentUpdate – Reactのパフォーマンス向上の基本 – 再レンダーが必要かどうか返す – 自分や親コンポーネントのstateやpropsが変 わった時に呼ばれる
– デフォルトは常にtrue パフォーマンス向上 shouldComponentUpdate(nextProps, nextState) { return compareSomehow(this, nextProps, nextState) }
シゴトでココロオドル • shouldComponentUpdate – 簡単に • コンポーネント毎に複雑な処理を書きたくない – 高速に •
再レンダーするより変更チェックが速くあるべき – 正確に • 間違っていると、変更が反映されないようになる パフォーマンス向上 shouldComponentUpdate(nextProps, nextState) { return this.props.foo !== nextProps.foo }
シゴトでココロオドル • 実際に変更されたかチェックする – 変更がない場合は、同じオブジェクトにしたい • 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 }) }
シゴトでココロオドル • 変更がなければ、自動的に同じオブジェクト を返す • 必要最小限だけ変更される – 変更がないオブジェクトはコピーされない – Object.assignより効率的
– 簡潔に書ける Immutable.jsを使用すれば onChange(obj) { let newMap = this.state.map.set('x', obj.x) this.setState({ map: newMap }) }
シゴトでココロオドル • Reactのpropsを明確化したい – どんなプロパティを期待しているか不明 – 型が指定できれば嬉しい • モデルにメソッド持たせたい 2.
モデルクラスが作れる TickerComponent.propTypes = { ticket: PropTypes.object.isRequired, } TickerComponent.propTypes = { ticket: PropTypes.instanceOf(Ticket).isRequired, }
シゴトでココロオドル • 型を定義できる – フィールドを定義したクラスを作れる • メソッドを定義できる – 継承して、メソッドを持たせることができる –
複雑なフィールド更新をモデルに持たせる • これも非破壊操作になる Immutable.Record
シゴトでココロオドル 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) } }
シゴトでココロオドル • Immutable.js使えば – Reactのパフォーマンスが簡単に向上できる – ステートの更新が簡潔に書ける – Reactで使いやすい独自モデルクラスが定義で きる
まとめ
シゴトでココロオドル 最後に
シゴトでココロオドル • 一緒に働いてくれる仲間を募集しています。 一緒にReact書きませんか? https://www.wantedly.com/projects/51709