Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Frontend Engineering at Wantedly

Frontend Engineering at Wantedly

2019年 Wantedly 新人研修の資料です。

フロントエンドというざっくりしたテーマについての講義です。Wantedly のフロントエンドで使われている技術を見つつ、これからの Wantedly でのフロントエンド開発をするために知っておいてほしい技術などをデモをしつつ話しました。

Yuki YAMADA

May 22, 2019
Tweet

More Decks by Yuki YAMADA

Other Decks in Programming

Transcript

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

    22, 2019 - Yuki Yamada @ Wantedly
  2. ©2019 Wantedly, Inc. ͸͡Ίʹ ࣗݾ঺հͱֶ͔ΜͰ΄͍͜͠ͱͱ͔

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

    Squad ೥݄ʹ৽ଔೖࣾ ϑϩϯτΤϯυͷ։ൃج൫Λࢧ͑Δ͜ͱ͕࢓ࣄ (JU)VCZBNBEBZVLJ 5XJUUFSJLVVZBEBNBZ w 8BOUFEMZ$IBUͰ೥ؒ಺ఆऀΠϯλʔϯ w 8BOUFEMZ1FPQMFͰ೥ؒΞϓϦέʔγϣϯΤϯδχΞ w 8BOUFEMZ7JTJUͰ೥ऑΞϓϦέʔγϣϯΤϯδχΞ w ݱࡏ*OGSBTUSVDUVSF4RVBEͰϑϩϯτΤϯυͷج൫։ൃ
  4. ©2019 Wantedly, Inc. w 8BOUFEMZͷϑϩϯτΤϯυΤϯδχΞ͸
 ϑϩϯτΤϯυ͚ͩΛॻ͘ਓ͸͍ͳ͍ w ΋ͪΖΜωοτϫʔΫ΍αʔόͷ஌ࣝ΋ඞཁ w Ͳ͏΍ͬͨΒϢʔβʔʹՁ஋Λಧ͚ΒΕΔ͔͕Ұ൪

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

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

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

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

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

    ΘΕ͍ͯΔٕज़͸ҎԼͷ௨Γ "OHVMBS+44BTT'JSFCBTF
  10. ©2019 Wantedly, Inc. ঺հͨͭ͠Ͱ࢖ΘΕ͍ͯΔϏϡʔΛඳը͢Δπʔϧ ͚ͩͰ)BNM3FBDU"OHVMBS+4ͱͨ͘͞Μ͋Δ ࣾ಺πʔϧ·Ͱ޿͛ͨΒ7VF΋ ϑϩϯτΤϯυͷ͋ΔαʔϏε

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

  12. ©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
  13. ©2019 Wantedly, Inc. 8BOUFEMZͰ࢖͍ͬͯΔٕज़ ͨ͘͞Μ͋Γ·͢

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

    w ࠓճ͸ύϑΥʔϚϯεͳͲͷ࿩͸͠ͳ͍ ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़
  15. ©2019 Wantedly, Inc.  ύοέʔδϚωʔδϟ  #VJMEपΓͷπʔϧ  -JOUFS'PSNBUUFS 

    6*ϥΠϒϥϦ  ςετ ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ ύοͱ͜ͷߨٛதʹ࿩ͤΔ΋ͷΛબΜͰ·͢
  16. ©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ ύοέʔδϚωʔδϟ OQNZBSOͷ;͕ͨͭΑ͘࢖ΘΕΔɻ ͲͪΒ΋MPDLpMFΛαϙʔτ͍ͯ͠Δ͠ɺ࠷ۙͰ͸OQNͷ࣮ߦ଎౓΋଎ ͘ͳ͖͍ͬͯͯΔͷͰ͕ࠩ͋·Γͳ͘ͳ͖ͬͯͨҹ৅ɻϨδετϦ͕ҧ͏ ͱ͔͸͋Δ OQN͸/PEFΛΠϯετʔϧ͢Δͱ͖ʹಉࠝ͞Ε͍ͯΔ

    ZBSO͸ࣗ෼ͰΠϯετʔϧ͢Δඞཁ͕͋ΔɻOQN)PNFCSFX༻ҙ͞ ΕͨΠϯετʔϥͰΠϯετʔϧͰ͖Δɻ
  17. ©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ ύοέʔδϚωʔδϟ ͲͪΒ΋Πϯετʔϧͨ͠΋ͷ͸[email protected]ҎԼʹ഑ஔ͞ΕΔ ࣮ߦՄೳͳ΋ͷ͸[email protected]CJOσΟϨΫτϦҎԼʹϑΝΠϧ͕͋ ΔͷͰ[email protected]CJOCBCFMͱ͔Ͱ࣮ߦͰ͖ΔɻίϚϯυ͔Β࣮ ߦ͢Δʹ͸ZBSOCBCFMͱ͔Ͱ࣮ߦͰ͖Δ͠ɺOQNͷํ͸OQYͱ͍͏ί Ϛϯυ͕͋ΔͷͰͦΕΛ࢖ͬͯOQYCBCFMͱ͔͢Ε͹࣮ߦͰ͖Δ

    8BOUFEMZͰ͸ΞϓϦέʔγϣϯͰ΋ϥΠϒϥϦͰ΋ͲͪΒ΋ZBSOΛ ࢖͍ͬͯΔɻࣗ෼ݸਓతʹ͸ͲͬͪͰ΋͍͍͕ϓϩδΣΫτʹΑͬͯ࢖͍ ෼͚Δͷ͸େมͳͷͰͱΓ͋͑ͣZBSOʹ౷Ұ͍ͯ͠Δ
  18. ©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ ύοέʔδϚωʔδϟ%&.0 ࣮ߦՄೳͳϥΠϒϥϦΛ࣮ߦ͢Δํ๏͸஌͓͍ͬͯͯଛ͸ͳ͍ɻ ҎԼͷ࣮ߦ݁Ռ͸શͯಉ݁͡Ռ QBDLBHFKTPOͷTDSJQUTʹهࡌ͕͋ͬͨΒͦͷݶΓͰ͸ͳ͍  $

    node_modules/.bin/jest --help $ yarn jest --help $ npx jest --help
  19. ©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ #VJMEपΓͷπʔϧ 8BOUFEMZͰ͸#BCFMͱ͍͏+BWB4DSJQUͷ࠷৽ͷߏจΛ࢖͑ΔΑ͏ʹ͢Δ τϥϯεύΠϥΛ࢖͍ͬͯΔɻ ·ͨผʹ+BWB4DSJQUʹ੩తܕ෇͚Λಋೖͨ͠5ZQF4DSJQUΛ࢖͍ͬͯΔɻ #BCFM͕ग़ͨͱ͖ʹ5ZQF4DSJQUͷαϙʔτ͕͞Εͯɺ#BCFMͰ΋ 5ZQF4DSJQUͷτϥϯεύΠϧ͕Ͱ͖ΔΑ͏ʹͳͬͨɻ

    5ZQF4DSJQU͸ͦͷ··5ZQF4DSJQUͷίʔυΛτϥϯεύΠϧͯ͘͠ΕΔɻ #BCFMͷ5ZQF4DSJQUQMVHJO͸"45Λղੳͯ͠ܕͷఆٛ΍Ξϊςʔγϣϯɺ ܕͷFYQPSU෦෼ͳͲΛTUSJQ͔ͯ͠ΒτϥϯεύΠϧͯ͘͠ΕΔɻ
  20. ©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ #VJMEपΓͷπʔϧ ͲͪΒͰ΋ܕΛ࢖͍ͭͭهड़͢Δ͜ͱ͸Ͱ͖Δ͕ɺܕͷԸܙΛड͚ΔͨΊ ʹ͸ΤσΟλͷ֦ுΛ࢖ͬͨΓUTDίϚϯυͰܕͷղੳΛ૸ΒͤΔඞཁ͕ ͋Δɻ ·ͨߏจΛ&4ͷߏจʹམͱ͠ࠐΉ෦෼ͷ࣮૷͸ͦΕͧΕ͕͍࣋ͬͯΔͨ Ίɺಉ͡ίʔυͰ΋#BCFMͰτϥϯεύΠϧͨ࣌͠ͱ5ZQF4DSJQUͰτϥ

    ϯεύΠϧͨ࣌͠ͷ݁Ռ͸ඍົʹҧ͏ɻීஈҙࣝ͢Δ͜ͱ͸ͳ͍ɻ #BCFMͰαϙʔτ͞Ε͍ͯͳ͍5ZQF4DSJQUͷߏจ΋͋ΔͷͰ஫ҙ͢Δɻ IUUQTCBCFMKTJPEPDTFOCBCFMQMVHJOUSBOTGPSNUZQFTDSJQUDBWFBUT
  21. ©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]);
  22. ©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]);
  23. ©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ -JOUFS'PSNBUUFS 8BOUFEMZͰ͸-JOUFSͱͯ͠&4-JOUΛɺ'PSNBUUFSͱͯ͠1SFUUJFSΛ ࠾༻͍ͯ͠Δɻ &4-JOU͸ϓϥάΠϯػߏ͕͔ͬ͠Γ͍ͯͯ͠ɺಠࣗͷϧʔϧͷఆٛ΋͠΍ ͘͢ͳ͍ͬͯΔɻ"45Λ૸ࠪͭͭ͠໨తͷ/PEFʹདྷͨͱ͖ʹ͋Δ৚݅Լ ͩͬͨΒΤϥʔ΍ϫʔχϯάͱͯ͠Ϩϙʔτ͢Δͱ͍ͬͨ͜ͱ͕Ͱ͖Δɻ

    &4-JOUຊମͷϧʔϧʹՃ͑ͯFTMJOUQMVHJOSFBDUͳͲͷϓϥάΠϯΛಋ ೖ͢Δ͜ͱͰຊମʹͳ͍ϧʔϧͰ΋ίʔυΛνΣοΫ͢Δ͜ͱ͕Ͱ͖Δɻ
  24. ©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ -JOUFS'PSNBUUFS 1SFUUJFS͸ίϛϡχςΟʹΑͬͯ͜ͷه๏͕͍͍ΑͶܾͬͯ·ͬͨϧʔϧ ʹԊͬͯϑΥʔϚοτͯ͘͠ΕΔ'PSNBUUFSɻͱ͸͍͑ઃఆʹΑͬͯม׵ ͢Δه๏͕બ΂ΔͷͰPQJOJPOBUFEͳ'PSNBUUFSͱͯ͠͸੒ޭ͍ͯ͠ ΔɻϓϥάΠϯ΋ॆ࣮͍ͯͯ͠+BWB4DSJQU5ZQF4DSJQUҎ֎ͷݴޠ΋α ϙʔτ͞Ε͍ͯΔɻ

    8BOUFEMZͰ͸8BOUFEMZඪ४ͷ&4-JOUDPOpH΍1SFUUJFSDPOpHΛ OQNͰ഑৴͍ͯ͠ΔͷͰͦΕΛಋೖ͢Δ͔ɺXBOUFEMZGSPMJOUͰ։ൃ͠ ͍ͯΔGSPMJOUΛ࢖ͬͯ-JOU'PSNBU͢ΔΑ͏ʹ͍ͯ͠Δɻ
  25. ©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ -JOUFS'PSNBUUFS%&.0 8BOUFEMZͰ࡞͍ͬͯΔXBOUFEMZGSPMJOUͷ%&.0 IUUQTHJUIVCDPNXBOUFEMZGSPMJOU ҎԼͷίʔυΛHJUDPNNJU͠Α͏ͱͨ͠ͱ͖ʹͲ͏ͳΔ͔ɻ8BOUFEMZ Ͱ͸&4-JOUͷOPVOVTFEWBST͕ΤϥʔʹͳΔΑ͏ʹઃఆ͞Ε͍ͯΔɻ const

    a = 1;
  26. ©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ -JOUFS'PSNBUUFS%&.0

  27. ©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ 6*ϥΠϒϥϦ 8BOUFEMZͰ͸6*ϥΠϒϥϦͷσϑΝΫτ͸3FBDUʹͳ͖ͬͯͨɻ 3FBDUΛ೥ࠒ͔Βಋೖͯ͠৿࿬͞ΜΛච಄ʹ͍ΖΜͳը໘Ͱ࠾༻͞ Ε͍ͯΔɻ 3FBDUͷ࠷ۙͷಈ޲ͱͯ͠όʔδϣϯͰ)PPLTͱ͍͏ػೳ͕ϦϦʔ ε͞Εͨɻࠓ·Ͱ$MBTTߏจʹΑΔίϯϙʔωϯτͷهड़Ͱίϯϙʔωϯ

    τͷϚ΢ϯτ࣌΍TUBUFQSPQT͕มߋ͞Εͨͱ͖ͳͲͷ-JGFDZDMF"1* ͕GVODUJPODPNQPOFOUͰ΋࢖͑ΔΑ͏ʹͳͬͨ͜ͱɻ
  28. ©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ 6*ϥΠϒϥϦ TUZMFEDPNQPOFOUT͸3FBDUͰ$44Λ͍͍ײ͡ʹ൓өͤ͞ΔͨΊͷϥ ΠϒϥϦɻ3FBDUࣗମTUZMFͱ͍͏QSPQTʹΦϒδΣΫτΛ౉ͨ͠ΒΠϯ ϥΠϯ$44͕൓ө͞ΕΔ͕$44ͷϓϩύςΟͱͦͷΦϒδΣΫτͷରԠΛ ߟ͑ͭͭ΍Δඞཁ͕͋ΔͷͰগ͠໘౗ʹͳΔɻաڈͷࢿ࢈΋࢖͑ͳ͍ͨ Ίɺ$44JO+4΍$44.PEVMFTͳͲͷղܾํ๏͕ఏҊɾ࣮૷͞Ε͖͕ͯͨ

    ࠓͰ͸TUZMFEDPNQPOFOUT͕༗໊ʹͳ͍ͬͯΔɻ 5BHHFEUFNQMBUFMJUFSBMͱ͍͏ه๏Λ࢖ͬͯ+4ϑΝΠϧͷதʹ$44Λ هड़͢ΔͱTUZMFEDPNQPOFOUT͕Ϗϧυ࣌΍ϥϯλΠϜͰ$44ʹม׵͠ ͯΫϥεΛࢦఆ͢Δܗʹͳ͍ͬͯΔɻ
  29. ©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*Λ ࢖ͬͯॻ͖௚͢ͱͨ͠ΒͲ͏͢Δʁ
  30. ©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ͷ૊Έ߹Θ͕ͤඞ ཁɻͪΐͬͱ೉͍͚͠Ͳɺڧྗͳ΋ͷͳͷͰษڧͯ͠ Έͯ΄͍͠ɻ
  31. ©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ ςετ ϑϩϯτΤϯυͰ΋ςετΛ͢Δํ਑ͳͷͰ঺հɻ 8BOUFEMZͰ͸ςετϑϨʔϜϫʔΫͱͯ͠+FTUΛ࠾༻͍ͯ͠Δɻ .PDIBͱ͔,BSNBͱ͔ଘࡏ͢Δ͚Ͳςετͷ݁Ռ͕ݟ΍͔ͬͨ͢Γઃ ఆͷ͠΍͕͋ͬͯ͢͞࢖͍΍͍͢ɻ+FTU͸/PEFKTͷϓϩδΣΫτͰ΋࢖ ΘΕΔ͕ɺKTEPNͱ͍͏/PEFKT؀ڥͰ΋%0."1*͕࢖͑ΔϥΠϒϥ

    ϦΛ࢖ͬͯϑϩϯτΤϯυͷςετ΋Ͱ͖Δɻ DSFBUFSFBDUBQQͱ͔Λ࢖ͬͨͱ͖ʹ΋σϑΥϧτͰ࠾༻͞Ε͍ͯΔςε τϑϨʔϜϫʔΫͳͷͰ͓֮͑ͯ͘Ձ஋͸͋Δɻ
  32. ©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ ςετ 8BOUFEMZͷϑϩϯτΤϯυϓϩδΣΫτͰ͸3FBDUͰίϯϙʔωϯτΛ ॻ͍ͨͱ͖ʹͦͷݟͨ໨ͷௐ੔ͱ͔Λίϯϙʔωϯτ୯ҐͰͰ͖ΔΑ͏ʹ 4UPSZCPPLͱ͍͏πʔϧΛ࢖͍ͬͯΔɻ͜Ε͸ςετϑϨʔϜϫʔΫͱͷ JOUFHSBUJPO͕͔ͬ͠Γ͍ͯͯ͠ɺ+FTUΛ࢖͍ͬͯΔ؀ڥͰ͸TOBQTIPU UFTUJOH͕Ͱ͖Δɻ

    ͜ͷͭΛ࢖ͬͯϩδοΫ෦෼ɾίϯϙʔωϯτͳͲͷϏϡʔ෦෼ͷςετ Λ໢ཏ͍ͯ͘͜͠ͱͰܧଓతͳ։ൃΛࢧ͑ΔΑ͏ʹͯ͠΄͍͠ɻ
  33. ©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);
  34. ©2019 Wantedly, Inc. ͜͏͍ͬͨΑ͏ʹͨ͘͞ΜͷπʔϧΛ࢖ͬͯ 8BOUFEMZͷαʔϏε͕ͨͪ࡞ΒΕ͍ͯΔ ঺հͨ͠ͷ͸Ұ෦෼ɻଞʹͲΜͳπʔϧ͕ੈքதͰ ࢖ΘΕ͍ͯΔ͔͸࣍ͷσϞάϥϑΟʔ͕ৄ͍͠ 4UBUFPG+BWB4DSJQUIUUQTTUBUFPGKTDPN ϑϩϯτΤϯυͷ͋ΔαʔϏε

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

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

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

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

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

    IUUQTPWFSSFBDUFEJPNBLJOHTFUJOUFSWBMEFDMBSBUJWFXJUISFBDUIPPLT ࢀߟ