中大規模開発をReactで行う現場から伝えたいこと

React meetup#5の登壇資料
https://reactjs-meetup.connpass.com/event/76375/

twitter
https://twitter.com/__sakito__

Transcript

1. தେن໛։ൃΛ

   3FBDUͰߦ͏ݱ৔͔Β఻͍͑ͨ͜ͱ
   3FBDUKTNFFUVQ
   

   View Slide

2. View Slide

3. ٕज़తͳ࿩͸͋·Γͳ͍Ͱ͢
   

   View Slide

4. தେن໛ͳ։ൃΛߦ͏্Ͱ

   ۤ࿑ͨ͜͠ͱվળͨ͜͠ͱΛ࿩͠·͢
   

   View Slide

5. ݱ৔ͷటष͍࿩Ͱ͢

   Έͳ͞Μ͕ࠓޙ։ൃΛߦ͏ࡍʹ

   ࢀߟʹͳΕ͹ͱࢥ͍·͢
   

   View Slide

6. ݱࡏߦͳ͍ͬͯΔ։ൃʹ͍ͭͯ
   

   View Slide

7. ݱࡏߦͳ͍ͬͯΔ։ൃʹ͍ͭͯ
   w ϑϩϯτΤϯυͷ։ൃऀɿ։ൃ౰ॳ͸ਓ 

   ݱࡏ͸ʙਓ΄ͲͱϕτφϜ։ൃڌ఺ʹ਺ਓ
   w ։ൃ͍ͯ͠Δ΋ͷɿ؅ཧը໘
   w ։ൃ೥਺ɿ໿೥൒
   w ࢖༻ٕज़ɿ3FBDU3FEVY FO[ZNF FUDʜ 

   

   View Slide

8. ςετ͸ॻ͔ͳ͍ͱޙʑࣗ෼Λۤ͠ΊΔ
   

   View Slide

9. ςετ͕ͳͥඞཁͳͷ͔
   w Կϲ݄΋લʹ։ൃͨ͠΋ͷΛमਖ਼ͨ͠ͱ͖ɺ

   खಈͰࢼݧ͢Δͷਏ͍ɻ

   

   

   w ։ൃ͍ͯ͠Δ࠷த΋ؔ܎ͳ͍෦෼ʹӨڹΛ༩͍͑ͯͳ͍͔

   ɹɹؾʹͳͬͯਫ਼ਆతʹΑ͘ͳ͍ɻ
   

   View Slide

10. ςετΛॻ͘Α͏ʹ͢Δʹ͸
    w 5%%ͰਐΊΕ͹ྑ͍͕ɺ࠷ॳ͸ϋʔυϧ͕ߴ͍ͷͰ

    ։ൃ͠ͳ͕ΒͰ͖Δ͚ͩฏߦͰςετΛॻ͍͍ͯ͘
    w $*Ͱςετ͕མ͍ͪͯͳ͍͔֬ೝͰ͖ΔΑ͏ʹ͢Δ
    w ৽ن࣮૷࣌ʹ͸ಉ࣌ʹTQFDϑΝΠϧΛ࡞੒͢Δ
    w ͤΊͯ෼ذʹΑΓදࣔ΍ۚમपΓͷόά͕ى͖ͨΒ

    க໋తͳ෦෼ͷςετ͸ॻ͘Α͏ʹ͢Δ
    

    View Slide

11. ڞ௨ίϯϙʔωϯτΛՄࢹԽ͢Δ
    

    View Slide

12. ڞ௨ίϯϙʔωϯτ͕ՄࢹԽ͞Ε͍ͯͳ͍৔߹
    w ৽͘͠ਓ͕ೖ͖ͬͯͨͱ͖ʹɺڞ௨ίϯϙʔωϯτ͕͋Δͷʹ

    ஌Βͣʹಉ͡Α͏ͳ΋ͷΛ։ൃͯ͠͠·͏
    w 13ͷͱ͖ʹؾ͍ͮͨͱͯ͠΋ɺࢦఠ͢Δਓ΋

    ࢦఠ͞ΕΔਓ΋͓ޓ͍޾ͤͰ͸ͳ͍
    w ڞ௨ίϯϙʔωϯτ͕͋Δ༗ແΛ౎౓ฉ͔ΕΔͷ΋͠ΜͲ͍
    

    View Slide

13. 4UPSZCPPL
    IUUQTHJUIVCDPNTUPSZCPPLTTUPSZCPPL
    

    View Slide

14. View Slide

15. υΩϡϝϯτʹৄ͘͠࢒͢
    

    View Slide

16. υΩϡϝϯτʹ࢒͢΋ͷ
    w ։ൃ؀ڥͷόʔδϣϯ΍։ൃ؀ڥΛ্ཱͪ͛Δखॱ
    w ίʔσΟϯάΨΠυ ม਺໊ɺ+4%PDͷॻ͖ํɺ

    ࡾ߲ԋࢉࢠΛ࢖͍࿦ཧԋࢉࢠ͸࢖Θͳ͍ɺFUDʜ
    
    w ςετͷॻ͖ํ
    w 13ΛϨϏϡʔ͢Δࡍʹࢦ਑ʹͳΔΑ͏ͳ΋ͷ
    

    View Slide

17. όʔδϣϯมߋ͸খࠁΈʹߦ͏
    

    View Slide

18. όʔδϣϯมߋΛଵͬͨύλʔϯ
    w ݱࡏࣗ෼ͷ1+͸OPEFͷόʔδϣϯ͕Wܥɾɾɾ
    w ࠷ۙWܥͷαϙʔτ͕੾ΒΕ࢝Ί͍ͯΔͷͰɺ

    ͢΂ͯͷόʔδϣϯߋ৽ΛҰؾʹߦ͓͏ͱ͢Δͱɺ

    ੝େʹΤϥʔ͕ग़ͯಈ͔ͳ͘ͳΓɺվम͕େม
    w ͜ͷ··Ͱ͸Կ͔க໋తͳόά͕ݟ͔ͭͬͨͱ͖ʹɺ

    ਝ଎ͳରॲ͕Ͱ͖ͳ͍
    

    View Slide

19. όʔδϣϯมߋΛश׳తʹߦ͏
    w ࣋ͪճΓ੍ʹͯ͠ɺिʹ౓όʔδϣϯߋ৽Λߦ͏
    w OPEF͸-54ͷόʔδϣϯ͕ߋ৽͞Εͨࡍʹɺ

    όʔδϣϯͷߋ৽Λߦ͏
    w ґଘύοέʔδΛMPDL͢ΔͨΊʹZBSO͔OPEFܥΛ

    ࢖༻͢Δ
    

    View Slide

20. ޾ͤͳதେن໛։ൃΛૹΕ·͢Α͏ʹ
    

    View Slide

21. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide