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.6k
デザインシステムを導入して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
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
140
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.3k
Amazon Neptuneで始めてみるグラフDB-OpenSearchによるグラフの全文検索-
satoshi256kbyte
4
330
プロジェクト新規参入者のリードタイム短縮の観点から見る、品質の高いコードとアーキテクチャを保つメリット
d_endo
1
1k
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.6k
Nuxtベースの「WXT」でChrome拡張を作成する | Vue Fes 2024 ランチセッション
moshi1121
1
520
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
3.1k
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
1
290
RailsのPull requestsのレビューの時に私が考えていること
yahonda
5
1.7k
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.1k
CSC305 Lecture 13
javiergs
PRO
0
130
WEBエンジニア向けAI活用入門
sutetotanuki
0
300
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Navigating Team Friction
lara
183
14k
RailsConf 2023
tenderlove
29
880
Building Your Own Lightsaber
phodgson
102
6.1k
Being A Developer After 40
akosma
86
590k
Designing Experiences People Love
moore
138
23k
Speed Design
sergeychernyshev
24
570
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Why Our Code Smells
bkeepers
PRO
334
57k
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