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

16.10.12 tech_eight_react

Transcript

1. ೥ӡ༻ͨ͠αʔϏεͷ
   ϑϩϯτΛ3FBDUͰॻ͖׵͍͑ͨ࿩ 3FBDUษڧձ
   WPM
   ٸ੒௕ελʔτΞοϓΛࢧ͑Δ3FBDUٕज़-5 $POOFIJUP
   JOD Ո଒ͷຖ೔Λ΋ͬͱসإʹɻ
2. ϓϩϑΟʔϧ 3ZP
   "EBDIJ
 $POOFIJUP
   *OD
   'SPOUFOE
   FOHJOFFS !EBDIJ !EBDIJ@
3. ࠷ۙͷग़དྷࣄ w ഏʹ͕݀։͖·ͨ͠
   w පӃ৯͸ຯ͕ബ͍
   w ୀӃޙʹϥʔϝϯΛ৯΂ͨ
   w ͘͢͝ඒຯ͔ͬͨ͠Ͱ͢ʜ ͸͡ΊͯͷೖӃ
4. w 3FBDUΛಋೖ͍ͨ͠
   w Ϟμϯͳ؀ڥͮ͘Γ
   w طଘίʔυͷϦϑΝΫλ
   w 3FBDUͷಋೖ ࿩͢಺༰
5. 3FBDUΛಋೖ͍ͨ͠ 3FBDUษڧձ
   WPM
   ٸ੒௕ελʔτΞοϓΛࢧ͑Δ3FBDUٕज़-5
6. 3FBDUΛಋೖ͍ͨ͠ཧ༝ w %0.ૢ࡞͔Βղ์͞Ε͍ͨ
   w 'MVYͰঢ়ଶ؅ཧΛෳࡶԽͤ͞ͳ͍
   w ϑϩϯτपΓΛϞμϯʹ͍ͯ͘͠
 
 ଞʹ΋͍Ζ͍Ζ 3FBDUҠߦͷϝϦοτ
7. 2"ΞϓϦ XFCϝσΟΞ Ϋϥ΢υιʔγϯά ϚϚϦαϙʔλʔζ ϚϚϦ ϚϚϦ2 $POOFIJUPͷϚϚϦࣄۀ
8. 2"ΞϓϦ XFCϝσΟΞ Ϋϥ΢υιʔγϯά ϚϚϦαϙʔλʔζ ϚϚϦ ϚϚϦ2 $POOFIJUPͷϚϚϦࣄۀ ࠓճͷλʔήοτ
9. Ϋϥ΢υιʔγϯά ϚϚϦαϙʔλʔζ ϚϚϦαϙʔλʔζʹͨ͠ཧ༝ ࠓճͷλʔήοτ w ϚϚϦ2͸ΞϓϦ
   w 4&0Λؾʹ͠ͳͯ͘΋ྑ͍
   w ࣮૷ܦݧ͕ଟ͍
   ஌ݟ͕͋Δ ͳͥαϙʔλʔζ͔
10. ͔͠͠ w OQNܦ༝ͱ௚%-͕ڞଘ
    w SFRVJSFFYQPSU͸࢖͑ͳ͍
    w ίʔυ͸શͯ&4
    w K2VFSZͱ#BDLCPOF͕ϝΠϯ
    w ϑΝΠϧ਺ઍߦͷίʔυ 3FBDUͷಋೖʹ͸·ͩԕ͍
11. 3FBDUΛ࢝ΊΔલʹ w Ϟμϯͳ؀ڥΛ༻ҙ͢Δ
    w طଘίʔυͷϦϑΝΫλΛ͢Δ ಋೖͷͨΊͷ४උ
12. Ϟμϯͳ؀ڥͮ͘Γ 3FBDUษڧձ
    WPM
    ٸ੒௕ελʔτΞοϓΛࢧ͑Δ3FBDUٕज़-5
13. Ϟμϯͳ؀ڥͮ͘Γ w ґଘϥΠϒϥϦΛશͯOQNͰ؅ཧ
    w XFCQBDLͰϏϧυ͢Δ
    w #BCFMͰ&4·ͰରԠ ΍ͬͨ͜ͱ
