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
75k
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
8
4.8k
デザインシステムを導入してUIに秩序を取り戻す - React (Native)編 #rejectron2018
kentomoriwaki
16
3.8k
ReactでWebとNativeの共通UIライブラリを作ろう
kentomoriwaki
0
1.2k
BFFを導入しなかった理由
kentomoriwaki
4
13k
TypeScript in Wantedly
kentomoriwaki
2
750
5分でわかる React "Suspense"
kentomoriwaki
3
1.5k
導入して1年経ったReact周辺の 技術スタックを反省します | React反省会@Wantedly
kentomoriwaki
10
8.7k
React速習会@Wantedly
kentomoriwaki
1
440
Other Decks in Programming
See All in Programming
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
860
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5.5k
CSC509 Lecture 08
javiergs
PRO
0
260
One Enishi After Another
snoozer05
PRO
0
160
モテるデスク環境
mozumasu
3
1.3k
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
700
Cursorハンズオン実践!
eltociear
2
1.2k
Go言語はstack overflowの夢を見るか?
logica0419
0
620
三者三様 宣言的UI
kkagurazaka
0
250
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
1.6k
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
930
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
4 Signs Your Business is Dying
shpigford
185
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Why Our Code Smells
bkeepers
PRO
340
57k
Gamification - CAS2011
davidbonilla
81
5.5k
The Language of Interfaces
destraynor
162
25k
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