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

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

@Twitter
https://twitter.com/__sakito__

1. ݱ৔͔Βಧ͚Δ3FBDUϓϩδΣΫτͷ
 ೰Έͱվળ
   6*5
   ਐԽ͢Δ
   3FBDUKT
2. wTBLJUP !@@TBLJUP@@
   w'SPOU&OE
   &OHJOFFS
   w3FBDU XFCQBDL (BUTCZ+4
   w&WFOU
   w#POpSF
   'SPOUFOE
   w'SPOUFOE
   5SBJOJOH
   .FFUVQ
   w3FBDU
   NFFUVQ
   w*OTJEF
   'SPOUFOE
   
3. ࠂ஌
5. *OTJEF
   'SPOUFOE
   
 ೥݄೔։࠵ʂ✨
 IUUQTJOTJEFGSPOUFOEDPN
6. $'1ืूͷకΊ੾Γ͸
 ໌೔ ݄೔࣌෼ ·Ͱʂ
 ·ͩؒʹ߹͏ʂʂʂ
7. ࠂ஌ऴྃ
8. ݱ৔ҰͭҰͭʹ3FBDUʹؔ͢Δ޻෉͕͋Δͱ͓΋ͬͯΔ
 ࠙਌ձͰ͸ͦΜͳ࿩Ͱ੝Γ্͕Γ͍ͨ
9. ๻ͷ3FBDUϓϩδΣΫτͷݱ৔Ͱվળͨ͠࿩
10. ͲΜͳঢ়گ͔ʁ wϑϩϯτΤϯυνʔϜͷߏ੒͸ਓ͘Β͍
    w#UP#ͷ؅ཧը໘αʔϏεΛ࣮૷
    wػೳ௥Ճɾվम͸ฏߦͰ͍ͭ͘΋ߦΘΕ͍ͯΔ
    w৽ͨʹ࡮৽Λ͢Δ͜ͱʹ
11. ͲΜͳมߋΛ͔ͨ͠ w3FBDU
    
    5ZQF4DSJQUͷಋೖ
    w4BTT͔Β&NPUJPO΁มߋ
    w3FEVY'PSN͔Β'PSNJL΁
    w3FEVYͷߏ੒Λมߋ
    w3FEVDLT
    w*NNFS
12. ͲΜͳมߋΛ͔ͨ͠ w3FBDU
    
    5ZQF4DSJQUͷಋೖ
    w4BTT͔Β&NPUJPO΁มߋ
    w3FEVY'PSN͔Β'PSNJL΁
    w3FEVYͷߏ੒Λมߋ
    w3FEVDLT
    w*NNFS
13. 5ZQF4DSJQUͷ࠾༻લ w ؤுͬͯ+4
    %PDΛॻ͍͍ͯͨ
    w ͔͠͠ίʔυʹӨڹ͸ແ͍ͷͰɺߋ৽͞Εͣʹ์ஔ͞ΕͯΔ͜ͱ΋
    w QSPQTΛ֬ೝ͢Δ6OJU
    5FTU΋Ұ෦ॻ͍͍͕ͯͨɺ
 มߋ͕ଟ͍෦෼ͳͷͰɺϝϯςφϯε͕ਏ͔ͬͨ
14. Αʔ͠ʂ5ZQF4DSJQUೖΕͪΌ͏ͧʔʂʂʂ
15. Έ͍ͨͳ؆୯ͳ࿩ʹ͸ͳΒͳ͍
16. ֤ํ໘͔ΒͰͯ͘Δݒ೦఺ w5ZQF4DSJQUΛ࢖ͬͨ͜ͱͳ͍ϝϯόʔ͕ଟ͍ঢ়گͰɺ
 ࣮૷εϐʔυ͕஗͘ͳͬͯ͠·Θͳ͍͔ʁ
    w࢖͑ͳ͍ϥΠϒϥϦͱ͔͋ΔͷͰ͸ͳ͍͔ʁ
    wͦ΋ͦ΋΄Μͱʹྑ͍΋ͷͳͷ͔ʁ
17. ࠾༻લʹߦͬͨ͜ͱ w5ZQF4DSJQUͷษڧձΛ࣮ࢪ
    wܕͷجຊ
    wܕΛૢ࡞͢Δํ๏
    w3FBDU
    
    5ZQF4DSJQUͰίϯϙʔωϯτΛ࡞Δ
    wαϯϓϧϓϩδΣΫτΛ࡞࣮ͬͯࡍʹ࢖ͬͯΈΔ
18. 5ZQF4DSJQUΛ࠾༻ͨ͠ײ૝ w࢖͑ͳ͍ϥΠϒϥϦ͸ແ͔ͬͨ
    w5ZQF4DSJQU͕෼͔ΔϝϯόʔͰج൫෦෼Λ࣮૷͢Ε͹ɺ
 ͦ͜Λࢀߟʹ͠ͳ͕Βଞͷϝϯόʔ΋࣮૷͕Ͱ͖ΔΑ͏ʹͳͬͨ
    w։ൃ͸͠΍͘͢ͳͬͨ
    wίʔυมߋ࣌ʹ࣮ߦΤϥʔ͕ݮͬͨ
    wमਖ਼Օॴ͕෼͔Γ΍͘͢ɺΤσΟλʔͷ૬ੑ͕͍͍
    wQSPQTʹͲΜͳσʔλ͕΍ͬͯ͘Δͷ͔෼͔Γ΍͍͢
    wܕΛ৴༻͢Δ͜ͱ΋Ͱ͖ͳ͍
    wͨ·ʹܕਪ࿦͕੾Ε࣮ͨ૷͕͋Δ
    
    ΑΓϨϏϡʔେࣄʹ
19. ͲΜͳมߋΛ͔ͨ͠ w3FBDU
    
    5ZQF4DSJQUͷಋೖ
    w4BTT͔Β&NPUJPO΁มߋ
    w3FEVY'PSN͔Β'PSNJL΁
    w3FEVYͷߏ੒Λมߋ
    w3FEVDLT
    w*NNFS
20. $TTJO+4ͷ&NPUJPOΛ࠾༻ wͳͥબΜ͔ͩ͸2JJUBʹৄ͘͠ॻ͍ͯΔ
 ʮ$44JO+4ͷϥΠϒϥϦͱͯ͠ʮFNPUJPOʯΛબ୒͍ͯ͠Δཧ༝ʯ
 IUUQTRJJUBDPN@@TBLJUP@@JUFNTEFFGGBDG
    wهࣄͷ಺༰Λେ·͔ʹઆ໌͢Δͱ
    w౰࣌ͲͷϥΠϒϦΑΓ΋ϑΝΠϧαΠζ͕খ͘͞ɺ࣮ߦ଎౓΋ૣ͔ͬͨ
    w4UZMFEه๏Ҏ֎ʹ΋$44
    1SPQه๏Ͱ$44͕ॻ͚Δ
    wυΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ
    w5ZQF4DSJQUͷαϙʔτ͕͋Δ
21. 4UZMFEͱ$44
    1SPQ
22. &NPUJPOͰͷ޻෉ w FNPUJPOΛͦͷ··࢖༻͍ͯ͠Δͱσόοά͕ͮ͠Β͍໰୊
23. &NPUJPOͰͷ޻෉ w CBCFMQMVHJOFNPUJPOΛಋೖ͢ΔͱղܾͰ͖Δ
24. &NPUJPOͰͷ޻෉ w ϑΥϧμ໊
    
    ϑΝΠϧ໊
    
    ίϯϙʔωϯτ໊͕͚ͭΕΔ
25. &NPUJPOΛ࠾༻ͨ͠ײ૝ wίϯϙʔωϯτຖʹ$44Λॻ͚ΔΑ͏ʹͳͬͨͷͰɺ
 Ͳͷ෦෼ʹελΠϧ͕౰͍ͨͬͯΔ͔෼͔Γ΍͘͢ͳͬͨ
    wίϯϙʔωϯτΛ࡟আ͢Δͱ͖ʹɺελΠϧͱҰॹʹ࡟আͰ͖Δ
    w4UZMFEͱ$44
    1SPQͷͭͷه๏͕͍ࠞͬͯ͟ΔͷͰɺ
 ͲͪΒ͔ʹ౷Ұ͍ͨ͠ͱ͍͏࿩͕Ͱ͍ͯΔ
    w4UZMFE
    DPNQPOFOU
    W͕ϦϦʔε͞Ε͔ͯΒ͸ɺ
 &NPUJPOͱൺ΂Εͯͳ͍ͷͰɺվΊͯൺֱ͸͍ͨ͠
26. ͲΜͳมߋΛ͔ͨ͠ w3FBDU
    
    5ZQF4DSJQUͷಋೖ
    w4BTT͔Β&NPUJPO΁มߋ
    w3FEVY'PSN͔Β'PSNJL΁
    w3FEVYͷߏ੒Λมߋ
    w3FEVDLT
    w*NNFS
27. 3FEVY'PSN͕ਏ͔ͬͨͱ͜Ζ wͦͷ໊ͷ௨Γ3FEVYʹDPOOFDU͠ͳ͍ͱ͍͚ͳ͍ͱ͜Ζ͕ਏ͔ͬͨ
    w3FEVY'PSN͕"DUJPOͱ4UPSFΛӅṭͯ͘͠ΕΔͷ͕ͩɺ
 ͦͷ෦෼͕ݟ͑ͳ͍͜ͱͰԿ͕ىͬͯ͜Δ͔෼͔Γʹ͍͘
    wόϦσʔγϣϯपΓ͸༻ҙ͞Ε͍ͯΔ΋ͷͰ͸଍Γͣɺ
 ֦ு͠ͳ͍ͱ͍͚ͳ͘ͳͬͨ
    w֦ுΛͨ͜͠ͱͰɺ3FEVY'PSN࿏ઢ͔Β֎Εͨ
 ಠ࣮ࣗ૷͕Ͱ͖ͯ͠·ͬͨͷͰɺ࢓༷ཧղ͕೉͘͠ͳͬͨ
    wҎ্ͷ͜ͱ͕͋Γɺ3FEVY'PSN͸؅ཧը໘ͷΑ͏ͳ
 'PSNΛଟ༻͢Δͷʹ͸޲͍ͯͳ͍ͱ൑அͨ͠
28. ͳͥ'PSNJLʹͨ͠ͷ͔ʁ w·ͣެࣜͰ΋঺հ͞Ε͍ͯΔͱ͍͏఺
 'PSNT
    r
    3FBDU
    'VMMZ'MFEHFE
    4PMVUJPOT
 IUUQTSFBDUKTPSHEPDTGPSNTIUNMGVMMZqFEHFETPMVUJPOT
    wυΩϡϝϯτ͕ݟ΍͘͢ɺطʹੈͷதʹFYBNQMF͕ଟ͘ଘࡏͨ͠
    wυΩϡϝϯτ΍'PSNJLͷ(JUIVC্ʹ&YBNQMF͕͋ΔͷͰ
 ੋඇݟ͍ͯͩ͘͞
    w5ZQF4DSJQU༻ͷυΩϡϝϯτͱ&YBNQMF΋͋Γ·͢
    w:VQΛ࢖༻ͨ͠όϦσʔγϣϯͷૢ࡞͕͠΍͔ͬͨ͢
29. 'PSNJLΛ࠾༻ͨ͠ײ૝ w3FEVY'PSNΑΓ΋໎͍͕ͳ͘ɺ
 ݟ௨͠ͷ͍͍'PSN͕࡞Ε͍ͯΔؾ͕͢Δ
    w͢΂ͯͷ'PSNʹ'PSNJLΛ࢖͏͔Ͳ͏͔͸ٞ࿦͍ͯ͠Δ࠷த
    w)0$ͱ3FOEFS
    1SPQͷͲͪΒ͔Ͱ࣮૷͕Ͱ͖Δ
    w)PPLTͳͲͷొ৔Λػʹ)0$ͷྲྀΕ͕ͳ͘ͳΓͦ͏ͩͬͨͷͰ
 3FOEFS
    1SPQʹدͤͨ