14. Ϟμϯͳ؀ڥͮ͘Γ w ະ࢖༻΍όʔδϣϯෆ໌ͷϥΠϒϥϦ͕͋Δ
    w ࢖͍ͬͯͨϥΠϒϥϦ͸શͯOQNରԠ͍ͯͨ͠
    w όʔδϣϯ͕෼͔Βͳ͍΋ͷ͸࠷৽ʹͯ͠ΈΔ
 ಈ͍ͨΒϥοΩʔɺಈ͔ͳ͔ͬͨΒमਖ਼
    w ੾Γସ͑ͨΒ
    HJU
    SN
    IPHFKT
    ͯ͠ফ͍ͯ͘͠ ґଘϥΠϒϥϦΛશͯOQNͰ؅ཧ
15. Ϟμϯͳ؀ڥͮ͘Γ w SFRVJSFFYQPSU͕Ͱ͖Δ؀ڥͮ͘Γ
    w XBUDI
    NPEFͰߴ଎ͳࠩ෼Ϗϧυ
    w େͨ͠ΠϨΪϡϥʔ΋ͳ͘ҠߦͰ͖ͨ
    w ͍͍ͩͨMPBEFSͰαΫοͱղܾ͢Δ
    w શͯOQN؅ཧʹͨ͠ͷ͕ྑ͔ͬͨ XFCQBDLͰϏϧυ͢Δ
16. Ϟμϯͳ؀ڥͮ͘Γ w ࡦఆ͞Εͨ࢓༷͸ͲΜͲΜऔΓࠐΈ͍ͨ
    w ಛʹ&4͕͋Δͱ͋Γ͕͍ͨ
    
    w XFCQBDLΛհͯ͠Ϗϧυ͢ΔͷͰCBCFMMPBEFSͰରԠ #BCFMͰ&4·ͰରԠ
17. طଘίʔυͷϦϑΝΫλ 3FBDUษڧձ
    WPM
    ٸ੒௕ελʔτΞοϓΛࢧ͑Δ3FBDUٕज़-5
18. طଘίʔυͷϦϑΝΫλ w SFRVJSFFYQPSUΛ࢖͏
    w &4ͷه๏Ͱॻ͘
    w -JOUFSΛ࢖ͬͯίʔυͷ੔ܗ ΍ͬͨ͜ͱ
19. طଘίʔυͷϦϑΝΫλ w άϩʔόϧͳఆٛΛফͯ͠FYQPSU͢ΔΑ͏ʹमਖ਼
    w ਺ઍߦ͋ΔϑΝΠϧΛෳ਺ʹ෼ׂͯ͠ݟ௨͠ͷѱ͞վળ
    w ݺͼग़͠ճ਺͕গͳ͍΋ͷ͔Β΍Δͱؾ࣋ͪతʹָ
    w ίʔυશମ΁ͷӨڹ΋গͳ͍
    w 6UJMܥͱ͔͸࠷ޙʹؾ߹͍ೖΕͯ΍Δ SFRVJSFFYQPSUΛ࢖͏
20. طଘίʔυͷϦϑΝΫλ w ߏจܥΛ༏ઌతʹऔΓࠐΜͰॻ͖׵͍͑ͯ͘
    w GVODUJPO B
    C
    ˠ
    B
    C
    
    \^
    w WBSΛMFU
    DPOTUʹஔ͖׵͑Δ
    w ৽͍ؔ͠਺͸ॻ͖׵͑ʹ͕͔͔࣌ؒΔ΋ͷ͕ଟ͍
    w ػೳ࣮૷தͱ͔ʹ৮ͬͨ෦෼Λ͍ͭͰʹ௚͢ &4ͷه๏Ͱॻ͘
