現場から届けるReactプロジェクトの悩みと改善

UIT#6 進化する React.jsでの登壇資料
https://uit.connpass.com/event/119594/

@Twitter
https://twitter.com/__sakito__

Transcript

1. ݱ৔͔Βಧ͚Δ3FBDUϓϩδΣΫτͷ

   ೰Έͱվળ
   6*5ਐԽ͢Δ3FBDUKT
   

   View Slide

2. wTBLJUP !@@TBLJUP@@
   
   w'SPOU&OE&OHJOFFS
   w3FBDU XFCQBDL (BUTCZ+4
   w&WFOU
   w#POpSF'SPOUFOE
   w'SPOUFOE5SBJOJOH.FFUVQ
   w3FBDUNFFUVQ
   w*OTJEF'SPOUFOE
   

   View Slide

3. ࠂ஌
   

   View Slide

4. View Slide

5. *OTJEF'SPOUFOE

   ೥݄೔։࠵ʂ✨

   IUUQTJOTJEFGSPOUFOEDPN
   
   

   View Slide

6. $'1ืूͷకΊ੾Γ͸

   ໌೔ ݄೔࣌෼
   ·Ͱʂ

   ·ͩؒʹ߹͏ʂʂʂ
   

   View Slide

7. ࠂ஌ऴྃ
   

   View Slide

8. ݱ৔ҰͭҰͭʹ3FBDUʹؔ͢Δ޻෉͕͋Δͱ͓΋ͬͯΔ

   ࠙਌ձͰ͸ͦΜͳ࿩Ͱ੝Γ্͕Γ͍ͨ
   

   View Slide

9. ๻ͷ3FBDUϓϩδΣΫτͷݱ৔Ͱվળͨ͠࿩
   

   View Slide

10. ͲΜͳঢ়گ͔ʁ
    wϑϩϯτΤϯυνʔϜͷߏ੒͸ਓ͘Β͍
    w#UP#ͷ؅ཧը໘αʔϏεΛ࣮૷
    wػೳ௥Ճɾվम͸ฏߦͰ͍ͭ͘΋ߦΘΕ͍ͯΔ
    w৽ͨʹ࡮৽Λ͢Δ͜ͱʹ
    

    View Slide

11. ͲΜͳมߋΛ͔ͨ͠
    w3FBDU5ZQF4DSJQUͷಋೖ
    w4BTT͔Β&NPUJPO΁มߋ
    w3FEVY'PSN͔Β'PSNJL΁
    w3FEVYͷߏ੒Λมߋ
    w3FEVDLT
    w*NNFS
    

    View Slide

12. ͲΜͳมߋΛ͔ͨ͠
    w3FBDU5ZQF4DSJQUͷಋೖ
    w4BTT͔Β&NPUJPO΁มߋ
    w3FEVY'PSN͔Β'PSNJL΁
    w3FEVYͷߏ੒Λมߋ
    w3FEVDLT
    w*NNFS
    

    View Slide

13. 5ZQF4DSJQUͷ࠾༻લ
    w ؤுͬͯ+4%PDΛॻ͍͍ͯͨ
    w ͔͠͠ίʔυʹӨڹ͸ແ͍ͷͰɺߋ৽͞Εͣʹ์ஔ͞ΕͯΔ͜ͱ΋
    w QSPQTΛ֬ೝ͢Δ6OJU5FTU΋Ұ෦ॻ͍͍͕ͯͨɺ

    มߋ͕ଟ͍෦෼ͳͷͰɺϝϯςφϯε͕ਏ͔ͬͨ
    

    View Slide

14. Αʔ͠ʂ5ZQF4DSJQUೖΕͪΌ͏ͧʔʂʂʂ
    

    View Slide

15. Έ͍ͨͳ؆୯ͳ࿩ʹ͸ͳΒͳ͍
    

    View Slide

16. ֤ํ໘͔ΒͰͯ͘Δݒ೦఺
    w5ZQF4DSJQUΛ࢖ͬͨ͜ͱͳ͍ϝϯόʔ͕ଟ͍ঢ়گͰɺ

    ࣮૷εϐʔυ͕஗͘ͳͬͯ͠·Θͳ͍͔ʁ
    w࢖͑ͳ͍ϥΠϒϥϦͱ͔͋ΔͷͰ͸ͳ͍͔ʁ
    wͦ΋ͦ΋΄Μͱʹྑ͍΋ͷͳͷ͔ʁ
    

    View Slide

17. ࠾༻લʹߦͬͨ͜ͱ
    w5ZQF4DSJQUͷษڧձΛ࣮ࢪ
    wܕͷجຊ
    wܕΛૢ࡞͢Δํ๏
    w3FBDU5ZQF4DSJQUͰίϯϙʔωϯτΛ࡞Δ
    wαϯϓϧϓϩδΣΫτΛ࡞࣮ͬͯࡍʹ࢖ͬͯΈΔ
    

    View Slide

18. 5ZQF4DSJQUΛ࠾༻ͨ͠ײ૝
    w࢖͑ͳ͍ϥΠϒϥϦ͸ແ͔ͬͨ
    w5ZQF4DSJQU͕෼͔ΔϝϯόʔͰج൫෦෼Λ࣮૷͢Ε͹ɺ

    ͦ͜Λࢀߟʹ͠ͳ͕Βଞͷϝϯόʔ΋࣮૷͕Ͱ͖ΔΑ͏ʹͳͬͨ
    w։ൃ͸͠΍͘͢ͳͬͨ
    wίʔυมߋ࣌ʹ࣮ߦΤϥʔ͕ݮͬͨ
    wमਖ਼Օॴ͕෼͔Γ΍͘͢ɺΤσΟλʔͷ૬ੑ͕͍͍
    wQSPQTʹͲΜͳσʔλ͕΍ͬͯ͘Δͷ͔෼͔Γ΍͍͢
    wܕΛ৴༻͢Δ͜ͱ΋Ͱ͖ͳ͍
    wͨ·ʹܕਪ࿦͕੾Ε࣮ͨ૷͕͋ΔΑΓϨϏϡʔେࣄʹ
    

    View Slide

19. ͲΜͳมߋΛ͔ͨ͠
    w3FBDU5ZQF4DSJQUͷಋೖ
    w4BTT͔Β&NPUJPO΁มߋ
    w3FEVY'PSN͔Β'PSNJL΁
    w3FEVYͷߏ੒Λมߋ
    w3FEVDLT
    w*NNFS
    

    View Slide

20. $TTJO+4ͷ&NPUJPOΛ࠾༻
    wͳͥબΜ͔ͩ͸2JJUBʹৄ͘͠ॻ͍ͯΔ

    ʮ$44JO+4ͷϥΠϒϥϦͱͯ͠ʮFNPUJPOʯΛબ୒͍ͯ͠Δཧ༝ʯ

    IUUQTRJJUBDPN@@TBLJUP@@JUFNTEFFGGBDG
    
    wهࣄͷ಺༰Λେ·͔ʹઆ໌͢Δͱ
    w౰࣌ͲͷϥΠϒϦΑΓ΋ϑΝΠϧαΠζ͕খ͘͞ɺ࣮ߦ଎౓΋ૣ͔ͬͨ
    w4UZMFEه๏Ҏ֎ʹ΋$441SPQه๏Ͱ$44͕ॻ͚Δ
    wυΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ
    w5ZQF4DSJQUͷαϙʔτ͕͋Δ
    

    View Slide

21. 4UZMFEͱ$441SPQ
    

    View Slide

22. &NPUJPOͰͷ޻෉
    w FNPUJPOΛͦͷ··࢖༻͍ͯ͠Δͱσόοά͕ͮ͠Β͍໰୊
    

    View Slide

23. &NPUJPOͰͷ޻෉
    w CBCFMQMVHJOFNPUJPOΛಋೖ͢ΔͱղܾͰ͖Δ
    

    View Slide

24. &NPUJPOͰͷ޻෉
    w ϑΥϧμ໊ϑΝΠϧ໊ίϯϙʔωϯτ໊͕͚ͭΕΔ
    

    View Slide

25. &NPUJPOΛ࠾༻ͨ͠ײ૝
    wίϯϙʔωϯτຖʹ$44Λॻ͚ΔΑ͏ʹͳͬͨͷͰɺ

    Ͳͷ෦෼ʹελΠϧ͕౰͍ͨͬͯΔ͔෼͔Γ΍͘͢ͳͬͨ
    wίϯϙʔωϯτΛ࡟আ͢Δͱ͖ʹɺελΠϧͱҰॹʹ࡟আͰ͖Δ
    w4UZMFEͱ$441SPQͷͭͷه๏͕͍ࠞͬͯ͟ΔͷͰɺ

    ͲͪΒ͔ʹ౷Ұ͍ͨ͠ͱ͍͏࿩͕Ͱ͍ͯΔ
    w4UZMFEDPNQPOFOUW͕ϦϦʔε͞Ε͔ͯΒ͸ɺ

    &NPUJPOͱൺ΂Εͯͳ͍ͷͰɺվΊͯൺֱ͸͍ͨ͠
    

    View Slide

26. ͲΜͳมߋΛ͔ͨ͠
    w3FBDU5ZQF4DSJQUͷಋೖ
    w4BTT͔Β&NPUJPO΁มߋ
    w3FEVY'PSN͔Β'PSNJL΁
    w3FEVYͷߏ੒Λมߋ
    w3FEVDLT
    w*NNFS
    

    View Slide

27. 3FEVY'PSN͕ਏ͔ͬͨͱ͜Ζ
    wͦͷ໊ͷ௨Γ3FEVYʹDPOOFDU͠ͳ͍ͱ͍͚ͳ͍ͱ͜Ζ͕ਏ͔ͬͨ
    w3FEVY'PSN͕"DUJPOͱ4UPSFΛӅṭͯ͘͠ΕΔͷ͕ͩɺ

    ͦͷ෦෼͕ݟ͑ͳ͍͜ͱͰԿ͕ىͬͯ͜Δ͔෼͔Γʹ͍͘
    wόϦσʔγϣϯपΓ͸༻ҙ͞Ε͍ͯΔ΋ͷͰ͸଍Γͣɺ

    ֦ு͠ͳ͍ͱ͍͚ͳ͘ͳͬͨ
    w֦ுΛͨ͜͠ͱͰɺ3FEVY'PSN࿏ઢ͔Β֎Εͨ

    ಠ࣮ࣗ૷͕Ͱ͖ͯ͠·ͬͨͷͰɺ࢓༷ཧղ͕೉͘͠ͳͬͨ
    wҎ্ͷ͜ͱ͕͋Γɺ3FEVY'PSN͸؅ཧը໘ͷΑ͏ͳ

    'PSNΛଟ༻͢Δͷʹ͸޲͍ͯͳ͍ͱ൑அͨ͠
    

    View Slide

28. ͳͥ'PSNJLʹͨ͠ͷ͔ʁ
    w·ͣެࣜͰ΋঺հ͞Ε͍ͯΔͱ͍͏఺

    'PSNTr3FBDU'VMMZ'MFEHFE4PMVUJPOT

    IUUQTSFBDUKTPSHEPDTGPSNTIUNMGVMMZqFEHFETPMVUJPOT
    wυΩϡϝϯτ͕ݟ΍͘͢ɺطʹੈͷதʹFYBNQMF͕ଟ͘ଘࡏͨ͠
    wυΩϡϝϯτ΍'PSNJLͷ(JUIVC্ʹ&YBNQMF͕͋ΔͷͰ

    ੋඇݟ͍ͯͩ͘͞
    w5ZQF4DSJQU༻ͷυΩϡϝϯτͱ&YBNQMF΋͋Γ·͢
    w:VQΛ࢖༻ͨ͠όϦσʔγϣϯͷૢ࡞͕͠΍͔ͬͨ͢
    

    View Slide

29. 'PSNJLΛ࠾༻ͨ͠ײ૝
    w3FEVY'PSNΑΓ΋໎͍͕ͳ͘ɺ

    ݟ௨͠ͷ͍͍'PSN͕࡞Ε͍ͯΔؾ͕͢Δ
    w͢΂ͯͷ'PSNʹ'PSNJLΛ࢖͏͔Ͳ͏͔͸ٞ࿦͍ͯ͠Δ࠷த
    w)0$ͱ3FOEFS1SPQͷͲͪΒ͔Ͱ࣮૷͕Ͱ͖Δ
    w)PPLTͳͲͷొ৔Λػʹ)0$ͷྲྀΕ͕ͳ͘ͳΓͦ͏ͩͬͨͷͰ

    3FOEFS1SPQʹدͤͨ
    

    View Slide

