ReactでDecoratorsを使う

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