2年運用したサービスのフロントをReactで書き換えたい話

16.10.12 tech_eight_react

Transcript

1. ೥ӡ༻ͨ͠αʔϏεͷ
   ϑϩϯτΛ3FBDUͰॻ͖׵͍͑ͨ࿩
   3FBDUษڧձWPMٸ੒௕ελʔτΞοϓΛࢧ͑Δ3FBDUٕज़-5
   $POOFIJUP JOD
   Ո଒ͷຖ೔Λ΋ͬͱসإʹɻ
   

   View Slide

2. ϓϩϑΟʔϧ
   3ZP"EBDIJ

   $POOFIJUP *OD'SPOUFOEFOHJOFFS
   !EBDIJ
   !EBDIJ@
   

   View Slide

3. ࠷ۙͷग़དྷࣄ
   w ഏʹ͕݀։͖·ͨ͠
   w පӃ৯͸ຯ͕ബ͍
   w ୀӃޙʹϥʔϝϯΛ৯΂ͨ
   w ͘͢͝ඒຯ͔ͬͨ͠Ͱ͢ʜ
   ͸͡ΊͯͷೖӃ
   

   View Slide

4. w 3FBDUΛಋೖ͍ͨ͠
   w Ϟμϯͳ؀ڥͮ͘Γ
   w طଘίʔυͷϦϑΝΫλ
   w 3FBDUͷಋೖ
   ࿩͢಺༰
   

   View Slide

5. 3FBDUΛಋೖ͍ͨ͠
   3FBDUษڧձWPMٸ੒௕ελʔτΞοϓΛࢧ͑Δ3FBDUٕज़-5
   

   View Slide

6. 3FBDUΛಋೖ͍ͨ͠ཧ༝
   w %0.ૢ࡞͔Βղ์͞Ε͍ͨ
   w 'MVYͰঢ়ଶ؅ཧΛෳࡶԽͤ͞ͳ͍
   w ϑϩϯτपΓΛϞμϯʹ͍ͯ͘͠

   

   ଞʹ΋͍Ζ͍Ζ
   3FBDUҠߦͷϝϦοτ
   

   View Slide

7. 2"ΞϓϦ
   XFCϝσΟΞ Ϋϥ΢υιʔγϯά
   ϚϚϦαϙʔλʔζ
   ϚϚϦ ϚϚϦ2
   $POOFIJUPͷϚϚϦࣄۀ
   

   View Slide

8. 2"ΞϓϦ
   XFCϝσΟΞ Ϋϥ΢υιʔγϯά
   ϚϚϦαϙʔλʔζ
   ϚϚϦ ϚϚϦ2
   $POOFIJUPͷϚϚϦࣄۀ
   ࠓճͷλʔήοτ
   

   View Slide

9. Ϋϥ΢υιʔγϯά
   ϚϚϦαϙʔλʔζ
   ϚϚϦαϙʔλʔζʹͨ͠ཧ༝
   ࠓճͷλʔήοτ
   w ϚϚϦ2͸ΞϓϦ
   w 4&0Λؾʹ͠ͳͯ͘΋ྑ͍
   w ࣮૷ܦݧ͕ଟ͍ ஌ݟ͕͋Δ
   
   ͳͥαϙʔλʔζ͔
   

   View Slide

10. ͔͠͠
    w OQNܦ༝ͱ௚%-͕ڞଘ
    w SFRVJSFFYQPSU͸࢖͑ͳ͍
    w ίʔυ͸શͯ&4
    w K2VFSZͱ#BDLCPOF͕ϝΠϯ
    w ϑΝΠϧ਺ઍߦͷίʔυ
    3FBDUͷಋೖʹ͸·ͩԕ͍
    

    View Slide

11. 3FBDUΛ࢝ΊΔલʹ
    w Ϟμϯͳ؀ڥΛ༻ҙ͢Δ
    w طଘίʔυͷϦϑΝΫλΛ͢Δ
    ಋೖͷͨΊͷ४උ
    

    View Slide

12. Ϟμϯͳ؀ڥͮ͘Γ
    3FBDUษڧձWPMٸ੒௕ελʔτΞοϓΛࢧ͑Δ3FBDUٕज़-5
    

    View Slide

13. Ϟμϯͳ؀ڥͮ͘Γ
    w ґଘϥΠϒϥϦΛશͯOQNͰ؅ཧ
    w XFCQBDLͰϏϧυ͢Δ
    w #BCFMͰ&4·ͰରԠ
    ΍ͬͨ͜ͱ
    

    View Slide

