Frontend Engineering at Wantedly

©2019 Wantedly, Inc. Frontend Engineering New Joiner Training 2019 May
22, 2019 - Yuki Yamada @ Wantedly

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

©2019 Wantedly, Inc. w 8BOUFEMZͷϑϩϯτΤϯυΤϯδχΞ͸  ϑϩϯτΤϯυ͚ͩΛॻ͘ਓ͸͍ͳ͍ w ΋ͪΖΜωοτϫʔΫ΍αʔόͷ஌ࣝ΋ඞཁ w Ͳ͏΍ͬͨΒϢʔβʔʹՁ஋Λಧ͚ΒΕΔ͔͕Ұ൪
࿩ͷલʹ

©2019 Wantedly, Inc. ϑϩϯτΤϯυͷ͋ΔαʔϏε Wantedly Visit https://www.wantedly.com օ͞Μ͝ଘ஌ͷ8BOUFEMZຊମ 3VCZPO3BJMTͰ࡞ΒΕͨαʔϏεͰϑϩϯτΤϯ υʹ࢖ΘΕ͍ͯΔٕज़͸ҎԼͷ௨Γ
)BNM4BTT K2VFSZ"OHVMBS+4#BDLCPOF3FBDU

©2019 Wantedly, Inc. ϑϩϯτΤϯυͷ͋ΔαʔϏε Wantedly People https://people.wantedly.com ໊ࢗ؅ཧΞϓϦ8BOUFEMZ1FPQMFͷ΢Σϒ൛ ࣾ಺ͰॳΊͯͷ3FBDUͰ࣮૷͞Εͨ41"ɻϑϩϯτ Τϯυʹ࢖ΘΕ͍ͯΔٕज़͸ҎԼͷ௨Γ
3FBDUTUZMFEDPNQPOFOUT

©2019 Wantedly, Inc. ϑϩϯτΤϯυͷ͋ΔαʔϏε Wantedly Chat https://m.wantedly.com ϝοηʔδϯάΞϓϦͷ8BOUFEMZ$IBU ࣾ಺Ͱ͸ॳΊͯͷ41"Ͱ&MFDUSPOΛ࢖ͬͯσεΫ τοϓΞϓϦ΋഑෍͍ͯ͠ΔɻϑϩϯτΤϯυʹ࢖
ΘΕ͍ͯΔٕज़͸ҎԼͷ௨Γ "OHVMBS+44BTT'JSFCBTF

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

©2019 Wantedly, Inc. w ͲΜͳٕज़͕͋Δ͔ͱ͔Λ঺հ͢Δ w ࣾ಺Ͱͷ࢖ΘΕํͱ͔Λβοϐϯά͢Δײ͡Ͱ  ঺հ͢ΔͷͰؾʹͳͬͨͱ͖ʹ֤ࣗௐ΂ͯ΄͍͠ w ࣌ંσϞͭͭ͠঺հ
w ࠓճ͸ύϑΥʔϚϯεͳͲͷ࿩͸͠ͳ͍ ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़

©2019 Wantedly, Inc. ύοέʔδϚωʔδϟ #VJMEपΓͷπʔϧ -JOUFS'PSNBUUFS
6*ϥΠϒϥϦ ςετ ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ ύοͱ͜ͷߨٛதʹ࿩ͤΔ΋ͷΛબΜͰ·͢

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

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

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

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

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

©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]);

©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]);

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

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

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

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

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

©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 <p>{this.state.count}</p>; } } ӈͷΑ͏ͳ$MBTTߏจͰهड़͞Εͨඵ͓͖ʹΧ΢ϯ τΞοϓ͍ͯ͘͠ίϯϙʔωϯτΛ)PPLT"1*Λ ࢖ͬͯॻ͖௚͢ͱͨ͠ΒͲ͏͢Δʁ

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

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

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

©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);

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

Frontend Engineering at Wantedly

Frontend Engineering at Wantedly

Yuki YAMADA

More Decks by Yuki YAMADA

Other Decks in Programming

Featured

Transcript

©2019 Wantedly, Inc. Frontend Engineering New Joiner Training 2019 May

©2019 Wantedly, Inc. ͸͡Ίʹ ࣗݾ঺հͱֶ͔ΜͰ΄͍͜͠ͱͱ͔

©2019 Wantedly, Inc. ࣗݾ঺հ Yuki Yamada Frontend Engineer @ Infrastructure

©2019 Wantedly, Inc. w 8BOUFEMZͷϑϩϯτΤϯυΤϯδχΞ͸  ϑϩϯτΤϯυ͚ͩΛॻ͘ਓ͸͍ͳ͍ w ΋ͪΖΜωοτϫʔΫ΍αʔόͷ஌ࣝ΋ඞཁ w Ͳ͏΍ͬͨΒϢʔβʔʹՁ஋Λಧ͚ΒΕΔ͔͕Ұ൪

©2019 Wantedly, Inc. 8BOUFEMZͰͷϑϩϯτΤϯυʹ͍ͭͯ஌Δ ϑϩϯτΤϯυΛॻͨ͘Ίͷ࠷௿ݶͷ஌ࣝΛ͚ͭΔ ͜ΕͰ͋ͳͨ΋ϑϩϯτΤϯυΤϯδχΞ ࠓճୡ੒͍ͨ͜͠ͱ

©2019 Wantedly, Inc. 8BOUFEMZͰϑϩϯτΤϯυͷ͋ΔαʔϏε ͨ͘͞Μ͋Γ·͢

