ReactでDecoratorsを使う

React Beer Bash! (https://react-beer-bash.connpass.com/event/78112/) でLTしました

Transcript

1. ReactͰDecoratorsΛ࢖͏ 2018/03/07 React Beer Bash ฏ໺ণ࢜ / @shisama
2. { "about": { "name": "Masashi Hirano", "works": "Weblio, Inc.", "twitter": "@shisama_", "github": "shisama" } }
3. ͜ͷൃදʹ͍ͭͯ • JavaScriptͷ࠷ۙػೳΛઌऔΓͯ͠ReactͰ࢖ ͏ࣄྫΛ঺հ • React࢖ͬͨ͜ͱ͋Δਓ޲͚ • ίʔυΛ؆ܿʹॻ͖͍ͨਓ޲͚
4. Agenda • Decoratorsͷ঺հ • Decoratorsͷ࣮ྫ
5. Decoratorsͱ͸ • EcmaScriptυϥϑτ(stage-2)ͷػೳ • ॲཧΛ௥Ճͨ͠Γஔ͖׵͑ͨΓͰ͖Δ • @ϚʔΫΛ෇͚ͨهड़ • JavaͷΞϊςʔγϣϯ΍PythonͷσίϨʔ λʔΈ͍ͨͳهड़ • ໊લͷ༝དྷ͸GoFͷσίϨʔλʔύλʔϯ
6. ྫ͑͹ϓϩύςΟͷ௥Ճ function name(name) { return function (target) { target.prototype.name = name; } } ΫϥεʹOBNFͱ͍͏ϓϩύςΟΛ௥Ճ͢Δ
   ؔ਺Λఆٛ
7. @name(“React") class App extends React.Component { ɹrender() { return ( <div> Hello, {this.name} </div> ); } } ReactDOM.render(<App />, document.getElementById('app')); ͜ͷίϯϙʔωϯτࣗମ͸OBNFͱ͍ ͏ϓϩύςΟ͸͍࣋ͬͯͳ͍ σίϨʔλʔ
8. ϨϯμϦϯά݁Ռ Hello, React σίϨʔλʔؔ਺ʹΑͬͯOBNFͷϓ ϩύςΟ͕௥Ճ͞Εͨ
9. DecoratorsΛ࢖͏ํ๏ • Babel • babel-plugin-transform-decorators-legacy Λ࢖͏ɻ • TypeScript • tsc --experimentalDecorators
10. Decoratorsͷࣄྫ
11. react-redux https://github.com/reactjs/react-redux
12. react-redux • Reduxͱ͸stateΛ؅ཧ͢ΔϥΠϒϥϦ • react-redux͸ReactͱReduxΛͭͳ͛ΔϥΠϒ ϥϦ
13. 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ؔ਺ɻ
    Α͘ݟΔ࢖͍ํ
14. react-redux @connect(mapStateToProps, mapDispatchToProps) class MyFancyComponent extends React.Component { // ׂѪ } const mapStateToProps = (state) => { return { users: state.users }; } const mapDispatchToProps = (dispatch, ownProps) { return {// ׂѪ} } DPOOFDUΛσίϨʔλʔͱͯ͠$MBTT ʹ෇͚Δ͜ͱ͕Ͱ͖Δ
15. MobX https://mobx.js.org/best/decorators.html
16. MobX • ReduxΈ͍ͨʹstateΛ؅ཧ͢ΔϥΠϒϥϦ • ReduxΑΓ؆ܿʹॻ͚Δҹ৅
17. 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ʹ͍ͯ͠Δ
18. 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() } } σίϨʔλʔΛ࢖ͬͯ؆ܿʹॻ͚Δ
19. MobX https://mobx.js.org/best/decorators.html ެࣜʹࡌ͍ͬͯΔ
20. react-log-decorator https://github.com/shisama/react-log-decorator
21. react-log-decorator • ࡞ͬͨ • npm install —save react-log-decoratorͰೖΔ • render΍componentDidMountͳͲͷϝιο υ͕ݺ͹Εͨͱ͖ʹpropsͱstateͱҾ਺ͷ஋ Λίϯιʔϧʹදࣔ͢ΔσόοΨʔ
22. 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> ) } } ࣮ߦ࣌ʹQSPQT΍TUBUFͷ಺༰Λίϯ ιʔϧʹද͍ࣔͨ͠ϝιουʹ෇͚Δ
23. SFOEFS͕࣮ߦ͞ΕΔͨͼʹQSPQT΍ TUBUFͷ஋Λදࣔ react-log-decorator
24. pure-deep-equal https://github.com/shisama/pure-deep-equal
25. pure-deep-equal • ࡞ͬͨ • npm install —save pure-deep-equalͰೖΔ • shouldComponentUpdateͷதͰdeep compare͢Δ
26. pure-deep-equal ࡞ͬͨܦҢ͸͜͜
27. 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ͷதͰ EFFQ
    DPNQBSF
28. pure-deep-equal @PureDeepEqual class Test extends React.Component { render() { return <span>{this.props.message}</h1> } } TIPVME$PNQPOFOU6QEBUFΛ࣮૷͠ ͳͯ͘΋σίϨʔλؔ਺͕EFFQ
    DPNQBSFͯ͘͠ΕΔ
29. Ͳ͏΍ͬͯ Decorators࡞Δͷʁ
30. https://qiita.com/shisama/items/ 45f07f39a46a9e7fa85a
31. ࠷ޙʹ • DecoratorsΛ࢖͑͹ίʔυ͕؆ܿʹͳΔ • ෇͚ͨΓ֎ͨ͠Γ͕؆୯ʹߦ͑ɺΞεϖΫτ ࢦ޲తʹ࢖͑Δ • ͨͩ͠ɺ·ͩఏҊதͷػೳͳͷͰ࢓༷͕มΘ ΔՄೳੑ͸͋Δ
32. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