Frontend Engineering at Wantedly

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

©2019 Wantedly, Inc. ࣗݾ঺հ Yuki Yamada Frontend Engineer @ Infrastructure Squad ೥݄ʹ৽ଔೖࣾ ϑϩϯτΤϯυͷ։ൃج൫Λࢧ͑Δ͜ͱ͕࢓ࣄ (JU)VCZBNBEBZVLJ 5XJUUFSJLVVZBEBNBZ w 8BOUFEMZ$IBUͰ೥ؒ಺ఆऀΠϯλʔϯ w 8BOUFEMZ1FPQMFͰ೥ؒΞϓϦέʔγϣϯΤϯδχΞ w 8BOUFEMZ7JTJUͰ೥ऑΞϓϦέʔγϣϯΤϯδχΞ w ݱࡏ*OGSBTUSVDUVSF4RVBEͰϑϩϯτΤϯυͷج൫։ൃ

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

©2019 Wantedly, Inc. ͳͥଟछଟ༷ͳϥΠϒϥϦΛ࢖ͬͯΔ Real world es201x and future αʔϏεͰϑϩϯτΤϯυͷ։ൃΛ࢝͠Ίͨ࣌఺Ͱͷྲྀ ߦΓΛબ୒͍ͯ͠Δ͜ͱ͕ଟ͍ɻ࣌ྲྀʹ৐͔ͬͬͨํ͕ ྑ͍఺΋ଟ͍ͨΊ 8BOUFEMZ7JTJU͸೥͔ΒͳͷͰK2VFSZ #BDLCPOFɻͦͷޙ"OHVMBS+4Λܦͯ3FBDU3FEVY 8BOUFEMZ1FPQMF͸೥͔ΒͳͷͰ3FBDU 3FEVYΛ࠷ॳ͔Β࠾༻ 8BOUFEMZ$IBU͸೥͔Β"OHVMBS+4 ࣾ಺αʔϏε͸ύοͱࢼͯ͠ग़͢Έ͍ͨͳ͜ͱ͕͍ͨ͠ ͷͰ؆୯ &BTZ ʹ࢖͑Δ7VF͕ଟ͍ https://speakerdeck.com/mizchi/real-world-es201x-and-future?slide=11

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ ύοέʔδϚωʔδϟ OQNZBSOͷ;͕ͨͭΑ͘࢖ΘΕΔɻ ͲͪΒ΋MPDLpMFΛαϙʔτ͍ͯ͠Δ͠ɺ࠷ۙͰ͸OQNͷ࣮ߦ଎౓΋଎ ͘ͳ͖͍ͬͯͯΔͷͰ͕ࠩ͋·Γͳ͘ͳ͖ͬͯͨҹ৅ɻϨδετϦ͕ҧ͏ ͱ͔͸͋Δ OQN͸/PEFΛΠϯετʔϧ͢Δͱ͖ʹಉࠝ͞Ε͍ͯΔ ZBSO͸ࣗ෼ͰΠϯετʔϧ͢Δඞཁ͕͋ΔɻOQN)PNFCSFX༻ҙ͞ ΕͨΠϯετʔϥͰΠϯετʔϧͰ͖Δɻ

Slide 17

Slide 17 text

©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ ύοέʔδϚωʔδϟ ͲͪΒ΋Πϯετʔϧͨ͠΋ͷ͸OPEF@NPEVMFTҎԼʹ഑ஔ͞ΕΔ ࣮ߦՄೳͳ΋ͷ͸OPEF@NPEVMFTCJOσΟϨΫτϦҎԼʹϑΝΠϧ͕͋ ΔͷͰOPEF@NPEVMFTCJOCBCFMͱ͔Ͱ࣮ߦͰ͖ΔɻίϚϯυ͔Β࣮ ߦ͢Δʹ͸ZBSOCBCFMͱ͔Ͱ࣮ߦͰ͖Δ͠ɺOQNͷํ͸OQYͱ͍͏ί Ϛϯυ͕͋ΔͷͰͦΕΛ࢖ͬͯOQYCBCFMͱ͔͢Ε͹࣮ߦͰ͖Δ 8BOUFEMZͰ͸ΞϓϦέʔγϣϯͰ΋ϥΠϒϥϦͰ΋ͲͪΒ΋ZBSOΛ ࢖͍ͬͯΔɻࣗ෼ݸਓతʹ͸ͲͬͪͰ΋͍͍͕ϓϩδΣΫτʹΑͬͯ࢖͍ ෼͚Δͷ͸େมͳͷͰͱΓ͋͑ͣZBSOʹ౷Ұ͍ͯ͠Δ

