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

by sakito

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ࠂ஌

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

*OTJEF'SPOUFOE  ೥݄೔։࠵ʂ✨  IUUQTJOTJEFGSPOUFOEDPN

Slide 6

Slide 6 text

$'1ืूͷకΊ੾Γ͸  ໌೔ ݄೔࣌෼ ·Ͱʂ  ·ͩؒʹ߹͏ʂʂʂ

Slide 7

Slide 7 text

ࠂ஌ऴྃ

Slide 8

Slide 8 text

ݱ৔ҰͭҰͭʹ3FBDUʹؔ͢Δ޻෉͕͋Δͱ͓΋ͬͯΔ  ࠙਌ձͰ͸ͦΜͳ࿩Ͱ੝Γ্͕Γ͍ͨ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

5ZQF4DSJQUͷ࠾༻લ w ؤுͬͯ+4%PDΛॻ͍͍ͯͨ w ͔͠͠ίʔυʹӨڹ͸ແ͍ͷͰɺߋ৽͞Εͣʹ์ஔ͞ΕͯΔ͜ͱ΋ w QSPQTΛ֬ೝ͢Δ6OJU5FTU΋Ұ෦ॻ͍͍͕ͯͨɺ  มߋ͕ଟ͍෦෼ͳͷͰɺϝϯςφϯε͕ਏ͔ͬͨ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Έ͍ͨͳ؆୯ͳ࿩ʹ͸ͳΒͳ͍

Slide 16

Slide 16 text

֤ํ໘͔ΒͰͯ͘Δݒ೦఺ w5ZQF4DSJQUΛ࢖ͬͨ͜ͱͳ͍ϝϯόʔ͕ଟ͍ঢ়گͰɺ  ࣮૷εϐʔυ͕஗͘ͳͬͯ͠·Θͳ͍͔ʁ w࢖͑ͳ͍ϥΠϒϥϦͱ͔͋ΔͷͰ͸ͳ͍͔ʁ wͦ΋ͦ΋΄Μͱʹྑ͍΋ͷͳͷ͔ʁ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

5ZQF4DSJQUΛ࠾༻ͨ͠ײ૝ w࢖͑ͳ͍ϥΠϒϥϦ͸ແ͔ͬͨ w5ZQF4DSJQU͕෼͔ΔϝϯόʔͰج൫෦෼Λ࣮૷͢Ε͹ɺ  ͦ͜Λࢀߟʹ͠ͳ͕Βଞͷϝϯόʔ΋࣮૷͕Ͱ͖ΔΑ͏ʹͳͬͨ w։ൃ͸͠΍͘͢ͳͬͨ wίʔυมߋ࣌ʹ࣮ߦΤϥʔ͕ݮͬͨ wमਖ਼Օॴ͕෼͔Γ΍͘͢ɺΤσΟλʔͷ૬ੑ͕͍͍ wQSPQTʹͲΜͳσʔλ͕΍ͬͯ͘Δͷ͔෼͔Γ΍͍͢ wܕΛ৴༻͢Δ͜ͱ΋Ͱ͖ͳ͍ wͨ·ʹܕਪ࿦͕੾Ε࣮ͨ૷͕͋ΔΑΓϨϏϡʔେࣄʹ

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

$TTJO+4ͷ&NPUJPOΛ࠾༻ wͳͥબΜ͔ͩ͸2JJUBʹৄ͘͠ॻ͍ͯΔ  ʮ$44JO+4ͷϥΠϒϥϦͱͯ͠ʮFNPUJPOʯΛબ୒͍ͯ͠Δཧ༝ʯ  IUUQTRJJUBDPN@@TBLJUP@@JUFNTEFFGGBDG wهࣄͷ಺༰Λେ·͔ʹઆ໌͢Δͱ w౰࣌ͲͷϥΠϒϦΑΓ΋ϑΝΠϧαΠζ͕খ͘͞ɺ࣮ߦ଎౓΋ૣ͔ͬͨ w4UZMFEه๏Ҏ֎ʹ΋$441SPQه๏Ͱ$44͕ॻ͚Δ wυΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ w5ZQF4DSJQUͷαϙʔτ͕͋Δ