30. ͲΜͳมߋΛ͔ͨ͠
    w3FBDU5ZQF4DSJQUͷ࠾༻
    w4BTT͔Β&NPUJPO΁มߋ
    w3FEVY'PSN͔Β'PSNJL΁
    w3FEVYͷߏ੒Λมߋ
    w3FEVDLT
    w*NNFS
    

    View Slide

31. ࠓ·Ͱͷ3FEVYͷߏ੒
    wϖʔδɺ4UPSF "DUJPOؚΉ
    ͷߏ੒ͩͬͨ
    wಉ͡4UPSFߏ੒ΛίϐϖͰྲྀ༻ͯ͠Δͱ͜Ζ΋͋ͬͨ
    w"DUJPO΋ίϐϖ͞ΕͯͨΓɺ

    ࣅͨ͜ͱ͕Ͱ͖Δ͔Βҧ͏ϖʔδ໊ͷϑΝΠϧ͔ΒJNQPSU΋͋ͬͨ
    w"DUJPO΍4UPSFʹϩδοΫ͕෼ࢄͯͨ͠
    

    View Slide

32. SFEVDLTͷ࠾༻
    wެࣜυΩϡϝϯτ͕͢΂ͯ

    IUUQTHJUIVCDPNBMFYONSFEVDLT
    wσΟϨΫτϦͷߏ੒ͷϓϥΫςΟεͷ̍छ
    

    View Slide