Slide 18

Slide 18 text

©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ ύοέʔδϚωʔδϟ%&.0 ࣮ߦՄೳͳϥΠϒϥϦΛ࣮ߦ͢Δํ๏͸஌͓͍ͬͯͯଛ͸ͳ͍ɻ ҎԼͷ࣮ߦ݁Ռ͸શͯಉ݁͡Ռ QBDLBHFKTPOͷTDSJQUTʹهࡌ͕͋ͬͨΒͦͷݶΓͰ͸ͳ͍ $ node_modules/.bin/jest --help $ yarn jest --help $ npx jest --help

Slide 19

Slide 19 text

©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ #VJMEपΓͷπʔϧ 8BOUFEMZͰ͸#BCFMͱ͍͏+BWB4DSJQUͷ࠷৽ͷߏจΛ࢖͑ΔΑ͏ʹ͢Δ τϥϯεύΠϥΛ࢖͍ͬͯΔɻ ·ͨผʹ+BWB4DSJQUʹ੩తܕ෇͚Λಋೖͨ͠5ZQF4DSJQUΛ࢖͍ͬͯΔɻ #BCFM͕ग़ͨͱ͖ʹ5ZQF4DSJQUͷαϙʔτ͕͞Εͯɺ#BCFMͰ΋ 5ZQF4DSJQUͷτϥϯεύΠϧ͕Ͱ͖ΔΑ͏ʹͳͬͨɻ 5ZQF4DSJQU͸ͦͷ··5ZQF4DSJQUͷίʔυΛτϥϯεύΠϧͯ͘͠ΕΔɻ #BCFMͷ5ZQF4DSJQUQMVHJO͸"45Λղੳͯ͠ܕͷఆٛ΍Ξϊςʔγϣϯɺ ܕͷFYQPSU෦෼ͳͲΛTUSJQ͔ͯ͠ΒτϥϯεύΠϧͯ͘͠ΕΔɻ

Slide 20

Slide 20 text

©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ #VJMEपΓͷπʔϧ ͲͪΒͰ΋ܕΛ࢖͍ͭͭهड़͢Δ͜ͱ͸Ͱ͖Δ͕ɺܕͷԸܙΛड͚ΔͨΊ ʹ͸ΤσΟλͷ֦ுΛ࢖ͬͨΓUTDίϚϯυͰܕͷղੳΛ૸ΒͤΔඞཁ͕ ͋Δɻ ·ͨߏจΛ&4ͷߏจʹམͱ͠ࠐΉ෦෼ͷ࣮૷͸ͦΕͧΕ͕͍࣋ͬͯΔͨ Ίɺಉ͡ίʔυͰ΋#BCFMͰτϥϯεύΠϧͨ࣌͠ͱ5ZQF4DSJQUͰτϥ ϯεύΠϧͨ࣌͠ͷ݁Ռ͸ඍົʹҧ͏ɻීஈҙࣝ͢Δ͜ͱ͸ͳ͍ɻ #BCFMͰαϙʔτ͞Ε͍ͯͳ͍5ZQF4DSJQUͷߏจ΋͋ΔͷͰ஫ҙ͢Δɻ IUUQTCBCFMKTJPEPDTFOCBCFMQMVHJOUSBOTGPSNUZQFTDSJQUDBWFBUT

Slide 21

Slide 21 text