14. Ϟμϯͳ؀ڥͮ͘Γ
    w ະ࢖༻΍όʔδϣϯෆ໌ͷϥΠϒϥϦ͕͋Δ
    w ࢖͍ͬͯͨϥΠϒϥϦ͸શͯOQNରԠ͍ͯͨ͠
    w όʔδϣϯ͕෼͔Βͳ͍΋ͷ͸࠷৽ʹͯ͠ΈΔ

    ಈ͍ͨΒϥοΩʔɺಈ͔ͳ͔ͬͨΒमਖ਼
    w ੾Γସ͑ͨΒHJUSNIPHFKTͯ͠ফ͍ͯ͘͠
    ґଘϥΠϒϥϦΛશͯOQNͰ؅ཧ
    

    View Slide

15. Ϟμϯͳ؀ڥͮ͘Γ
    w SFRVJSFFYQPSU͕Ͱ͖Δ؀ڥͮ͘Γ
    w XBUDINPEFͰߴ଎ͳࠩ෼Ϗϧυ
    w େͨ͠ΠϨΪϡϥʔ΋ͳ͘ҠߦͰ͖ͨ
    w ͍͍ͩͨMPBEFSͰαΫοͱղܾ͢Δ
    w શͯOQN؅ཧʹͨ͠ͷ͕ྑ͔ͬͨ
    XFCQBDLͰϏϧυ͢Δ
    

    View Slide

16. Ϟμϯͳ؀ڥͮ͘Γ
    w ࡦఆ͞Εͨ࢓༷͸ͲΜͲΜऔΓࠐΈ͍ͨ
    w ಛʹ&4͕͋Δͱ͋Γ͕͍ͨ
    w XFCQBDLΛհͯ͠Ϗϧυ͢ΔͷͰCBCFMMPBEFSͰରԠ
    #BCFMͰ&4·ͰରԠ
    

    View Slide

17. طଘίʔυͷϦϑΝΫλ
    3FBDUษڧձWPMٸ੒௕ελʔτΞοϓΛࢧ͑Δ3FBDUٕज़-5
    

    View Slide

18. طଘίʔυͷϦϑΝΫλ
    w SFRVJSFFYQPSUΛ࢖͏
    w &4ͷه๏Ͱॻ͘
    w -JOUFSΛ࢖ͬͯίʔυͷ੔ܗ
    ΍ͬͨ͜ͱ
    

    View Slide

19. طଘίʔυͷϦϑΝΫλ
    w άϩʔόϧͳఆٛΛফͯ͠FYQPSU͢ΔΑ͏ʹमਖ਼
    w ਺ઍߦ͋ΔϑΝΠϧΛෳ਺ʹ෼ׂͯ͠ݟ௨͠ͷѱ͞վળ
    w ݺͼग़͠ճ਺͕গͳ͍΋ͷ͔Β΍Δͱؾ࣋ͪతʹָ
    w ίʔυશମ΁ͷӨڹ΋গͳ͍
    w 6UJMܥͱ͔͸࠷ޙʹؾ߹͍ೖΕͯ΍Δ
    SFRVJSFFYQPSUΛ࢖͏
    

    View Slide

20. طଘίʔυͷϦϑΝΫλ
    w ߏจܥΛ༏ઌతʹऔΓࠐΜͰॻ͖׵͍͑ͯ͘
    w GVODUJPO B C
    ˠ B C
    \^
    w WBSΛMFU DPOTUʹஔ͖׵͑Δ
    w ৽͍ؔ͠਺͸ॻ͖׵͑ʹ͕͔͔࣌ؒΔ΋ͷ͕ଟ͍
    w ػೳ࣮૷தͱ͔ʹ৮ͬͨ෦෼Λ͍ͭͰʹ௚͢
    &4ͷه๏Ͱॻ͘
    

    View Slide

