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

2ed42bc0f8a07800c61245ddafc1056b?s=47 dachi023
October 12, 2016

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

16.10.12 tech_eight_react

2ed42bc0f8a07800c61245ddafc1056b?s=128

dachi023

October 12, 2016
Tweet

Transcript

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

  2. ϓϩϑΟʔϧ 3ZP"EBDIJ
 $POOFIJUP *OD'SPOUFOEFOHJOFFS !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 ੾Γସ͑ͨΒHJUSNIPHFKTͯ͠ফ͍ͯ͘͠

    ґଘϥΠϒϥϦΛશͯOQNͰ؅ཧ
  15. Ϟμϯͳ؀ڥͮ͘Γ w SFRVJSFFYQPSU͕Ͱ͖Δ؀ڥͮ͘Γ w XBUDINPEFͰߴ଎ͳࠩ෼Ϗϧυ 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 'MVY6UJMT Ͱ࣮૷

    w ্ཱͪ͛ͨ͹͔ΓͰࠓ͸ਓͰ։ൃத ؅ཧػೳͷ&MFDUSPOԽ
  27. ࠓޙͷ࡞ઓ w #BDLCPOF7JFXΛ3FBDU$PNQPOFOUʹॻ͖׵͍͑ͯ͘ w IBOEMFCBSTͷ࣮૷͸KTYͱͯ͠$PNQPOFOUʹؚ·ͤΔ ίʔυͷॻ͖׵͑

  28. ࠓޙͷ࡞ઓ w 'MVY6UJMTʹ͢Δ༧ఆ 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