©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ #VJMEपΓͷπʔϧ%&.0 #BCFMͱ5ZQF4DSJQUͷτϥϯεύΠϧ݁Ռ͸গ͠ҧ͏ɻײ֮తʹ֮͑ͯ ͓͍ͯ΄͍͠ͷͰ%&.0 #BCFMͷ৔߹ const a = [1, 2, 3]; const b = [...a, 4]; var a = [1, 2, 3]; var b = [].concat(a, [4]);

Slide 22

Slide 22 text

©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ #VJMEपΓͷπʔϧ%&.0 #BCFMͱ5ZQF4DSJQUͷτϥϯεύΠϧ݁Ռ͸গ͠ҧ͏ɻײ֮తʹ֮͑ͯ ͓͍ͯ΄͍͠ͷͰ%&.0 5ZQF4DSJQUͷ৔߹ const a = [1, 2, 3]; const b = [...a, 4]; var a = [1, 2, 3]; var b = a.concat([4]);

Slide 23

Slide 23 text

©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ -JOUFS'PSNBUUFS 8BOUFEMZͰ͸-JOUFSͱͯ͠&4-JOUΛɺ'PSNBUUFSͱͯ͠1SFUUJFSΛ ࠾༻͍ͯ͠Δɻ &4-JOU͸ϓϥάΠϯػߏ͕͔ͬ͠Γ͍ͯͯ͠ɺಠࣗͷϧʔϧͷఆٛ΋͠΍ ͘͢ͳ͍ͬͯΔɻ"45Λ૸ࠪͭͭ͠໨తͷ/PEFʹདྷͨͱ͖ʹ͋Δ৚݅Լ ͩͬͨΒΤϥʔ΍ϫʔχϯάͱͯ͠Ϩϙʔτ͢Δͱ͍ͬͨ͜ͱ͕Ͱ͖Δɻ &4-JOUຊମͷϧʔϧʹՃ͑ͯFTMJOUQMVHJOSFBDUͳͲͷϓϥάΠϯΛಋ ೖ͢Δ͜ͱͰຊମʹͳ͍ϧʔϧͰ΋ίʔυΛνΣοΫ͢Δ͜ͱ͕Ͱ͖Δɻ

Slide 24

Slide 24 text

©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ -JOUFS'PSNBUUFS 1SFUUJFS͸ίϛϡχςΟʹΑͬͯ͜ͷه๏͕͍͍ΑͶܾͬͯ·ͬͨϧʔϧ ʹԊͬͯϑΥʔϚοτͯ͘͠ΕΔ'PSNBUUFSɻͱ͸͍͑ઃఆʹΑͬͯม׵ ͢Δه๏͕બ΂ΔͷͰPQJOJPOBUFEͳ'PSNBUUFSͱͯ͠͸੒ޭ͍ͯ͠ ΔɻϓϥάΠϯ΋ॆ࣮͍ͯͯ͠+BWB4DSJQU5ZQF4DSJQUҎ֎ͷݴޠ΋α ϙʔτ͞Ε͍ͯΔɻ 8BOUFEMZͰ͸8BOUFEMZඪ४ͷ&4-JOUDPOpH΍1SFUUJFSDPOpHΛ OQNͰ഑৴͍ͯ͠ΔͷͰͦΕΛಋೖ͢Δ͔ɺXBOUFEMZGSPMJOUͰ։ൃ͠ ͍ͯΔGSPMJOUΛ࢖ͬͯ-JOU'PSNBU͢ΔΑ͏ʹ͍ͯ͠Δɻ

Slide 25

Slide 25 text

©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ -JOUFS'PSNBUUFS%&.0 8BOUFEMZͰ࡞͍ͬͯΔXBOUFEMZGSPMJOUͷ%&.0 IUUQTHJUIVCDPNXBOUFEMZGSPMJOU ҎԼͷίʔυΛHJUDPNNJU͠Α͏ͱͨ͠ͱ͖ʹͲ͏ͳΔ͔ɻ8BOUFEMZ Ͱ͸&4-JOUͷOPVOVTFEWBST͕ΤϥʔʹͳΔΑ͏ʹઃఆ͞Ε͍ͯΔɻ const a = 1;