33. SFEVDLTͷ࠾༻
    

    View Slide

34. SFEVDLTΛ࠾༻ͨ͠ײ૝
    wͦΕͧΕͷϑΝΠϧͰ΍Δ͜ͱ͕໌֬ʹͳͬͨͷͰɺ

    ϩδοΫ͕෼ࢄ͠ͳ͘ͳͬͨ
    wςετ΋ॻ͖΍͘͢ͳͬͨ
    w͜͜Ͱٙ໰͕ੜ·Εͨ
    w6*ʹؔ͢Δঢ়ଶ΍ΞϓϦέʔγϣϯશମʹؔΘΔঢ়ଶ͸

    Ͳ͜Ͱ࣋ͭͷ͕͍͍ͷ͔ʁ
    

    View Slide

35. TUPSF૚ͷ෼ׂΛ࠾༻
    w 3FEVYͷެࣜυΩϡϝϯτʹ౴͕͑͋ͬͨ
    w 3FEVY

    #BTJD3FEVDFS4USVDUVSFBOE4UBUF4IBQF

    IUUQTSFEVYKTPSHSFDJQFTTUSVDUVSJOHSFEVDFST

    CBTJDSFEVDFSTUSVDUVSFCBTJDSFEVDFSTUSVDUVSFBOETUBUFTIBQF
    w EE૚ɺBQQ૚ɺVJ૚Λઃ͚Δͱྑ͍ͱͷ͜ͱ
    w ͜ΕͰ4UPSF͕࣋ͭؔ৺͝ͱΛߋʹ෼ׂͰ͖ͨ
    

    View Slide

