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
ReactでDecoratorsを使う
Search
Masashi Hirano
March 07, 2018
Programming
0
1.1k
ReactでDecoratorsを使う
React Beer Bash! (
https://react-beer-bash.connpass.com/event/78112/
) でLTしました
Masashi Hirano
March 07, 2018
Tweet
Share
More Decks by Masashi Hirano
See All by Masashi Hirano
Protocol Buffers and Connect for Frontend Development
masashi
0
87
You may not need XXX in Node.js
masashi
5
1.4k
OSSとコミュニティを支える
masashi
1
1.3k
英語ができなかった自分達が、グローバルチーム立ち上げに挑戦!?
masashi
1
3.3k
フロントエンド開発のためのセキュリティ入門について
masashi
1
510
フロントエンド開発のためのセキュリティ入門
masashi
49
18k
Node.jsの2022年と未来 / Node.js in 2022 and Future
masashi
1
1.1k
Corepack ~Node.jsに追加されたパッケージマネージャーマネージャー~ / #tng37
masashi
3
13k
Node.js + Web Compatibility
masashi
2
660
Other Decks in Programming
See All in Programming
Discover Metal 4
rei315
2
130
XP, Testing and ninja testing
m_seki
3
240
Hack Claude Code with Claude Code
choplin
4
2k
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
890
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
700
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
110
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
470
Featured
See All Featured
Done Done
chrislema
184
16k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
For a Future-Friendly Web
brad_frost
179
9.8k
Music & Morning Musume
bryan
46
6.6k
Adopting Sorbet at Scale
ufuk
77
9.5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
It's Worth the Effort
3n
185
28k
The Cult of Friendly URLs
andyhume
79
6.5k
Transcript
ReactͰDecoratorsΛ͏ 2018/03/07 React Beer Bash ฏণ࢜ / @shisama
{ "about": { "name": "Masashi Hirano", "works": "Weblio, Inc.", "twitter":
"@shisama_", "github": "shisama" } }
͜ͷൃදʹ͍ͭͯ • JavaScriptͷ࠷ۙػೳΛઌऔΓͯ͠ReactͰ ͏ࣄྫΛհ • Reactͬͨ͜ͱ͋Δਓ͚ • ίʔυΛ؆ܿʹॻ͖͍ͨਓ͚
Agenda • Decoratorsͷհ • Decoratorsͷ࣮ྫ
Decoratorsͱ • EcmaScriptυϥϑτ(stage-2)ͷػೳ • ॲཧΛՃͨ͠Γஔ͖͑ͨΓͰ͖Δ • @ϚʔΫΛ͚ͨهड़ • JavaͷΞϊςʔγϣϯPythonͷσίϨʔ λʔΈ͍ͨͳهड़
• ໊લͷ༝དྷGoFͷσίϨʔλʔύλʔϯ
ྫ͑ϓϩύςΟͷՃ function name(name) { return function (target) { target.prototype.name =
name; } } ΫϥεʹOBNFͱ͍͏ϓϩύςΟΛՃ͢Δ ؔΛఆٛ
@name(“React") class App extends React.Component { ɹrender() { return (
<div> Hello, {this.name} </div> ); } } ReactDOM.render(<App />, document.getElementById('app')); ͜ͷίϯϙʔωϯτࣗମOBNFͱ͍ ͏ϓϩύςΟ͍࣋ͬͯͳ͍ σίϨʔλʔ
ϨϯμϦϯά݁Ռ Hello, React σίϨʔλʔؔʹΑͬͯOBNFͷϓ ϩύςΟ͕Ճ͞Εͨ
DecoratorsΛ͏ํ๏ • Babel • babel-plugin-transform-decorators-legacy Λ͏ɻ • TypeScript • tsc
--experimentalDecorators
Decoratorsͷࣄྫ
react-redux https://github.com/reactjs/react-redux
react-redux • ReduxͱstateΛཧ͢ΔϥΠϒϥϦ • react-reduxReactͱReduxΛͭͳ͛ΔϥΠϒ ϥϦ
react-redux class MyFancyComponent extends React.Component { // ׂѪ } const
mapStateToProps = (state) => { return { users: state.users }; } const mapDispatchToProps = (dispatch, ownProps) { return {// ׂѪ} } export default connect(mapStateToProps, mapDispatchToProps)(MyFancyComponent) SFBDUSFEVYͷDPOOFDUؔɻ Α͘ݟΔ͍ํ
react-redux @connect(mapStateToProps, mapDispatchToProps) class MyFancyComponent extends React.Component { // ׂѪ
} const mapStateToProps = (state) => { return { users: state.users }; } const mapDispatchToProps = (dispatch, ownProps) { return {// ׂѪ} } DPOOFDUΛσίϨʔλʔͱͯ͠$MBTT ʹ͚Δ͜ͱ͕Ͱ͖Δ
MobX https://mobx.js.org/best/decorators.html
MobX • ReduxΈ͍ͨʹstateΛཧ͢ΔϥΠϒϥϦ • ReduxΑΓ؆ܿʹॻ͚Δҹ
MobX class Timer { constructor() { extendObservable(this, { start: Date.now(),
current: Date.now(), get elapsedTime() { return (this.current - this.start) }, tick: action(function() { this.current = Date.now() }) }) } } FYUFOE0CTFSWBCMFؔΛͬͯ PCTFSWBCMFʹ͍ͯ͠Δ
MobX class Timer { @observable start = Date.now(); @observable current
= Date.now(); @computed get elapsedTime() { return (this.current - this.start) } @action tick() { this.current = Date.now() } } σίϨʔλʔΛͬͯ؆ܿʹॻ͚Δ
MobX https://mobx.js.org/best/decorators.html ެࣜʹࡌ͍ͬͯΔ
react-log-decorator https://github.com/shisama/react-log-decorator
react-log-decorator • ࡞ͬͨ • npm install —save react-log-decoratorͰೖΔ • rendercomponentDidMountͳͲͷϝιο
υ͕ݺΕͨͱ͖ʹpropsͱstateͱҾͷ Λίϯιʔϧʹදࣔ͢ΔσόοΨʔ
react-log-decorator import logger from 'react-log-decorator'; const log = logger(process.env.NODE_ENV ===
'development'); export default class MyComponent extends Component { @log render() { return ( <div> <input type="text" onChange = {this.props.onChange} /> <p>{this.props.message}</p> </div> ) } } ࣮ߦ࣌ʹQSPQTTUBUFͷ༰Λίϯ ιʔϧʹද͍ࣔͨ͠ϝιουʹ͚Δ
SFOEFS͕࣮ߦ͞ΕΔͨͼʹQSPQT TUBUFͷΛදࣔ react-log-decorator
pure-deep-equal https://github.com/shisama/pure-deep-equal
pure-deep-equal • ࡞ͬͨ • npm install —save pure-deep-equalͰೖΔ • shouldComponentUpdateͷதͰdeep
compare͢Δ
pure-deep-equal ࡞ͬͨܦҢ͜͜
pure-deep-equal class Test extends React.Component { shouldComponentUpdate(nextProps, nextState) { return
!deepEqual(this.props, nextProps) || !deepEqual(this.state, nextState); } render() { return <span>{this.props.message}</h1> } } TIPVME$PNQPOFOU6QEBUFͷதͰ EFFQDPNQBSF
pure-deep-equal @PureDeepEqual class Test extends React.Component { render() { return
<span>{this.props.message}</h1> } } TIPVME$PNQPOFOU6QEBUFΛ࣮͠ ͳͯ͘σίϨʔλ͕ؔEFFQ DPNQBSFͯ͘͠ΕΔ
Ͳ͏ͬͯ Decorators࡞Δͷʁ
https://qiita.com/shisama/items/ 45f07f39a46a9e7fa85a
࠷ޙʹ • DecoratorsΛ͑ίʔυ͕؆ܿʹͳΔ • ͚ͨΓ֎ͨ͠Γ͕؆୯ʹߦ͑ɺΞεϖΫτ ࢦతʹ͑Δ • ͨͩ͠ɺ·ͩఏҊதͷػೳͳͷͰ༷͕มΘ ΔՄೳੑ͋Δ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