Tweet
Tweet

Slide 1

Slide 1 text

3FBDUͰ ϩʔσΟϯάΛ Ͳ͏ѻ͏͔ @_tohashi

Slide 2

Slide 2 text

ൃද͢Δਓ • Takumi Ohashi • @_tohashi • freee

Slide 3

Slide 3 text

࿑ಇ؀ڥ • ϞϊϦγοΫͳRailsΞϓϦέʔγϣϯ • ςʔϒϧ 600ڧ • js 40ສߦऑ • React, flux, flowtype

Slide 4

Slide 4 text

࣏҆ҡ࣋ • ਓ΋ίʔυ΋ଟ͍ • ESLint, Prettier • ੩తʹղੳͰ͖ͳ͍΋ͷ • ίϯϙʔωϯτ΍σʔλϑϩʔͷ࣮૷ํ਑ • ෼ׂͷཻ౓, SFC • HOC, render props • ঢ়ଶ؅ཧ

Slide 5

Slide 5 text

ίϯϙʔωϯτͷঢ়ଶ؅ཧ • Ͳ͜Ͱ؅ཧ͢΂͖͔ • ϑΥʔϜͷೖྗ஋ • μΠΞϩάͷ։ด • ඇಉظॲཧதͷεϐφʔදࣔ • ઃܭ΍࣮૷ͷํ਑෼͔Ε͕ͪ • υΩϡϝϯτ΍αϯϓϧʹΑͬͯ΋ҧ͏

Slide 6

Slide 6 text

Redux ͷ FAQ

Slide 7

Slide 7 text

ίϯϙʔωϯτͷঢ়ଶ؅ཧ • ཁ͸దٓ൑அ • ΞϓϦέʔγϣϯͷن໛ɺཁ݅ɺར༻͢Δϥ ΠϒϥϦʹΑΔ • ҉໧஌ʹͳΓ͕ͪ • νʔϜ։ൃͳΒࢦ਑ͷ౷Ұ͸ඞཁ

Slide 8

Slide 8 text

ϩʔσΟϯά • APIϦΫΤετதʹεϐφʔΛදࣔͨ͠Γɺଞ ͷૢ࡞ΛϒϩοΫͨ͠Γ • ίϯϙʔωϯτͷঢ়ଶͰ͸͋Δ͕ඇಉظॲཧ ͸ ActionCreator ଆͰߦΘΕΔ

Slide 9

Slide 9 text

ϩʔσΟϯάͷ ࣮૷όϦΤʔγϣϯ

Slide 10

Slide 10 text

ίϯϙʔωϯτ಺Ͱ׬݁

Slide 11

Slide 11 text

ίϯϙʔωϯτ಺Ͱ׬݁ • Ϛ΢ϯτ௚ޙʹҰ౓͚ͩAPIϦΫΤετΛૹ ΓɺͦͷϨεϙϯεͷϖΠϩʔυΛ࢖ͬͯί ϯςϯπΛඳը • ϛχϚϜͳ React ΞϓϦέʔγϣϯ

Slide 12

Slide 12 text

ίϯϙʔωϯτ಺Ͱ׬݁

Slide 13

Slide 13 text

ίϯϙʔωϯτ಺Ͱ׬݁

Slide 14

Slide 14 text

ίϯϙʔωϯτ಺Ͱ׬݁
 ʢෳ਺ճͷϦΫΤετʣ • ϢʔβʔͷΞΫγϣϯʹԠͯ͡ෳ਺ճϦΫΤ ετΛૹΔ • ϖʔδωʔγϣϯͳͲ

Slide 15

Slide 15 text

ίϯϙʔωϯτ಺Ͱ׬݁
 ʢෳ਺ճͷϦΫΤετʣ • v

Slide 16

Slide 16 text

ίϯϙʔωϯτ಺Ͱ׬݁
 ʢෳ਺ճͷϦΫΤετʣ

Slide 17

Slide 17 text

Store ͷ State ͱͯ͠؅ཧ

Slide 18

Slide 18 text

Store ͷ Stateͱͯ͠؅ཧ • w/Redux • ϩʔσΟϯάͷঢ়ଶ΋ Store ͷ State ͱͯ͠ѻ ͏ • ίϯϙʔωϯτΛ presentational ʹͰ͖Δ

Slide 19

Slide 19 text

Store ͷ Stateͱͯ͠؅ཧ

