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

2917a3c430817eb71086f8973c06ebba?s=47 sakito
March 20, 2019

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

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

@Twitter
https://twitter.com/__sakito__

2917a3c430817eb71086f8973c06ebba?s=128

sakito

March 20, 2019
Tweet

Transcript

  1. ݱ৔͔Βಧ͚Δ3FBDUϓϩδΣΫτͷ
 ೰Έͱվળ 6*5ਐԽ͢Δ3FBDUKT

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

    w3FBDUNFFUVQ w*OTJEF'SPOUFOE
  3. ࠂ஌

  4. None
  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Λ֬ೝ͢Δ6OJU5FTU΋Ұ෦ॻ͍͍͕ͯͨɺ
 มߋ͕ଟ͍෦෼ͳͷͰɺϝϯςφϯε͕ਏ͔ͬͨ

  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ه๏Ҏ֎ʹ΋$441SPQه๏Ͱ$44͕ॻ͚Δ wυΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ w5ZQF4DSJQUͷαϙʔτ͕͋Δ

  21. 4UZMFEͱ$441SPQ

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

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

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

  25. &NPUJPOΛ࠾༻ͨ͠ײ૝ wίϯϙʔωϯτຖʹ$44Λॻ͚ΔΑ͏ʹͳͬͨͷͰɺ
 Ͳͷ෦෼ʹελΠϧ͕౰͍ͨͬͯΔ͔෼͔Γ΍͘͢ͳͬͨ wίϯϙʔωϯτΛ࡟আ͢Δͱ͖ʹɺελΠϧͱҰॹʹ࡟আͰ͖Δ w4UZMFEͱ$441SPQͷͭͷه๏͕͍ࠞͬͯ͟ΔͷͰɺ
 ͲͪΒ͔ʹ౷Ұ͍ͨ͠ͱ͍͏࿩͕Ͱ͍ͯΔ w4UZMFEDPNQPOFOUW͕ϦϦʔε͞Ε͔ͯΒ͸ɺ
 &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·ͣެࣜͰ΋঺հ͞Ε͍ͯΔͱ͍͏఺
 'PSNTr3FBDU'VMMZ'MFEHFE4PMVUJPOT
 IUUQTSFBDUKTPSHEPDTGPSNTIUNMGVMMZqFEHFETPMVUJPOT wυΩϡϝϯτ͕ݟ΍͘͢ɺطʹੈͷதʹFYBNQMF͕ଟ͘ଘࡏͨ͠ wυΩϡϝϯτ΍'PSNJLͷ(JUIVC্ʹ&YBNQMF͕͋ΔͷͰ
 ੋඇݟ͍ͯͩ͘͞ w5ZQF4DSJQU༻ͷυΩϡϝϯτͱ&YBNQMF΋͋Γ·͢ w:VQΛ࢖༻ͨ͠όϦσʔγϣϯͷૢ࡞͕͠΍͔ͬͨ͢

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

  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
 #BTJD3FEVDFS4USVDUVSFBOE4UBUF4IBQF
 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