Reactの最新動向とベストプラクティス

Slide 1

Slide 1 text

3FBDUͷ࠷৽ಈ޲ͱϕετϓϥΫςΟε )5.-$POGFSFODF !LPCB

Slide 2

Slide 2 text

!LPCB

Slide 3

Slide 3 text

3FBDUࣄྫ

Slide 4

Slide 4 text

'BDFCPPL http://facebook.github.io/react/blog/2015/03/10/react-v0.13.html

Slide 5

Slide 5 text

*OTUBHSBN

Slide 6

Slide 6 text

/FUqJY

Slide 7

Slide 7 text

5XJUUFS NPCJMF

Slide 8

Slide 8 text

"CFNBUW

Slide 9

Slide 9 text

)ZQFSUFSN w IUUQTIZQFSUFSNPSH w IUUQTHJUIVCDPN[FJUIZQFSUFSN

Slide 10

Slide 10 text

+FOLJOT%FTJHO-BOHVBHF w IUUQTHJUIVCDPNKFOLJOTDJKFOLJOTEFTJHOMBOHVBHF

Slide 11

Slide 11 text

3FBDU͸zࠓz࢖ΘΕ͍ͯΔϥΠϒϥϦʔ

Slide 12

Slide 12 text

3FBDUͷ͜Ε·Ͱ

Slide 13

Slide 13 text

2013 2014 2015 2016 Flux v0.13 ReactNative for iOS GraphQL Redux Relay React Native for Android v0.14 React Native for Windows v15.0.0 … React.Component Stateless Functional Component No more span and data-reactid React. PureComponent (v15.3.0ʙ)

Slide 14

Slide 14 text

3FBDUͷಛ௃

Slide 15

Slide 15 text

3FBDUͷಛ௃

Slide 16

Slide 16 text

class App extends React.Component { constructor(…args) { super(…args); this.state = { text: ‘’, }; } render() { return ( this.setState({text})} /> ); } } const TextBox = (text, onChange) => (

onChange(e.target.value} />

{text}

); ReactDOM.render( , document.getElementById(‘app’) );

Slide 17

Slide 17 text

w 7JFX$PNQPOFOU 4UBUF w $PNQPOFOU͸4UBUF͔Β7JFX 3FBDU&MFNFOU Λ࡞Δ w $PNQPOFOU͸7JFXΛ࡞Δؔ਺ w 3FBDU͕ࠩ෼Λܭࢉͯ͠%0.ʹ൓ө͢Δ w *'͸1SPQT w એݴతʹ7JFXΛߏங͢Δ w એݴతʁ 3FBDUͷಛ௃

Slide 18

Slide 18 text

3FBDUͷಛ௃ State View Function Component 4UBUFΛߋ৽ 4UBUFΛ $PNQPOFOU ʹ౉͢ ࠩ෼Λ%0. ʹ൓ө ΠϕϯτʹΑΔ ߋ৽ॲཧ

Slide 19

Slide 19 text

3FBDUͷಛ௃ State View Function Component 4UBUFΛߋ৽ 4UBUFΛ $PNQPOFOU ʹ౉͢ ࠩ෼Λ%0. ʹ൓ө ΠϕϯτʹΑΔ ߋ৽ॲཧ Կ͕ى͖͍ͯΔͷ͔Θ͔Δ

Slide 20

Slide 20 text

w ʮมԽʯͰ͸ͳ͘ʮঢ়ଶʯΛఆٛ͢Δ એݴతʁ // ໋ྩత // elͷมԽΛॻ͍͍ͯΔ button.on(‘click’, () => el.append(child)); // એݴత // stateʹର͢Δ͋Δ΂͖දࣔΛॻ͍͍ͯΔ render = state => { el.innerHTML = state.map(child => `

${child}