21. طଘίʔυͷϦϑΝΫλ w ਓʹΑͬͯॻ͖ํʹ͹Β͖͕ͭ͋ͬͯϝϯςͮ͠Β͍
    w &4-JOUΛಋೖ
    w FTMJOUSFDPNNFOEFE
    ͰҾ͔͔ͬͬͨ෦෼Λ·ͣमਖ਼
    w ऴΘͬͨΒϧʔϧΛ௥Ճͯͦ͠ΕΛमਖ਼ɺΛ܁Γฦ͢ -JOUFSΛ࢖ͬͯίʔυͷ੔ܗ هࣄ΋ॻ͍ͨ
    ✏
    &4-JOUΛ్தͰಋೖͨ͠ͱ͖ͷFTMJOUSDͷઃఆͱӡ༻ํ๏ʹ͍ͭͯߟ͑ͨ
    IUUQUFDIDPOOFIJUPDPNFOUSZ
22. &4-JOUͷಋೖ w Πϯσϯτ͸εϖʔε
    w վߦίʔυ͸-'
    w WBS࢖༻ېࢭ
    w ηϛίϩϯෆཁ SFDPNNFOEFEҎ֎ͷϧʔϧ
23. ϦϑΝΫλͨ݁͠Ռ w ϦϑΝΫλظؒ͸໿ϲ݄
    w ΊͪΌΊͪΌݮͬͨ
    
    ݟ௨͠ྑ͘ͳͬͨ େ෯ͳίʔυͷ୹ॖ
24. 3FBDUͷಋೖ 3FBDUษڧձ
    WPM
    ٸ੒௕ελʔτΞοϓΛࢧ͑Δ3FBDUٕज़-5
25. ਐḿͲ͏Ͱ͔͢ʁ w ·ͩͰ͖͍ͯͳ͍
    w ผ࡞ۀʹϦιʔε౰͍ͯͯͨ
    ࣍εϥΠυ ະணख
26. 3FBDUԽ͸ਐΜͰ͍Δ w αʔϏεͱͦͷ؅ཧػೳͷີ݁߹͕ى͖͍ͯΔ
    w ؅ཧػೳΛ੾Γग़ͯ͠σεΫτοϓΞϓϦԽ͍ͯ͘͠
    w 3FBDU
    'MVY
    'MVY
    6UJMT Ͱ࣮૷
    w ্ཱͪ͛ͨ͹͔ΓͰࠓ͸ਓͰ։ൃத ؅ཧػೳͷ&MFDUSPOԽ
27. ࠓޙͷ࡞ઓ w #BDLCPOF7JFXΛ3FBDU$PNQPOFOUʹॻ͖׵͍͑ͯ͘
    w IBOEMFCBSTͷ࣮૷͸KTYͱͯ͠$PNQPOFOUʹؚ·ͤΔ ίʔυͷॻ͖׵͑
28. ࠓޙͷ࡞ઓ w 'MVY
    6UJMTʹ͢Δ༧ఆ
    w ബ͘'MVYͷαΠΫϧΛಋೖͰ͖Δ
    w 3FEVY΄Ͳͷ༏ल͞͸ඞཁͳ͍ 'MVYϑϨʔϜϫʔΫ
29. ࠓޙͷ࡞ઓ w ࠷ऴతʹK2VFSZґଘΛʹ͍ͨ͠
    w $44ʹͰ͖ΔՕॴ͸$44Ͱॻ͖௚͢
    w 6UJMJUZతʹ࢖͍ͬͯΔ෦෼͸MPEBTIͳͲʹ͍ͯ͘͠ K2VFSZͷ࡟আ
30. ͍͞͝ʹ 3FBDUษڧձ
    WPM
    ٸ੒௕ελʔτΞοϓΛࢧ͑Δ3FBDUٕज़-5
31. ͍͞͝ʹ w ͙͢ʹղܾͰ͖Δ໰୊Ͱ͸ͳ͍
    w ௕͍໨ͰݟΔͷ͕େࣄ
    w ஍ಓʹ௚͢
    
    ៉ྷʹ͍ͯ͘͠
    w 3FBDUͱϞμϯ+4΁ͷѪ͕͋Ε͹΍Γ਱͛ΒΕΔ ͘͢͝େมͰ͢
32. ͍͞͝ʹ ࠓޙ΋ؤுΓ·͢
33. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ $POOFIJUP
    JOD Ո଒ͷຖ೔Λ΋ͬͱসإʹɻ 3FBDUษڧձ
    WPM
    ٸ੒௕ελʔτΞοϓΛࢧ͑Δ3FBDUٕज़-5