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
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
You may not need XXX in Node.js
masashi
5
1.3k
OSSとコミュニティを支える
masashi
1
1.1k
英語ができなかった自分達が、グローバルチーム立ち上げに挑戦!?
masashi
1
3.2k
フロントエンド開発のためのセキュリティ入門について
masashi
1
470
フロントエンド開発のためのセキュリティ入門
masashi
49
17k
Node.jsの2022年と未来 / Node.js in 2022 and Future
masashi
1
1.1k
Corepack ~Node.jsに追加されたパッケージマネージャーマネージャー~ / #tng37
masashi
3
12k
Node.js + Web Compatibility
masashi
2
620
サイボウズが行うフロントエンドの品質保証 / Frontend Quality Assurance at Cybozu
masashi
10
2.9k
Other Decks in Programming
See All in Programming
ML.NETで始める機械学習
ymd65536
0
130
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
210
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
51
17k
GoとPHPのインターフェイスの違い
shimabox
2
190
Lottieアニメーションをカスタマイズしてみた
tahia910
0
130
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
400
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
5
390
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
190
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
690
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
580
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
Featured
See All Featured
Scaling GitHub
holman
459
140k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Agile that works and the tools we love
rasmusluckow
328
21k
The Pragmatic Product Professional
lauravandoore
32
6.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
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Λ͑ίʔυ͕؆ܿʹͳΔ • ͚ͨΓ֎ͨ͠Γ͕؆୯ʹߦ͑ɺΞεϖΫτ ࢦతʹ͑Δ • ͨͩ͠ɺ·ͩఏҊதͷػೳͳͷͰ༷͕มΘ ΔՄೳੑ͋Δ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