36. *NNFSΛ࠾༻
    wਂ͍ΦϒδΣΫτߏ଄ͩͱɺ

    4UPSFͷॻ͖׵͑ͰNVUBCMFͳॻ͖׵͕͑͞ΕΔ͜ͱ͕͋ͬͨ
    wJNNVUBCMFͳมߋΛߦ͍͍͕ͨɺϨϏϡʔ͍ͯͯ͠

    ൈ͚མͪΔ఺΋͋Δ
    w*NNVUBCMF+4΋͋Δ͕ɺಠࣗ"1*ͷॻ͖׵͑ͳͲ΋͋ΔͷͰɺ

    ϋʔυϧ͕ߴ͔ͬͨ
    wͦ͜Ͱಠࣗ"1*ͳͲ֮͑ͳͯ͘΋ɺσʔλΛૢ࡞Ͱ͖ɺ

    σʔλߏ଄ΛJNNVUBCMFʹͯ͘͠ΕΔ*NNFSΛ࠾༻
    

    View Slide

37. *NNFSΛ࠾༻
    

    View Slide

38. *NNFSΛ࠾༻ͨ͠ײ૝
    w4UPSFͷσʔλߏ଄͕ݟ΍͘͢ͳͬͨ
    wϝϯόʔ͕ଟ͘ͳͬͯ΋JNNVUBCMFͳঢ়ଶ͕อ͍ͯͯΔ
    wϨϏϡʔͷෛՙ͕Լ͕ͬͨ
    wਂ͍σʔλߏ଄Λมߋ͢ΔͨΊͷίʔυ͕ݮͬͨͷͰ

    ௥͏ίʔυྔ͕ݮͬͨ
    wϨϏϡʔͷ؍఺ͱͯ͠͸ɺద੾ͳσʔλมߋ͞Ε͍ͯΔ͔͚ͩʹͳͬͨ
    

    View Slide

39. ·ͱΊ
    

    View Slide

40. ·ͱΊ
    w ৭ΜͳվળΛߦͬͨ
    w ଞʹ΋͜Μͳ͜ͱΛͨ͠
    w %PD[ͷ࠾༻
    w "UPNJD%FTJHOͷ࠾༻
    w ίʔσΟϯάϧʔϧͷٞ࿦
    w XFCQBDLपΓͷϏϧυվળ
    w TQFBLFSEFDLʹաڈ΍ͬͨ͜ͱ͸·ͱ·ͬͯΔͷͰࢀߟʹ͍ͯͩ͘͠͞
    w ·ͩ·ͩͰ͖Δ͜ͱɺ΍Δ͜ͱ͸ͨ͘͞Μ͋Δ
    w ύϑΥʔϚϯε
    w όʔδϣϯͷఆظߋ৽ͳͲɾɾɾ
    

    View Slide

41. ๻ͨͪͷઓ͍͸·ͩ·ͩ͜Ε͔Βͩʂʂ
    

    View Slide

42. dͭͮ͘d
    

    View Slide