Slide 21

Slide 21 text

4UZMFEͱ$441SPQ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

&NPUJPOΛ࠾༻ͨ͠ײ૝ wίϯϙʔωϯτຖʹ$44Λॻ͚ΔΑ͏ʹͳͬͨͷͰɺ  Ͳͷ෦෼ʹελΠϧ͕౰͍ͨͬͯΔ͔෼͔Γ΍͘͢ͳͬͨ wίϯϙʔωϯτΛ࡟আ͢Δͱ͖ʹɺελΠϧͱҰॹʹ࡟আͰ͖Δ w4UZMFEͱ$441SPQͷͭͷه๏͕͍ࠞͬͯ͟ΔͷͰɺ  ͲͪΒ͔ʹ౷Ұ͍ͨ͠ͱ͍͏࿩͕Ͱ͍ͯΔ w4UZMFEDPNQPOFOUW͕ϦϦʔε͞Ε͔ͯΒ͸ɺ  &NPUJPOͱൺ΂Εͯͳ͍ͷͰɺվΊͯൺֱ͸͍ͨ͠

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

3FEVY'PSN͕ਏ͔ͬͨͱ͜Ζ wͦͷ໊ͷ௨Γ3FEVYʹDPOOFDU͠ͳ͍ͱ͍͚ͳ͍ͱ͜Ζ͕ਏ͔ͬͨ w3FEVY'PSN͕"DUJPOͱ4UPSFΛӅṭͯ͘͠ΕΔͷ͕ͩɺ  ͦͷ෦෼͕ݟ͑ͳ͍͜ͱͰԿ͕ىͬͯ͜Δ͔෼͔Γʹ͍͘ wόϦσʔγϣϯपΓ͸༻ҙ͞Ε͍ͯΔ΋ͷͰ͸଍Γͣɺ  ֦ு͠ͳ͍ͱ͍͚ͳ͘ͳͬͨ w֦ுΛͨ͜͠ͱͰɺ3FEVY'PSN࿏ઢ͔Β֎Εͨ  ಠ࣮ࣗ૷͕Ͱ͖ͯ͠·ͬͨͷͰɺ࢓༷ཧղ͕೉͘͠ͳͬͨ wҎ্ͷ͜ͱ͕͋Γɺ3FEVY'PSN͸؅ཧը໘ͷΑ͏ͳ  'PSNΛଟ༻͢Δͷʹ͸޲͍ͯͳ͍ͱ൑அͨ͠

Slide 28

Slide 28 text

ͳͥ'PSNJLʹͨ͠ͷ͔ʁ w·ͣެࣜͰ΋঺հ͞Ε͍ͯΔͱ͍͏఺  'PSNTr3FBDU'VMMZ'MFEHFE4PMVUJPOT  IUUQTSFBDUKTPSHEPDTGPSNTIUNMGVMMZqFEHFETPMVUJPOT wυΩϡϝϯτ͕ݟ΍͘͢ɺطʹੈͷதʹFYBNQMF͕ଟ͘ଘࡏͨ͠ wυΩϡϝϯτ΍'PSNJLͷ(JUIVC্ʹ&YBNQMF͕͋ΔͷͰ  ੋඇݟ͍ͯͩ͘͞ w5ZQF4DSJQU༻ͷυΩϡϝϯτͱ&YBNQMF΋͋Γ·͢ w:VQΛ࢖༻ͨ͠όϦσʔγϣϯͷૢ࡞͕͠΍͔ͬͨ͢

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

ࠓ·Ͱͷ3FEVYͷߏ੒ wϖʔδɺ4UPSF "DUJPOؚΉ ͷߏ੒ͩͬͨ wಉ͡4UPSFߏ੒ΛίϐϖͰྲྀ༻ͯ͠Δͱ͜Ζ΋͋ͬͨ w"DUJPO΋ίϐϖ͞ΕͯͨΓɺ  ࣅͨ͜ͱ͕Ͱ͖Δ͔Βҧ͏ϖʔδ໊ͷϑΝΠϧ͔ΒJNQPSU΋͋ͬͨ w"DUJPO΍4UPSFʹϩδοΫ͕෼ࢄͯͨ͠