`).join(‘’); }; button.on(‘click’, () => { state.push(child); render(state); }

Slide 21

Slide 21 text

w ॳظදࣔ΋ߋ৽΋ৗʹ$PNQPOFOU 4UBUF Ͱ7JFXΛ࡞Δ એݴతʁ // ೖྗʹରͯ͠ৗʹಉ͡ग़ྗΛฦ͢ const CommentBox = ({comment, onChange}) => (

{comment}

onChange(e.target.value)} />

); const render = comment => ( ReactDOM.render( , document.getElementById(‘app’) ) );

Slide 22

Slide 22 text

$PNQPOFOUΛ࡞Δ

Slide 23

Slide 23 text

w 4UBUFMFTT'VODUJPOBM$PNQPOFOUT w 3FBDU$PNQPOFOU w 3FBDU1VSF$PNQPOFOU w 3FBDUDSFBUF$MBTT $PNQPOFOUͷఆٛํ๏

Slide 24

Slide 24 text

w 'JSTU$IPJDF w Πϯελϯε΋࣋ͨͳ͍ͨͩͷؔ਺ w 3FBDU&MFNFOU$PNQPOFOU 1SPQT w /PTUBUF /PMJGFDZDMFNFUIPET /PSFGT w কདྷతͳ࠷దԽ΋ 4UBUFMFTT'VODUJPO$PNQPOFOUT 4'$ // PropsΛड͚औΓɺReactElementΛฦؔ͢਺ const Item = ({item}) => (

{item.name}×{item.count}

); //

Slide 25

Slide 25 text

w 4UBUF΍ϥΠϑαΠΫϧϝιου͕ඞཁʹͳͬͨΒ 3FBDU$PNQPOFOU class App extends React.Component { constructor(…args) {  super(…args); this.state = { user: null, }; } componentDidMount() { fetch(‘/api/user’) .then(res => res.json()) .then(user => this.setState({user})) ; } render() { if (this.state.user == null) return ; return (

); }

Slide 26

Slide 26 text

w 4UBUFʹ͸දࣔʹඞཁͳσʔλ͚ͩ 3FBDU$PNQPOFOU class App extends React.Component { constructor(…args) {  super(…args); // this.state = { // timerId: null, // }; } componentDidMount() { this.timerId = setInterval(() => {}, 1000); // this.setState({ // timerId: setInterval(() => {}, 1000) // }); } componentWillMount() { clearInterval(this.timerId); // clearInterval(this.state.timerId); } render() { } }

Slide 27

Slide 27 text

w 4IPVME$PNQPOFOU6QEBUFʹ1SPQTͱ4UBUFʹର͢Δ 4IBMMPX&RVBM͕ద༻͞ΕΔ w কདྷతʹ͸$IJMESFOͷ4'$ʹରͯ͠ͷ࠷దԽ͕ೖΔ͔΋ 3FBDU1VSF$PNQPOFOU Wʙ class Counter extends React.PureComponent { constructor(…args) { super(…args); this.state = {count: 0}; } render() { return (

{this.props.label}:{this.state.count}

this.setState({count: this.state.count + 1}) />

); } }

Slide 28

Slide 28 text

1VSF$PNQPOFOUͷམͱ݀͠ class Item extends React.PureComponent { render() { return (

{this.props.name}

click {this.props.children}

); } } // props.onClick !== nextProps.onClick console.log(‘click’)} /> // props.children !== nextProps.children

foo

Slide 29

Slide 29 text

ਪଌ͢ΔͳܭଌͤΑ w SFBDUBEEPOTQFSG import Perf from ‘react-addons-perf’; Perf.start(); ReactDOM.render(, el); setTimeout(() => { ReactDOM.render(, el); Perf.stop(); Perf.printWasted(); }, 1000);

Slide 30

Slide 30 text

w ͔ͭͯͷ࡞੒ํ๏ɻ؇΍͔ʹඇਪ঑΁ w ࠷ऴతʹ͸ผύοέʔδʹʁ w 'BDFCPPL಺෦΋3FBDU$PNQPOFOU΁ͷҠߦத w 3FBDUDSFBUF$MBTTͷศརػೳͷϚΠάϨʔγϣϯύε w NJYJO⾣)JHI0SEFS$PNQPOFOUT w BVUPCJOEJOH⾣1VCMJD$MBTT'JFMET 3FBDUDSFBUF$MBTT class Button extends React.Component { onClick = () => this.setState({count: this.state.count + 1}); } Stage2

Slide 31

Slide 31 text

$PNQPOFOUΛ֦ு͢Δ

Slide 32

Slide 32 text

w $PNQPTJUJPOPWFS*OIFSJUBODF w )JHIFS0SEFS'VODUJPO )JHIFS0SEFS$PNQPOFOUT // Կ͔͢Δؔ਺Λड͚औͬͯɺ݁ՌΛϩάग़ͯ͠ฦ͢ const logger = operation => (…args) => { const result = operation(…args); console.log(result); return result; }; const add = logger((a, b) => a + b); add(10, 20); // 30

Slide 33

Slide 33 text

w )JHIFS0SEFS$PNQPOFOUT )JHIFS0SEFS$PNQPOFOUT // ComponentΛड͚औͬͯɺPureComponentͰϥοϓͯ͠ฦ͢ const pure = Component => class Pure extends React.PureComponent {  render() { return ; } } const Item = ({name}) =>

{name}

; const PureItem = pure(Item); //

Slide 34

Slide 34 text

w BDEMJUFSFDPNQPTF w )JHIFS0SEFS$PNQPOFOUTͷVUJMJUZू w IUUQTHJUIVCDPNBDEMJUFSFDPNQPTF )JHIFS0SEFS$PNQPOFOUTΛ࢖͏ // isLoadedʹΑͬͯComponentΛग़͠෼͚Δ const enhance = branch( props => props.isLoaded, Component => Component, () => Loading ); const LoadUser = enhance(User); //

Slide 35

Slide 35 text

w SFBDUKTSFBDUSPVUFS XJUI3PVUFS w SFBDUKTSFBDUSFEVY DPOOFDU )JHIFS0SEFS$PNQPOFOUTࣄྫ const MyPage = ({router}) =>

hoge

; const WithRouterMyPage = withRouter(MyPage); const MyPage = ({user, updateName}) =>

{user.name}

; const ConnectedMyPage = connect( mapStateToProps, mapDispatchToProps )(MyPage);

Slide 36

Slide 36 text

w QSPQTDIJMESFOʹؔ਺Λ౉͢͜ͱͰ֦ு͢Δ w ແବͳ$PNQPOFOUʹΑΔϥοϓ͕ൃੜ͠ͳ͍ w 1SPQTͱͷিಥΛߟ͑ͳ͍͍ͯ͘ w ࠷దԽ͕೉͍͠ w SFBDUNPUJPO w IUUQTNFEJVNDPNNFSSJDLDISJTUFOTFOGVODUJPOBTDIJME DPNQPOFOUTGBBDF 'VODUJPOBT$IJME$PNQPOFOUT FuncAsChild = props =>

{props.children(‘foo’)}

; // {foo => {foo}}

Slide 37

Slide 37 text

4UBUFΛ؅ཧ͢Δ

Slide 38

Slide 38 text

w ΞϓϦέʔγϣϯͷঢ়ଶ͸ͳΔ΂͘ҰՕॴʹɻ w ਌ͷ$PNQPOFOU w ਌͸ࢠʹσʔλͱૢ࡞ʢؔ਺ʣΛ౉͢ɻࢠ͸ͦΕΒΛ࢖͏ͩ ͚ w ׬શʹ$PNQPOFOU಺ʹด͡Δঢ়ଶ͸$PNQPOFOUͷ4UBUFʹ͢ Δ͜ͱ΋ߟ͑Δ w ΞϓϦέʔγϣϯ͕େ͖͘ͳΔͱɺ਌ͷ$PNQPOFOUͰ؅ཧ͠ ͖Εͳ͘ͳΔ 4UBUF؅ཧ

Slide 39

Slide 39 text

%BUBqPX EBUBΛ1SPQTͰ ౉͢ IBOEMFSͰ ΠϕϯτΛ఻೻

Slide 40

Slide 40 text

%BUBqPX EBUBΛ1SPQTͰ ౉͢ IBOEMFSͰ ΠϕϯτΛ఻೻ ΞϓϦέʔγϣϯͷن໛͕ େ͖͘ͳ͖ͬͯͨΒʁ

Slide 41

Slide 41 text

w 4UBUFΛ$PNQPOFOU͔Β੾Γ཭͢ w ΞϓϦέʔγϣϯͷঢ়ଶʢ4UBUFʣΛ4JOHMF4UPSFͰ؅ཧ w 4UBUFͷߋ৽Λ"DUJPOͱͯ͠දݱ͢Δ w 4UBUF͸"DUJPOͰߋ৽͞ΕΔ w 4UBUFͷߋ৽͸3FEVDFSͱݺ͹ΕΔ1VSF'VODUJPOͰ w $POUBJOFS$PNQPOFOUͱ1SFTFOUBUJPOBM$PNQPOFOU 3FEVY

Slide 42

Slide 42 text

Slide 43

Slide 43 text

%BUBqPX State

Slide 44

Slide 44 text

w ಉ͡$PNQPOFOUͰ΋໾ׂ͸શ͘ҟͳΔ $POUBJOFS$PNQPOFOUͱ1SFTFOUBUJPOBM $PNQPOFOU Presentational Component w 7JFXͷߏஙΛ୲͏ w 4'$ w %PNBJO-PHJDΛ஌Βͳ͍ w 4UBUF؅ཧͷ͜ͱ͸஌Βͳ͍ Container Component w ߋ৽ॲཧɺঢ়ଶ؅ཧΛ୲͏ w 3FBDU 1VSF $PNQPOFOU w %0.Λ஌Βͳ͍ w DPOOFDUͰ࡞੒ 3FEVY

Slide 45

Slide 45 text

Middleware 3FEVY State Action Creator &WFOU Reducer "DUJPO 4UBUF Selector 4UBUF 1SPQT IO

Slide 46

Slide 46 text

3FEVY w BDUJPO"DUJPO$SFBUPS w ΞϓϦέʔγϣϯͰൃੜ͢ΔΠϕϯτ w OFX4UBUF3FEVDFS TUBUF BDUJPO w ΞϓϦέʔγϣϯͷঢ়ଶߋ৽ w QSPQT4FMFDUPS TUBUF w 7JFXʹඞཁͳσʔλ

Slide 47

Slide 47 text

3FEVY w ୯Ұͷ4UBUFʹશ͕ͯ٧·͍ͬͯΔ w ⾣4UBUFΛݟΕ͹ΞϓϦέʔγϣϯͷঢ়ଶ͕Θ͔Δ w ⾣7JFX$PNQPOFOU 4UBUF w σʔλͱϩδοΫͷ෼཭ w ଟ͘ͷ෦෼͕෭࡞༻ͷͳ͍ؔ਺ʹͳΔͷͰςετ͕؆୯ w ෭࡞༻͸ʁʁ

Slide 48

Slide 48 text

3FEVY.JEEMFXBSF w ෭࡞༻΍ඇಉظॲཧ͸ɺ.JEEMFXBSFΛ࢖ͬͯॲཧ͢Δ w .JEEMFXBSFͰ͸ɺ3FEVDFS͕"DUJPOΛॲཧ͢ΔલޙʹׂΓ ࠐΈɺ"DUJPOͷՃ޻΍Ωϟϯηϧɺผͷ"DUJPOͷൃߦͳͲ ͕Մೳ w SFEVYUIVOL SFEVYQSPNJTF SFEVYTBHB SFEVY PCTFSWBCMF SFEVYMPPQ SFEVYF⒎FDUTʜ w SFEVYQFSTJTU SFEVYMPHHFS SFEVYBOBMZUJDT

Slide 49

Slide 49 text

$PNQPOFOUΛςετ͢Δ

Slide 50

Slide 50 text

w 5FTU6UJMTSFOEFS*OUP%PDVNFOU w %0.͕ඞཁͳςετ w 5FTU6UJMT4IBMMPX3FOEFS w $PNQPOFOUͷ୯ମςετ w SFBDUUFTUSFOEFS w $PNQPOFOU5SFFʹର͢Δςετ 5FTU

Slide 51

Slide 51 text

w $PNQPOFOU୯ମʹର͢Δςετ͕Մೳ w ࢠ$PNQPOFOU͸SFOEFS͞Εͳ͍ w /PEF؀ڥͰςετ͕ՄೳʢKTEPNͳͲ͸ෆཁʣ w 3FGT͸ະαϙʔτɺ-JGFDZDMF.FUIPET͸Ұ෦ͷΈαϙʔτ w l4IBMMPXz3FOEFSJOH 4IBMMPX3FOEFS const shallowRenderer = TestUtils.createRenderer(); const elementTree = shallowRenderer.render(); assert(elementTree.props.children[0].type === ‘div’);

Slide 52

Slide 52 text

w 3FBDU$PNQPOFOUTʹର͢Δςετͷ6UJMJUZ w TIBMMPX NPVOU SFOEFS w 5FTU6UJMTͷ"1*Λ࢖͏ΑΓɺ؆୯ʹɺΘ͔Γ΍͘͢ॻ͘͜ͱ͕ Մೳ BJSCOCFO[ZNF import {shallow} from ‘enzyme’; const wrapper = shallow(); assert(wrapper.find(Link).prop(‘to’) === ‘/foo’); wrapper.find(‘button’).simulate(‘click’);

Slide 53

Slide 53 text

w 3FBDU&MFNFOUͷπϦʔΛ+40/ʹͯ͠ฦ͢ w /PUl4IBMMPXz w -JGFDZDMF.FUIPET΋αϙʔτ͞Ε͍ͯΔ w "1*͸·ͩ·ͩ੔උத w +FTUͷTOBQTIPUUFTUJOHͰ࢖ΘΕ͍ͯΔ SFBDUUFTUSFOEFSFS Wʙ import renderer from ‘react-test-renderer’; const tree = renderer.create().toJSON(); assert(tree.props.children[0].type === ‘div’);

Slide 54

Slide 54 text

։ൃΛαϙʔτ͢Δπʔϧ

Slide 55

Slide 55 text

w FTMJOUQMVHJOSFBDU w 3FBDUʹؔ͢Δ&4-JOUͷϧʔϧू w 3FBDUͷϕετϓϥΫςΟεΛ஌Δ͜ͱ͕Ͱ͖Δ w IUUQTHJUIVCDPNZBOOJDLDSFTMJOUQMVHJOSFBDU w FTMJOUQMVHJOKTYBZ w +49ʹର͢ΔBDDFTTJCJMJUZͷνΣοΫ͕Ͱ͖Δ w IUUQTHJUIVCDPNFWDPIFOFTMJOUQMVHJOKTYBZ &4-JOU3FBDU

Slide 56

Slide 56 text

&4-JOU3FBDU

Slide 57

Slide 57 text

&4-JOU3FBDU w OPTUSJOHSFGTʜจࣈྻʹΑΔ3FGTࢦఆͷېࢭ w QSFGFSTUBUFMFTTGVODUJPOʜ4'$ʹΑΔఆٛΛ༏ઌ͢Δ w OPEJSFDUNVUBUJPOTUBUFʜUIJTTUBUFΛ௚઀ߋ৽Λېࢭ w TPSUDPNQʜ$PNQPOFOU಺ͷϝιουఆٛॱΛνΣοΫ w KTYOPCJOEʜ1SPQTͰͷCJOE ΍"SSPX'VODUJPOͷېࢭ w KTYLFZʜLFZͷ1SPQT͕ඞཁͳ৔໘Ͱࢦఆ͞Ε͍ͯΔ͔ w 4FFNPSFSVMFT w IUUQTHJUIVCDPNZBOOJDLDSFTMJOUQMVHJOSFBDU

Slide 58

Slide 58 text

3FBDU4UPSZ#PPL w IUUQTHFUTUPSZCPPLJP w $PNQPOFOUΛΞϓϦέʔγϣϯ͔Β੾Γ཭ͨ͠ܗͰ։ൃͰ͖ Δ w 4UPSZͱͯ͠$PNQPOFOUͷදࣔύλʔϯΛఆٛͰ͖Δ w 4UPSZCPPLTJP w IUUQTTUPSZCPPLTJP

Slide 59

Slide 59 text

3FBDU%FWFMPQFS5PPMT w 3FBDU&MFNFOUͷ5SFFΛJOTQFDUͰ͖Δ w 4UBUFͷॻ͖׵͑΋Մೳ

Slide 60

Slide 60 text

3FBDU%FWFMPQFS5PPMT w 3FBDU&MFNFOUͷ5SFFΛJOTQFDUͰ͖Δ w 4UBUFͷॻ͖׵͑΋Մೳ

Slide 61

Slide 61 text

3FEVY%FW5PPMT w IUUQTHJUIVCDPNHBFBSPOSFEVYEFWUPPMT w λΠϜτϥϕϧσόοΪϯά w "DUJPOͷॻ͖׵͑ w IUUQTUXJUUFSDPNEBO@BCSBNPWTUBUVT

Slide 62

Slide 62 text

3FEVY%FW5PPMT&YUFOTJPO w IUUQTHJUIVCDPN[BMNPYJTVTSFEVYEFWUPPMTFYUFOTJPO w ཤྺͷ&YQPSU*NQPSUɺςετέʔεͷ࡞੒ʜ

Slide 63

Slide 63 text

3FBM8PSMEͱ3FBDU

Slide 64

Slide 64 text

'BDFCPPLͱ3FBDU w 3FBDU͸'BDFCPPL͕࢖͏ͨΊʹ࡞ΒΕ͍ͯΔϥΠϒϥϦʔ w PWFS DPNQPOFOUT w l8FPOMZPQFOTPVSDFXIBUXFVTFz w 044ͱͯ͠ͷ3FBDU w 47( DVTUPNFMFNFOUT w GBDFCPPLJODVCBUPSDSFBUFSFBDUBQQ w SFBDUKTDPSFOPUFT

Slide 65

Slide 65 text

3FBM8PSMEͱ3FBDU w %FQSFDBUF1SPDFTT w ͭલͷϝδϟʔόʔδϣϯͰܯࠂ͔ͯ͠Βഇࢭ͞ΕΔ w ҠߦύεΛఏڙ w (SBEVBM"EPQUJPO w طଘͷΞϓϦέʔγϣϯʹ૊ΈࠐΈ΍͍͢"1*ͷఏڙ w 3FBDUXJUIK2VFSZ $BOWBTʜ w &TDBQF)BUDIFT w 3FGT EBOHFSPVTMZ4FU*OOFS)5.- $POUFYU

Slide 66

Slide 66 text

'VUVSF

Slide 67

Slide 67 text

3FBDU$PSF w $PSF͸ͲΜͲΜখ͘͞"1*͸࠷௿ݶʹ w SFBDU w $PNQPOFOU΍3FBDU&MFNFOUΛ࡞੒͢Δ w SFOEFSFS w $PNQPOFOUΛϓϥοτϑΥʔϜʹԠͯ͡ॲཧ͢Δ w %0.΋ͨͩͷλʔήοτ w SFBDUEPN SFBDUOBUJWF SFBDUBSUʜ

Slide 68

Slide 68 text

% tree src -L 3 -d . !"" addons !"" isomorphic # !"" children # !"" classic # !"" hooks # $"" modern !"" renderers # !"" art # !"" dom # # !"" client # # !"" fiber # # !"" server # # $"" shared # !"" native # !"" noop # !"" shared # # !"" fiber # # !"" hooks # # !"" shared # # !"" stack # # $"" utils # $"" testing !"" shared !"" test $"" umd

Slide 69

Slide 69 text

<8*1>3FBDU'JCFS w ಺෦ΞϧΰϦζϜͷશ໘ॻ͖׵͑ 3FDPODJMFS w ༏ઌ౓ʹԠͯ͡εέδϡʔϦϯά͞Εͨඇಉظͳ7JFXͷߋ৽ w ݱࡏ͸ࠩ෼ͷݕग़ɾద༻͕ಉظతʹߦͳΘΕ͍ͯΔ w NTҎ಺Λ໨ࢦͦ͏ͱ͢Δͱʜ w ༏ઌ౓ͷߴ͍ॲཧ SFRVFTU"OJNBUJPO'SBNF w ༏ઌ౓ͷ௿͍ॲཧ SFRVFTU*EMF$BMMCBDL

Slide 70

Slide 70 text

<8*1>3FBDU'JCFS // renderers/shared/fiber/ReactPriorityLevel.js module.exports = { // No work is pending. NoWork: 0, // For controlled text inputs. Synchronous side-effects. SynchronousPriority: 1, // Needs to complete before the next frame. AnimationPriority: 2, // Interaction that needs to complete pretty soon to feel responsive. HighPriority: 3, // Data fetching, or result from updating stores. LowPriority: 4, // Won't be visible but do the work in case it becomes visible. OffscreenPriority: 5, };

Slide 71

Slide 71 text

4FTTJPOBVUIPSl!LPCBz খ͘͞͸͡ΊͯɺඞཁʹԠͯ͡ΤίγεςϜΛ ར༻͠·͠ΐ͏ʂ 4FTTJPO TQFBLFSEFDLDPNLPCB