30. ͲΜͳมߋΛ͔ͨ͠ w3FBDU
    
    5ZQF4DSJQUͷ࠾༻
    w4BTT͔Β&NPUJPO΁มߋ
    w3FEVY'PSN͔Β'PSNJL΁
    w3FEVYͷߏ੒Λมߋ
    w3FEVDLT
    w*NNFS
31. ࠓ·Ͱͷ3FEVYͷߏ੒ wϖʔδɺ4UPSF "DUJPOؚΉ ͷߏ੒ͩͬͨ
    wಉ͡4UPSFߏ੒ΛίϐϖͰྲྀ༻ͯ͠Δͱ͜Ζ΋͋ͬͨ
    w"DUJPO΋ίϐϖ͞ΕͯͨΓɺ
 ࣅͨ͜ͱ͕Ͱ͖Δ͔Βҧ͏ϖʔδ໊ͷϑΝΠϧ͔ΒJNQPSU΋͋ͬͨ
    w"DUJPO΍4UPSFʹϩδοΫ͕෼ࢄͯͨ͠
32. SFEVDLTͷ࠾༻ wެࣜυΩϡϝϯτ͕͢΂ͯ
 IUUQTHJUIVCDPNBMFYONSFEVDLT
    wσΟϨΫτϦͷߏ੒ͷϓϥΫςΟεͷ̍छ