Slide 26

Slide 26 text

Slide 27

Slide 27 text

©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ 6*ϥΠϒϥϦ 8BOUFEMZͰ͸6*ϥΠϒϥϦͷσϑΝΫτ͸3FBDUʹͳ͖ͬͯͨɻ 3FBDUΛ೥ࠒ͔Βಋೖͯ͠৿࿬͞ΜΛච಄ʹ͍ΖΜͳը໘Ͱ࠾༻͞ Ε͍ͯΔɻ 3FBDUͷ࠷ۙͷಈ޲ͱͯ͠όʔδϣϯͰ)PPLTͱ͍͏ػೳ͕ϦϦʔ ε͞Εͨɻࠓ·Ͱ$MBTTߏจʹΑΔίϯϙʔωϯτͷهड़Ͱίϯϙʔωϯ τͷϚ΢ϯτ࣌΍TUBUFQSPQT͕มߋ͞Εͨͱ͖ͳͲͷ-JGFDZDMF"1* ͕GVODUJPODPNQPOFOUͰ΋࢖͑ΔΑ͏ʹͳͬͨ͜ͱɻ

Slide 28

Slide 28 text

©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ 6*ϥΠϒϥϦ TUZMFEDPNQPOFOUT͸3FBDUͰ$44Λ͍͍ײ͡ʹ൓өͤ͞ΔͨΊͷϥ ΠϒϥϦɻ3FBDUࣗମTUZMFͱ͍͏QSPQTʹΦϒδΣΫτΛ౉ͨ͠ΒΠϯ ϥΠϯ$44͕൓ө͞ΕΔ͕$44ͷϓϩύςΟͱͦͷΦϒδΣΫτͷରԠΛ ߟ͑ͭͭ΍Δඞཁ͕͋ΔͷͰগ͠໘౗ʹͳΔɻաڈͷࢿ࢈΋࢖͑ͳ͍ͨ Ίɺ$44JO+4΍$44.PEVMFTͳͲͷղܾํ๏͕ఏҊɾ࣮૷͞Ε͖͕ͯͨ ࠓͰ͸TUZMFEDPNQPOFOUT͕༗໊ʹͳ͍ͬͯΔɻ 5BHHFEUFNQMBUFMJUFSBMͱ͍͏ه๏Λ࢖ͬͯ+4ϑΝΠϧͷதʹ$44Λ هड़͢ΔͱTUZMFEDPNQPOFOUT͕Ϗϧυ࣌΍ϥϯλΠϜͰ$44ʹม׵͠ ͯΫϥεΛࢦఆ͢Δܗʹͳ͍ͬͯΔɻ

Slide 29

Slide 29 text

©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ 6*ϥΠϒϥϦ%&.0 export class Counter extends React.PureComponent { constructor(props) { super(props); this.state = { count: 0, timer: null }; } componentDidMount() { const timer = setInterval(() => { this.setState(state => ({ count: state.count + 1 })); }, 1000); this.setState({ timer }); } componentWillUnmount() { clearInterval(this.timer); } render() { return

{this.state.count}

; } } ӈͷΑ͏ͳ$MBTTߏจͰهड़͞Εͨඵ͓͖ʹΧ΢ϯ τΞοϓ͍ͯ͘͠ίϯϙʔωϯτΛ)PPLT"1*Λ ࢖ͬͯॻ͖௚͢ͱͨ͠ΒͲ͏͢Δʁ

Slide 30

Slide 30 text

©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ 6*ϥΠϒϥϦ%&.0 function Counter() { const [count, setCount] = React.useState(0); const savedCallback = React.useRef(); function callback() { setCount(count + 1); } React.useEffect(() => { savedCallback.current = callback; }); React.useEffect(() => { function tick() { savedCallback.current(); } let id = setInterval(tick, 1000); return () => clearInterval(id); }, []); return

{count}

; } ӈͷΑ͏ͳ$MBTTߏจͰهड़͞Εͨඵ͓͖ʹΧ΢ϯ τΞοϓ͍ͯ͘͠ίϯϙʔωϯτΛ)PPLT"1*Λ ࢖ͬͯॻ͖௚͢ͱͨ͠ΒͲ͏͢Δʁ VTF4UBUFVTF3FGVTF&GGFDUͷ૊Έ߹Θ͕ͤඞ ཁɻͪΐͬͱ೉͍͚͠Ͳɺڧྗͳ΋ͷͳͷͰษڧͯ͠ Έͯ΄͍͠ɻ