Slide 32

Slide 32 text

SFEVDLTͷ࠾༻ wެࣜυΩϡϝϯτ͕͢΂ͯ  IUUQTHJUIVCDPNBMFYONSFEVDLT wσΟϨΫτϦͷߏ੒ͷϓϥΫςΟεͷ̍छ

Slide 33

Slide 33 text

SFEVDLTͷ࠾༻

Slide 34

Slide 34 text

SFEVDLTΛ࠾༻ͨ͠ײ૝ wͦΕͧΕͷϑΝΠϧͰ΍Δ͜ͱ͕໌֬ʹͳͬͨͷͰɺ  ϩδοΫ͕෼ࢄ͠ͳ͘ͳͬͨ wςετ΋ॻ͖΍͘͢ͳͬͨ w͜͜Ͱٙ໰͕ੜ·Εͨ w6*ʹؔ͢Δঢ়ଶ΍ΞϓϦέʔγϣϯશମʹؔΘΔঢ়ଶ͸  Ͳ͜Ͱ࣋ͭͷ͕͍͍ͷ͔ʁ

Slide 35

Slide 35 text

TUPSF૚ͷ෼ׂΛ࠾༻ w 3FEVYͷެࣜυΩϡϝϯτʹ౴͕͑͋ͬͨ w 3FEVY  #BTJD3FEVDFS4USVDUVSFBOE4UBUF4IBQF  IUUQTSFEVYKTPSHSFDJQFTTUSVDUVSJOHSFEVDFST  CBTJDSFEVDFSTUSVDUVSFCBTJDSFEVDFSTUSVDUVSFBOETUBUFTIBQF w EE૚ɺBQQ૚ɺVJ૚Λઃ͚Δͱྑ͍ͱͷ͜ͱ w ͜ΕͰ4UPSF͕࣋ͭؔ৺͝ͱΛߋʹ෼ׂͰ͖ͨ

Slide 36

Slide 36 text

*NNFSΛ࠾༻ wਂ͍ΦϒδΣΫτߏ଄ͩͱɺ  4UPSFͷॻ͖׵͑ͰNVUBCMFͳॻ͖׵͕͑͞ΕΔ͜ͱ͕͋ͬͨ wJNNVUBCMFͳมߋΛߦ͍͍͕ͨɺϨϏϡʔ͍ͯͯ͠  ൈ͚མͪΔ఺΋͋Δ w*NNVUBCMF+4΋͋Δ͕ɺಠࣗ"1*ͷॻ͖׵͑ͳͲ΋͋ΔͷͰɺ  ϋʔυϧ͕ߴ͔ͬͨ wͦ͜Ͱಠࣗ"1*ͳͲ֮͑ͳͯ͘΋ɺσʔλΛૢ࡞Ͱ͖ɺ  σʔλߏ଄ΛJNNVUBCMFʹͯ͘͠ΕΔ*NNFSΛ࠾༻

Slide 37

Slide 37 text

*NNFSΛ࠾༻

Slide 38

Slide 38 text

*NNFSΛ࠾༻ͨ͠ײ૝ w4UPSFͷσʔλߏ଄͕ݟ΍͘͢ͳͬͨ wϝϯόʔ͕ଟ͘ͳͬͯ΋JNNVUBCMFͳঢ়ଶ͕อ͍ͯͯΔ wϨϏϡʔͷෛՙ͕Լ͕ͬͨ wਂ͍σʔλߏ଄Λมߋ͢ΔͨΊͷίʔυ͕ݮͬͨͷͰ  ௥͏ίʔυྔ͕ݮͬͨ wϨϏϡʔͷ؍఺ͱͯ͠͸ɺద੾ͳσʔλมߋ͞Ε͍ͯΔ͔͚ͩʹͳͬͨ

Slide 39

Slide 39 text

·ͱΊ

Slide 40

Slide 40 text

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