33. SFEVDLTͷ࠾༻
34. SFEVDLTΛ࠾༻ͨ͠ײ૝ wͦΕͧΕͷϑΝΠϧͰ΍Δ͜ͱ͕໌֬ʹͳͬͨͷͰɺ
 ϩδοΫ͕෼ࢄ͠ͳ͘ͳͬͨ
    wςετ΋ॻ͖΍͘͢ͳͬͨ
    w͜͜Ͱٙ໰͕ੜ·Εͨ
    w6*ʹؔ͢Δঢ়ଶ΍ΞϓϦέʔγϣϯશମʹؔΘΔঢ়ଶ͸
 Ͳ͜Ͱ࣋ͭͷ͕͍͍ͷ͔ʁ
35. TUPSF૚ͷ෼ׂΛ࠾༻ w 3FEVYͷެࣜυΩϡϝϯτʹ౴͕͑͋ͬͨ
    w 3FEVY
    
    
 #BTJD
    3FEVDFS
    4USVDUVSF
    BOE
    4UBUF
    4IBQF
 IUUQTSFEVYKTPSHSFDJQFTTUSVDUVSJOHSFEVDFST
 CBTJDSFEVDFSTUSVDUVSFCBTJDSFEVDFSTUSVDUVSFBOETUBUFTIBQF
    w EE૚ɺBQQ૚ɺVJ૚Λઃ͚Δͱྑ͍ͱͷ͜ͱ
    w ͜ΕͰ4UPSF͕࣋ͭؔ৺͝ͱΛߋʹ෼ׂͰ͖ͨ