21. طଘίʔυͷϦϑΝΫλ
    w ਓʹΑͬͯॻ͖ํʹ͹Β͖͕ͭ͋ͬͯϝϯςͮ͠Β͍
    w &4-JOUΛಋೖ
    w FTMJOUSFDPNNFOEFEͰҾ͔͔ͬͬͨ෦෼Λ·ͣमਖ਼
    w ऴΘͬͨΒϧʔϧΛ௥Ճͯͦ͠ΕΛमਖ਼ɺΛ܁Γฦ͢
    -JOUFSΛ࢖ͬͯίʔυͷ੔ܗ
    هࣄ΋ॻ͍ͨ✏
    &4-JOUΛ్தͰಋೖͨ͠ͱ͖ͷFTMJOUSDͷઃఆͱӡ༻ํ๏ʹ͍ͭͯߟ͑ͨ
    IUUQUFDIDPOOFIJUPDPNFOUSZ
    

    View Slide

22. &4-JOUͷಋೖ
    w Πϯσϯτ͸εϖʔε
    w վߦίʔυ͸-'
    w WBS࢖༻ېࢭ
    w ηϛίϩϯෆཁ
    SFDPNNFOEFEҎ֎ͷϧʔϧ
    

    View Slide

23. ϦϑΝΫλͨ݁͠Ռ
    w ϦϑΝΫλظؒ͸໿ϲ݄
    w ΊͪΌΊͪΌݮͬͨݟ௨͠ྑ͘ͳͬͨ
    େ෯ͳίʔυͷ୹ॖ
    

    View Slide

24. 3FBDUͷಋೖ
    3FBDUษڧձWPMٸ੒௕ελʔτΞοϓΛࢧ͑Δ3FBDUٕज़-5
    

    View Slide

25. ਐḿͲ͏Ͱ͔͢ʁ
    w ·ͩͰ͖͍ͯͳ͍
    w ผ࡞ۀʹϦιʔε౰͍ͯͯͨ ࣍εϥΠυ
    
    ະணख
    

    View Slide

26. 3FBDUԽ͸ਐΜͰ͍Δ
    w αʔϏεͱͦͷ؅ཧػೳͷີ݁߹͕ى͖͍ͯΔ
    w ؅ཧػೳΛ੾Γग़ͯ͠σεΫτοϓΞϓϦԽ͍ͯ͘͠
    w 3FBDU 'MVY 'MVY6UJMT
    Ͱ࣮૷
    w ্ཱͪ͛ͨ͹͔ΓͰࠓ͸ਓͰ։ൃத
    ؅ཧػೳͷ&MFDUSPOԽ
    

    View Slide

27. ࠓޙͷ࡞ઓ
    w #BDLCPOF7JFXΛ3FBDU$PNQPOFOUʹॻ͖׵͍͑ͯ͘
    w IBOEMFCBSTͷ࣮૷͸KTYͱͯ͠$PNQPOFOUʹؚ·ͤΔ
    ίʔυͷॻ͖׵͑
    

    View Slide

28. ࠓޙͷ࡞ઓ
    w 'MVY6UJMTʹ͢Δ༧ఆ
    w ബ͘'MVYͷαΠΫϧΛಋೖͰ͖Δ
    w 3FEVY΄Ͳͷ༏ल͞͸ඞཁͳ͍
    'MVYϑϨʔϜϫʔΫ
    

    View Slide

29. ࠓޙͷ࡞ઓ
    w ࠷ऴతʹK2VFSZґଘΛʹ͍ͨ͠
    w $44ʹͰ͖ΔՕॴ͸$44Ͱॻ͖௚͢
    w 6UJMJUZతʹ࢖͍ͬͯΔ෦෼͸MPEBTIͳͲʹ͍ͯ͘͠
    K2VFSZͷ࡟আ
    

    View Slide

30. ͍͞͝ʹ
    3FBDUษڧձWPMٸ੒௕ελʔτΞοϓΛࢧ͑Δ3FBDUٕज़-5
    

    View Slide

31. ͍͞͝ʹ
    w ͙͢ʹղܾͰ͖Δ໰୊Ͱ͸ͳ͍
    w ௕͍໨ͰݟΔͷ͕େࣄ
    w ஍ಓʹ௚͢៉ྷʹ͍ͯ͘͠
    w 3FBDUͱϞμϯ+4΁ͷѪ͕͋Ε͹΍Γ਱͛ΒΕΔ
    ͘͢͝େมͰ͢
    

    View Slide

32. ͍͞͝ʹ
    ࠓޙ΋ؤுΓ·͢
    

    View Slide

33. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    $POOFIJUP JOD
    Ո଒ͷຖ೔Λ΋ͬͱসإʹɻ
    3FBDUษڧձWPMٸ੒௕ελʔτΞοϓΛࢧ͑Δ3FBDUٕज़-5
    

    View Slide