Slide 31

Slide 31 text

©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ ςετ ϑϩϯτΤϯυͰ΋ςετΛ͢Δํ਑ͳͷͰ঺հɻ 8BOUFEMZͰ͸ςετϑϨʔϜϫʔΫͱͯ͠+FTUΛ࠾༻͍ͯ͠Δɻ .PDIBͱ͔,BSNBͱ͔ଘࡏ͢Δ͚Ͳςετͷ݁Ռ͕ݟ΍͔ͬͨ͢Γઃ ఆͷ͠΍͕͋ͬͯ͢͞࢖͍΍͍͢ɻ+FTU͸/PEFKTͷϓϩδΣΫτͰ΋࢖ ΘΕΔ͕ɺKTEPNͱ͍͏/PEFKT؀ڥͰ΋%0."1*͕࢖͑ΔϥΠϒϥ ϦΛ࢖ͬͯϑϩϯτΤϯυͷςετ΋Ͱ͖Δɻ DSFBUFSFBDUBQQͱ͔Λ࢖ͬͨͱ͖ʹ΋σϑΥϧτͰ࠾༻͞Ε͍ͯΔςε τϑϨʔϜϫʔΫͳͷͰ͓֮͑ͯ͘Ձ஋͸͋Δɻ

Slide 32

Slide 32 text

©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ ςετ 8BOUFEMZͷϑϩϯτΤϯυϓϩδΣΫτͰ͸3FBDUͰίϯϙʔωϯτΛ ॻ͍ͨͱ͖ʹͦͷݟͨ໨ͷௐ੔ͱ͔Λίϯϙʔωϯτ୯ҐͰͰ͖ΔΑ͏ʹ 4UPSZCPPLͱ͍͏πʔϧΛ࢖͍ͬͯΔɻ͜Ε͸ςετϑϨʔϜϫʔΫͱͷ JOUFHSBUJPO͕͔ͬ͠Γ͍ͯͯ͠ɺ+FTUΛ࢖͍ͬͯΔ؀ڥͰ͸TOBQTIPU UFTUJOH͕Ͱ͖Δɻ ͜ͷͭΛ࢖ͬͯϩδοΫ෦෼ɾίϯϙʔωϯτͳͲͷϏϡʔ෦෼ͷςετ Λ໢ཏ͍ͯ͘͜͠ͱͰܧଓతͳ։ൃΛࢧ͑ΔΑ͏ʹͯ͠΄͍͠ɻ

Slide 33

Slide 33 text

©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ ςετ%&.0 +FTUͱ%0."1*Λ࢖ͬͯϑϩϯτΤϯυͷڍಈΛςετ͢Δɻ XJOEPXͷFWFOUMJTUFOFSΛςετͷதͰൃՐͤ͞Δํ๏ͱ͔͜Μͳ; ͏ʹͰ͖Δɻ const handler = jest.fn(); window.addEventListener("focus", handler); const focusEvent = new Event("focus"); window.dispatchEvent(focusEvent); expect(handler).toHaveBeenCalledTimes(1);

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

©2019 Wantedly, Inc. w 3FBMXPSMEFTYBOEGVUVSF w IUUQTTQFBLFSEFDLDPNNJ[DIJSFBMXPSMEFTYBOEGVUVSF w .BLJOHTFU*OUFSWBM%FDMBSBUJWFXJUI3FBDU)PPLT w IUUQTPWFSSFBDUFEJPNBLJOHTFUJOUFSWBMEFDMBSBUJWFXJUISFBDUIPPLT ࢀߟ