Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

dachi023
October 12, 2016

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

16.10.12 tech_eight_react

dachi023

October 12, 2016
Tweet

More Decks by dachi023

Other Decks in Programming

Transcript

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

    View Slide

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

    $POOFIJUP *OD'SPOUFOEFOHJOFFS
    !EBDIJ
    [email protected]

    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