©2019 Wantedly, Inc. ϑϩϯτΤϯυͷ͋ΔαʔϏε Wantedly Visit https://www.wantedly.com օ͞Μ͝ଘ஌ͷ8BOUFEMZຊମ 3VCZPO3BJMTͰ࡞ΒΕͨαʔϏεͰϑϩϯτΤϯ υʹ࢖ΘΕ͍ͯΔٕज़͸ҎԼͷ௨Γ

©2019 Wantedly, Inc. ϑϩϯτΤϯυͷ͋ΔαʔϏε Wantedly People https://people.wantedly.com ໊ࢗ؅ཧΞϓϦ8BOUFEMZ1FPQMFͷ΢Σϒ൛ ࣾ಺ͰॳΊͯͷ3FBDUͰ࣮૷͞Εͨ41"ɻϑϩϯτ Τϯυʹ࢖ΘΕ͍ͯΔٕज़͸ҎԼͷ௨Γ

©2019 Wantedly, Inc. ϑϩϯτΤϯυͷ͋ΔαʔϏε Wantedly Chat https://m.wantedly.com ϝοηʔδϯάΞϓϦͷ8BOUFEMZ$IBU ࣾ಺Ͱ͸ॳΊͯͷ41"Ͱ&MFDUSPOΛ࢖ͬͯσεΫ τοϓΞϓϦ΋഑෍͍ͯ͠ΔɻϑϩϯτΤϯυʹ࢖

©2019 Wantedly, Inc. ঺հͨͭ͠Ͱ࢖ΘΕ͍ͯΔϏϡʔΛඳը͢Δπʔϧ ͚ͩͰ)BNM3FBDU"OHVMBS+4ͱͨ͘͞Μ͋Δ ࣾ಺πʔϧ·Ͱ޿͛ͨΒ7VF΋ ϑϩϯτΤϯυͷ͋ΔαʔϏε

©2019 Wantedly, Inc. ͳͥଟछଟ༷ͳϥΠϒϥϦ࢖ͬͯΔ ϑϩϯτΤϯυͷ͋ΔαʔϏε

©2019 Wantedly, Inc. ͳͥଟछଟ༷ͳϥΠϒϥϦΛ࢖ͬͯΔ Real world es201x and future αʔϏεͰϑϩϯτΤϯυͷ։ൃΛ࢝͠Ίͨ࣌఺Ͱͷྲྀ

©2019 Wantedly, Inc. 8BOUFEMZͰ࢖͍ͬͯΔٕज़ ͨ͘͞Μ͋Γ·͢

©2019 Wantedly, Inc. w ͲΜͳٕज़͕͋Δ͔ͱ͔Λ঺հ͢Δ w ࣾ಺Ͱͷ࢖ΘΕํͱ͔Λβοϐϯά͢Δײ͡Ͱ  ঺հ͢ΔͷͰؾʹͳͬͨͱ͖ʹ֤ࣗௐ΂ͯ΄͍͠ w ࣌ંσϞͭͭ͠঺հ

©2019 Wantedly, Inc. ύοέʔδϚωʔδϟ #VJMEपΓͷπʔϧ -JOUFS'PSNBUUFS

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

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

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

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

©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ -JOUFS'PSNBUUFS%&.0

©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ 6*ϥΠϒϥϦ%&.0 export class Counter extends React.PureComponent

©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ 6*ϥΠϒϥϦ%&.0 function Counter() { const [count,

©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ ςετ%&.0 +FTUͱ%0."1*Λ࢖ͬͯϑϩϯτΤϯυͷڍಈΛςετ͢Δɻ XJOEPXͷFWFOUMJTUFOFSΛςετͷதͰൃՐͤ͞Δํ๏ͱ͔͜Μͳ; ͏ʹͰ͖Δɻ const handler

©2019 Wantedly, Inc. ͜͏͍ͬͨΑ͏ʹͨ͘͞ΜͷπʔϧΛ࢖ͬͯ 8BOUFEMZͷαʔϏε͕ͨͪ࡞ΒΕ͍ͯΔ ঺հͨ͠ͷ͸Ұ෦෼ɻଞʹͲΜͳπʔϧ͕ੈքதͰ ࢖ΘΕ͍ͯΔ͔͸࣍ͷσϞάϥϑΟʔ͕ৄ͍͠ 4UBUFPG+BWB4DSJQUIUUQTTUBUFPGKTDPN ϑϩϯτΤϯυͷ͋ΔαʔϏε

©2019 Wantedly, Inc. ·ͱΊ ఻͔͑ͨͬͨ͜ͱ

©2019 Wantedly, Inc. ͜ͷߨٛͰ8BOUFEMZͷϑϩϯτΤϯυ։ൃ͕  ໢ཏͰ͖ͨͱ͸ࢥ͍ͬͯͳ͍ ϑϩϯτΤϯυͷٕज़͸ਐԽ͕ܹ͍͠ͱࢥΘΕ͕ͪ ͚ͩͲɺͦ΋ͦ΋ٕज़ͷਐԽ͕ܹ͍͠ ·ͱΊ

©2019 Wantedly, Inc. ࠓճ࿩ͨ͜͠ͱ͕Θ͔͍ͬͯΕ͹8BOUFEMZͷ  ϑϩϯτΤϯυͷ։ൃ͸Ͱ͖ΔΑ͏ʹͳ͍ͬͯΔഺ ϑϩϯτΤϯυͷٕज़Λ৮Δͷ͸ָ͍͠͠ɺϢʔ βʔʹ௚ʹՁ஋Λಧ͚ΒΕΔ෦෼ͳͷͰ໘ന͍ 8BOUFEMZͷϑϩϯτΤϯυΛྑ͘͠Α͏ ఻͔͑ͨͬͨ͜ͱ

©2019 Wantedly, Inc. ͋Γ͕ͱ͏͍͟͝·ͨ͠ ऴΘΓ

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