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

    View Slide

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

    View Slide

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

    View Slide

  4. ©2019 Wantedly, Inc.
    w 8BOUFEMZͷϑϩϯτΤϯυΤϯδχΞ͸

    ϑϩϯτΤϯυ͚ͩΛॻ͘ਓ͸͍ͳ͍
    w ΋ͪΖΜωοτϫʔΫ΍αʔόͷ஌ࣝ΋ඞཁ
    w Ͳ͏΍ͬͨΒϢʔβʔʹՁ஋Λಧ͚ΒΕΔ͔͕Ұ൪
    ࿩ͷલʹ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. ©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

    View Slide

  13. ©2019 Wantedly, Inc.
    8BOUFEMZͰ࢖͍ͬͯΔٕज़
    ͨ͘͞Μ͋Γ·͢

    View Slide

  14. ©2019 Wantedly, Inc.
    w ͲΜͳٕज़͕͋Δ͔ͱ͔Λ঺հ͢Δ
    w ࣾ಺Ͱͷ࢖ΘΕํͱ͔Λβοϐϯά͢Δײ͡Ͱ

    ঺հ͢ΔͷͰؾʹͳͬͨͱ͖ʹ֤ࣗௐ΂ͯ΄͍͠
    w ࣌ંσϞͭͭ͠঺հ
    w ࠓճ͸ύϑΥʔϚϯεͳͲͷ࿩͸͠ͳ͍
    ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    $ node_modules/.bin/jest --help
    $ yarn jest --help
    $ npx jest --help

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  36. ©2019 Wantedly, Inc.
    ͜ͷߨٛͰ8BOUFEMZͷϑϩϯτΤϯυ։ൃ͕

    ໢ཏͰ͖ͨͱ͸ࢥ͍ͬͯͳ͍
    ϑϩϯτΤϯυͷٕज़͸ਐԽ͕ܹ͍͠ͱࢥΘΕ͕ͪ
    ͚ͩͲɺͦ΋ͦ΋ٕज़ͷਐԽ͕ܹ͍͠
    ·ͱΊ

    View Slide

  37. ©2019 Wantedly, Inc.
    ࠓճ࿩ͨ͜͠ͱ͕Θ͔͍ͬͯΕ͹8BOUFEMZͷ

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

    View Slide

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

    View Slide

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

    View Slide