Tweet
Tweet

Slide 1

Slide 1 text

ReactͰDecoratorsΛ࢖͏ 2018/03/07 React Beer Bash ฏ໺ণ࢜ / @shisama

Slide 2

Slide 2 text

{ "about": { "name": "Masashi Hirano", "works": "Weblio, Inc.", "twitter": "@shisama_", "github": "shisama" } }

Slide 3

Slide 3 text

͜ͷൃදʹ͍ͭͯ • JavaScriptͷ࠷ۙػೳΛઌऔΓͯ͠ReactͰ࢖ ͏ࣄྫΛ঺հ • React࢖ͬͨ͜ͱ͋Δਓ޲͚ • ίʔυΛ؆ܿʹॻ͖͍ͨਓ޲͚

Slide 4

Slide 4 text

Agenda • Decoratorsͷ঺հ • Decoratorsͷ࣮ྫ

Slide 5

Slide 5 text

Decoratorsͱ͸ • EcmaScriptυϥϑτ(stage-2)ͷػೳ • ॲཧΛ௥Ճͨ͠Γஔ͖׵͑ͨΓͰ͖Δ • @ϚʔΫΛ෇͚ͨهड़ • JavaͷΞϊςʔγϣϯ΍PythonͷσίϨʔ λʔΈ͍ͨͳهड़ • ໊લͷ༝དྷ͸GoFͷσίϨʔλʔύλʔϯ

Slide 6

Slide 6 text

ྫ͑͹ϓϩύςΟͷ௥Ճ function name(name) { return function (target) { target.prototype.name = name; } } ΫϥεʹOBNFͱ͍͏ϓϩύςΟΛ௥Ճ͢Δ ؔ਺Λఆٛ

Slide 7

Slide 7 text

@name(“React") class App extends React.Component { ɹrender() { return (
Hello, {this.name}
); } } ReactDOM.render(, document.getElementById('app')); ͜ͷίϯϙʔωϯτࣗମ͸OBNFͱ͍ ͏ϓϩύςΟ͸͍࣋ͬͯͳ͍ σίϨʔλʔ

Slide 8

Slide 8 text

ϨϯμϦϯά݁Ռ Hello, React σίϨʔλʔؔ਺ʹΑͬͯOBNFͷϓ ϩύςΟ͕௥Ճ͞Εͨ

Slide 9

Slide 9 text

DecoratorsΛ࢖͏ํ๏ • Babel • babel-plugin-transform-decorators-legacy Λ࢖͏ɻ • TypeScript • tsc --experimentalDecorators

Slide 10

Slide 10 text

Decoratorsͷࣄྫ

Slide 11

Slide 11 text

react-redux https://github.com/reactjs/react-redux

Slide 12

Slide 12 text

react-redux • Reduxͱ͸stateΛ؅ཧ͢ΔϥΠϒϥϦ • react-redux͸ReactͱReduxΛͭͳ͛ΔϥΠϒ ϥϦ

Slide 13

Slide 13 text

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ؔ਺ɻ Α͘ݟΔ࢖͍ํ

Slide 14

Slide 14 text

react-redux @connect(mapStateToProps, mapDispatchToProps) class MyFancyComponent extends React.Component { // ׂѪ } const mapStateToProps = (state) => { return { users: state.users }; } const mapDispatchToProps = (dispatch, ownProps) { return {// ׂѪ} } DPOOFDUΛσίϨʔλʔͱͯ͠$MBTT ʹ෇͚Δ͜ͱ͕Ͱ͖Δ

Slide 15

Slide 15 text

MobX https://mobx.js.org/best/decorators.html

Slide 16

Slide 16 text

MobX • ReduxΈ͍ͨʹstateΛ؅ཧ͢ΔϥΠϒϥϦ • ReduxΑΓ؆ܿʹॻ͚Δҹ৅

Slide 17

Slide 17 text

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ʹ͍ͯ͠Δ

Slide 18

Slide 18 text

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() } } σίϨʔλʔΛ࢖ͬͯ؆ܿʹॻ͚Δ

Slide 19

Slide 19 text

MobX https://mobx.js.org/best/decorators.html ެࣜʹࡌ͍ͬͯΔ

Slide 20

Slide 20 text

react-log-decorator https://github.com/shisama/react-log-decorator

Slide 21

Slide 21 text

react-log-decorator • ࡞ͬͨ • npm install —save react-log-decoratorͰೖΔ • render΍componentDidMountͳͲͷϝιο υ͕ݺ͹Εͨͱ͖ʹpropsͱstateͱҾ਺ͷ஋ Λίϯιʔϧʹදࣔ͢ΔσόοΨʔ

Slide 22

Slide 22 text

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 (

{this.props.message}

) } } ࣮ߦ࣌ʹQSPQT΍TUBUFͷ಺༰Λίϯ ιʔϧʹද͍ࣔͨ͠ϝιουʹ෇͚Δ

Slide 23

Slide 23 text

SFOEFS͕࣮ߦ͞ΕΔͨͼʹQSPQT΍ TUBUFͷ஋Λදࣔ react-log-decorator

Slide 24

Slide 24 text

pure-deep-equal https://github.com/shisama/pure-deep-equal

Slide 25

Slide 25 text

pure-deep-equal • ࡞ͬͨ • npm install —save pure-deep-equalͰೖΔ • shouldComponentUpdateͷதͰdeep compare͢Δ

Slide 26

Slide 26 text

pure-deep-equal ࡞ͬͨܦҢ͸͜͜

Slide 27

Slide 27 text

pure-deep-equal class Test extends React.Component { shouldComponentUpdate(nextProps, nextState) { return !deepEqual(this.props, nextProps) || !deepEqual(this.state, nextState); } render() { return {this.props.message} } } TIPVME$PNQPOFOU6QEBUFͷதͰ EFFQDPNQBSF

Slide 28

Slide 28 text

pure-deep-equal @PureDeepEqual class Test extends React.Component { render() { return {this.props.message} } } TIPVME$PNQPOFOU6QEBUFΛ࣮૷͠ ͳͯ͘΋σίϨʔλؔ਺͕EFFQ DPNQBSFͯ͘͠ΕΔ

Slide 29

Slide 29 text

Ͳ͏΍ͬͯ Decorators࡞Δͷʁ

Slide 30

Slide 30 text

https://qiita.com/shisama/items/ 45f07f39a46a9e7fa85a

Slide 31

Slide 31 text

࠷ޙʹ • DecoratorsΛ࢖͑͹ίʔυ͕؆ܿʹͳΔ • ෇͚ͨΓ֎ͨ͠Γ͕؆୯ʹߦ͑ɺΞεϖΫτ ࢦ޲తʹ࢖͑Δ • ͨͩ͠ɺ·ͩఏҊதͷػೳͳͷͰ࢓༷͕มΘ ΔՄೳੑ͸͋Δ

Slide 32

Slide 32 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