Slide 20

Slide 20 text

Store ͷ Stateͱͯ͠؅ཧ

Slide 21

Slide 21 text

ϦετϏϡʔ • Ϧετ಺ʹෳ਺ͷΞΠςϜ • ΞΠςϜ୯ҐͰฤूͯ͠ߋ৽ • ΞΠςϜ͝ͱʹϩʔσΟϯάͷঢ়ଶΛ࣋ͭ

Slide 22

Slide 22 text

ϦετϏϡʔ

Slide 23

Slide 23 text

ϦετϏϡʔ

Slide 24

Slide 24 text

ϦετϏϡʔ

Slide 25

Slide 25 text

ϩʔσΟϯά׬ྃޙͷΞΫγϣϯ • ʮอଘ͠·ͨ͠ʯͳͲͷϝοηʔδ΍ Notification ͷදࣔ • ϩʔσΟϯά͕׬ྃͨ͠ޙͷҰճ͚ͩൃੜ͞ ͍ͤͨ • ࣌ؒܦա΍ϢʔβʔͷΞΫγϣϯͰফ͑Δ

Slide 26

Slide 26 text

ϩʔσΟϯά׬ྃޙͷΞΫγϣϯ

Slide 27

Slide 27 text

ϩʔσΟϯά׬ྃޙͷΞΫγϣϯ

Slide 28

Slide 28 text

ΑΓେن໛ͳΞϓϦέʔγϣϯ • ReducerͷංେԽ • API͝ͱʹREQUEST, SUCCESS, (FAILED) • LoadingReducerͳͲʹ෼ׂ • LoadingStateͷόέπϦϨʔ • Context API

Slide 29

Slide 29 text

ίϯϙʔωϯτͷ State ͱͯ͠؅ཧ

Slide 30

Slide 30 text

ίϯϙʔωϯτͷ Stateͱͯ͠ ؅ཧ • Store ͷ State ͸άϩʔόϧ • ϩʔσΟϯά͸ίϯϙʔωϯτͷঢ়ଶͱͯ͠ ׬͍݁ͤͨ͞ • ͔ͭ Redux ͷσʔλϑϩʔͱ૊Έ߹ΘͤΔ

Slide 31

Slide 31 text

ίϯϙʔωϯτͷ State ͱͯ͠ ؅ཧ

Slide 32

Slide 32 text

ίϯϙʔωϯτͷ State ͱͯ͠ ؅ཧ

Slide 33

Slide 33 text

ίϯϙʔωϯτͷ State ͱͯ͠ ؅ཧ

Slide 34

Slide 34 text

Suspense

Slide 35

Slide 35 text

Suspense • Ϟδϡʔϧͷ஗Ԇϩʔυ΍ඇಉظॲཧ͕׬ྃ ͢Δ·ͰϨϯμϦϯάΛ suspend Ͱ͖Δ • Ϟδϡʔϧͷ஗Ԇϩʔυ͸ v16.6 ͔Β • ඇಉظॲཧ͸ mid 2019 ·Ͱʹʢ༧ఆʣ

Slide 36

Slide 36 text

Suspense

Slide 37

Slide 37 text

Suspense

Slide 38

Slide 38 text

Suspense • ۜͷ஄ؙͰ͸ͳ͍ • Ϧιʔεͷߋ৽ͳͲσʔλϑΣονҎ֎ͷॲཧ ͸ैདྷ௨Γ΍͍ͬͯ͘ඞཁ͕͋Δ • Ωϟογϡ؅ཧϛεΔͱ΍͹͍ • ࠷ѱϨϯμϦϯάຖʹ API ϦΫΤετ͕ඈͿ

Slide 39

Slide 39 text

͓ΘΓʹ • ϩʔσΟϯάҰͭͱͬͯ΋࣮૷ํ๏͸༷ʑ • ࣗ෼͸ Store ͷ State ೿ -> ਏ͘ͳͬͯίϯϙʔωϯτͷ State ʹ • ίϯϙʔωϯτͷ async Λڐ༰Ͱ͖Δ͔Ͳ͏͔ • ࣮ࡍ͸͜͜ʹΤϥʔϋϯυϦϯά΋ೖͬͯ͘Δ • ࠷ڧͷϩʔσΟϯάঢ়ଶ؅ཧΛߟ͍͖͑ͯ·͠ΐ͏