36. *NNFSΛ࠾༻ wਂ͍ΦϒδΣΫτߏ଄ͩͱɺ
 4UPSFͷॻ͖׵͑ͰNVUBCMFͳॻ͖׵͕͑͞ΕΔ͜ͱ͕͋ͬͨ
    wJNNVUBCMFͳมߋΛߦ͍͍͕ͨɺϨϏϡʔ͍ͯͯ͠
 ൈ͚མͪΔ఺΋͋Δ
    w*NNVUBCMF+4΋͋Δ͕ɺಠࣗ"1*ͷॻ͖׵͑ͳͲ΋͋ΔͷͰɺ
 ϋʔυϧ͕ߴ͔ͬͨ
    wͦ͜Ͱಠࣗ"1*ͳͲ֮͑ͳͯ͘΋ɺσʔλΛૢ࡞Ͱ͖ɺ
 σʔλߏ଄ΛJNNVUBCMFʹͯ͘͠ΕΔ*NNFSΛ࠾༻
37. *NNFSΛ࠾༻
38. *NNFSΛ࠾༻ͨ͠ײ૝ w4UPSFͷσʔλߏ଄͕ݟ΍͘͢ͳͬͨ
    wϝϯόʔ͕ଟ͘ͳͬͯ΋JNNVUBCMFͳঢ়ଶ͕อ͍ͯͯΔ
    wϨϏϡʔͷෛՙ͕Լ͕ͬͨ
    wਂ͍σʔλߏ଄Λมߋ͢ΔͨΊͷίʔυ͕ݮͬͨͷͰ
 ௥͏ίʔυྔ͕ݮͬͨ
    wϨϏϡʔͷ؍఺ͱͯ͠͸ɺద੾ͳσʔλมߋ͞Ε͍ͯΔ͔͚ͩʹͳͬͨ
39. ·ͱΊ
40. ·ͱΊ w ৭ΜͳվળΛߦͬͨ
    w ଞʹ΋͜Μͳ͜ͱΛͨ͠
    w %PD[ͷ࠾༻
    w "UPNJD
    %FTJHOͷ࠾༻
    w ίʔσΟϯάϧʔϧͷٞ࿦
    w XFCQBDLपΓͷϏϧυվળ
    w TQFBLFSEFDLʹաڈ΍ͬͨ͜ͱ͸·ͱ·ͬͯΔͷͰࢀߟʹ͍ͯͩ͘͠͞
    w ·ͩ·ͩͰ͖Δ͜ͱɺ΍Δ͜ͱ͸ͨ͘͞Μ͋Δ
    w ύϑΥʔϚϯε
    w όʔδϣϯͷఆظߋ৽ͳͲɾɾɾ
41. ๻ͨͪͷઓ͍͸·ͩ·ͩ͜Ε͔Βͩʂʂ
42. d
    ͭͮ͘
    d