Frontend Engineering at Wantedly

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

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

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)VC
   ZBNBEBZVLJ
   5XJUUFS
   JLVVZBEBNBZ w 8BOUFEMZ
   $IBU
   Ͱ೥ؒ಺ఆऀΠϯλʔϯ
   w 8BOUFEMZ
   1FPQMF
   Ͱ೥ؒΞϓϦέʔγϣϯΤϯδχΞ
   w 8BOUFEMZ
   7JTJU
   Ͱ೥ऑΞϓϦέʔγϣϯΤϯδχΞ
   w ݱࡏ
   *OGSBTUSVDUVSF
   4RVBE
   ͰϑϩϯτΤϯυͷج൫։ൃ
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
   ຊମ
   3VCZ
   PO
   3BJMT
   Ͱ࡞ΒΕͨαʔϏεͰϑϩϯτΤϯ υʹ࢖ΘΕ͍ͯΔٕज़͸ҎԼͷ௨Γ
   )BNM
   
   4BTT
   K2VFSZ
   
   "OHVMBS+4
   
   #BDLCPOF
   
   3FBDU
8. ©2019 Wantedly, Inc. ϑϩϯτΤϯυͷ͋ΔαʔϏε Wantedly People https://people.wantedly.com ໊ࢗ؅ཧΞϓϦ
   8BOUFEMZ
   1FPQMF
   ͷ΢Σϒ൛
   ࣾ಺ͰॳΊͯͷ
   3FBDU
   Ͱ࣮૷͞Εͨ
   41"
   ɻϑϩϯτ Τϯυʹ࢖ΘΕ͍ͯΔٕज़͸ҎԼͷ௨Γ
   3FBDU
   
   TUZMFEDPNQPOFOUT
9. ©2019 Wantedly, Inc. ϑϩϯτΤϯυͷ͋ΔαʔϏε Wantedly Chat https://m.wantedly.com ϝοηʔδϯάΞϓϦͷ
   8BOUFEMZ
   $IBU
   ࣾ಺Ͱ͸ॳΊͯͷ
   41"
   
   Ͱ
   &MFDUSPO
   Λ࢖ͬͯσεΫ τοϓΞϓϦ΋഑෍͍ͯ͠ΔɻϑϩϯτΤϯυʹ࢖ ΘΕ͍ͯΔٕज़͸ҎԼͷ௨Γ
   "OHVMBS+4
   
   4BTT
   
   'JSFCBTF
10. ©2019 Wantedly, Inc. ঺հͨͭ͠Ͱ࢖ΘΕ͍ͯΔϏϡʔΛඳը͢Δπʔϧ ͚ͩͰ
    )BNM3FBDU"OHVMBS+4
    ͱͨ͘͞Μ͋Δ
    ࣾ಺πʔϧ·Ͱ޿͛ͨΒ
    7VF
    ΋
    ϑϩϯτΤϯυͷ͋ΔαʔϏε
11. ©2019 Wantedly, Inc. ͳͥଟछଟ༷ͳϥΠϒϥϦ࢖ͬͯΔ ϑϩϯτΤϯυͷ͋ΔαʔϏε
12. ©2019 Wantedly, Inc. ͳͥଟछଟ༷ͳϥΠϒϥϦΛ࢖ͬͯΔ Real world es201x and future αʔϏεͰϑϩϯτΤϯυͷ։ൃΛ࢝͠Ίͨ࣌఺Ͱͷྲྀ ߦΓΛબ୒͍ͯ͠Δ͜ͱ͕ଟ͍ɻ࣌ྲྀʹ৐͔ͬͬͨํ͕ ྑ͍఺΋ଟ͍ͨΊ
    8BOUFEMZ
    7JTJU͸೥͔ΒͳͷͰK2VFSZ
    
    #BDLCPOFɻͦͷޙ"OHVMBS+4Λܦͯ3FBDU
    
    3FEVY
    8BOUFEMZ
    1FPQMF
    ͸೥͔ΒͳͷͰ
    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. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ ύοέʔδϚωʔδϟ OQN
    
    ZBSO
    ͷ;͕ͨͭΑ͘࢖ΘΕΔɻ
    ͲͪΒ΋
    MPDLpMF
    Λαϙʔτ͍ͯ͠Δ͠ɺ࠷ۙͰ͸
    OQN
    ͷ࣮ߦ଎౓΋଎ ͘ͳ͖͍ͬͯͯΔͷͰ͕ࠩ͋·Γͳ͘ͳ͖ͬͯͨҹ৅ɻϨδετϦ͕ҧ͏ ͱ͔͸͋Δ
    OQN
    ͸
    /PEF
    ΛΠϯετʔϧ͢Δͱ͖ʹಉࠝ͞Ε͍ͯΔ
    ZBSO
    ͸ࣗ෼ͰΠϯετʔϧ͢Δඞཁ͕͋ΔɻOQN
    
    )PNFCSFX
    
    ༻ҙ͞ ΕͨΠϯετʔϥͰΠϯετʔϧͰ͖Δɻ
17. ©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ ύοέʔδϚωʔδϟ ͲͪΒ΋Πϯετʔϧͨ͠΋ͷ͸
    OPEF@NPEVMFT
    ҎԼʹ഑ஔ͞ΕΔ
    ࣮ߦՄೳͳ΋ͷ͸
    OPEF@NPEVMFTCJO
    σΟϨΫτϦҎԼʹϑΝΠϧ͕͋ ΔͷͰ
    OPEF@NPEVMFTCJOCBCFM
    ͱ͔Ͱ࣮ߦͰ͖ΔɻίϚϯυ͔Β࣮ ߦ͢Δʹ͸
    ZBSO
    CBCFM
    ͱ͔Ͱ࣮ߦͰ͖Δ͠ɺOQN
    ͷํ͸
    OQY
    ͱ͍͏ί Ϛϯυ͕͋ΔͷͰͦΕΛ࢖ͬͯ
    OQY
    CBCFM
    ͱ͔͢Ε͹࣮ߦͰ͖Δ
    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ͷ5ZQF4DSJQU
    QMVHJO͸"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
    ͱͯ͠͸੒ޭ͍ͯ͠ ΔɻϓϥάΠϯ΋ॆ࣮͍ͯͯ͠
    +BWB4DSJQU
    
    5ZQF4DSJQU
    Ҏ֎ͷݴޠ΋α ϙʔτ͞Ε͍ͯΔɻ
    8BOUFEMZ
    Ͱ͸
    8BOUFEMZ
    ඪ४ͷ
    &4-JOU
    DPOpH
    ΍
    1SFUUJFS
    DPOpH
    Λ
    OQN
    Ͱ഑৴͍ͯ͠ΔͷͰͦΕΛಋೖ͢Δ͔ɺXBOUFEMZGSPMJOU
    Ͱ։ൃ͠ ͍ͯΔ
    GSPMJOU
    Λ࢖ͬͯ
    -JOU
    
    'PSNBU
    ͢ΔΑ͏ʹ͍ͯ͠Δɻ
25. ©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ -JOUFS
    
    'PSNBUUFS
    
    %&.0 8BOUFEMZ
    Ͱ࡞͍ͬͯΔ
    XBOUFEMZGSPMJOU
    ͷ
    %&.0
    IUUQTHJUIVCDPNXBOUFEMZGSPMJOU
    ҎԼͷίʔυΛ
    HJU
    DPNNJU
    ͠Α͏ͱͨ͠ͱ͖ʹͲ͏ͳΔ͔ɻ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
    ߏจʹΑΔίϯϙʔωϯτͷهड़Ͱίϯϙʔωϯ τͷϚ΢ϯτ࣌΍
    TUBUF
    
    QSPQT
    ͕มߋ͞Εͨͱ͖ͳͲͷ
    -JGFDZDMF
    "1*
    ͕
    GVODUJPO
    DPNQPOFOU
    Ͱ΋࢖͑ΔΑ͏ʹͳͬͨ͜ͱɻ
28. ©2019 Wantedly, Inc. ϑϩϯτΤϯυΛ։ൃ͢Δͱ͖ʹ࢖͍ͬͯΔٕज़ 6*
    ϥΠϒϥϦ TUZMFEDPNQPOFOUT
    ͸
    3FBDU
    Ͱ
    $44
    Λ͍͍ײ͡ʹ൓өͤ͞ΔͨΊͷϥ ΠϒϥϦɻ3FBDU
    ࣗମ
    TUZMF
    ͱ͍͏
    QSPQT
    ʹΦϒδΣΫτΛ౉ͨ͠ΒΠϯ ϥΠϯ
    $44
    ͕൓ө͞ΕΔ͕
    $44
    ͷϓϩύςΟͱͦͷΦϒδΣΫτͷରԠΛ ߟ͑ͭͭ΍Δඞཁ͕͋ΔͷͰগ͠໘౗ʹͳΔɻաڈͷࢿ࢈΋࢖͑ͳ͍ͨ Ίɺ$44
    JO
    +4
    ΍
    $44
    .PEVMFT
    ͳͲͷղܾํ๏͕ఏҊɾ࣮૷͞Ε͖͕ͯͨ ࠓͰ͸
    TUZMFEDPNQPOFOUT
    ͕༗໊ʹͳ͍ͬͯΔɻ
    5BHHFE
    UFNQMBUF
    MJUFSBM
    ͱ͍͏ه๏Λ࢖ͬͯ
    +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*
    Λ ࢖ͬͯॻ͖௚͢ͱͨ͠ΒͲ͏͢Δʁ
    VTF4UBUF
    
    VTF3FG
    
    VTF&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
    ͷ
    FWFOU
    MJTUFOFS
    ΛςετͷதͰൃՐͤ͞Δํ๏ͱ͔͜Μͳ; ͏ʹͰ͖Δɻ
    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
    ͷαʔϏε͕ͨͪ࡞ΒΕ͍ͯΔ
    ঺հͨ͠ͷ͸Ұ෦෼ɻଞʹͲΜͳπʔϧ͕ੈքதͰ ࢖ΘΕ͍ͯΔ͔͸࣍ͷσϞάϥϑΟʔ͕ৄ͍͠
    4UBUF
    PG
    +BWB4DSJQU
    
    
    IUUQTTUBUFPGKTDPN ϑϩϯτΤϯυͷ͋ΔαʔϏε
35. ©2019 Wantedly, Inc. ·ͱΊ ఻͔͑ͨͬͨ͜ͱ
36. ©2019 Wantedly, Inc. ͜ͷߨٛͰ
    8BOUFEMZ
    ͷϑϩϯτΤϯυ։ൃ͕
 ໢ཏͰ͖ͨͱ͸ࢥ͍ͬͯͳ͍
    ϑϩϯτΤϯυͷٕज़͸ਐԽ͕ܹ͍͠ͱࢥΘΕ͕ͪ ͚ͩͲɺͦ΋ͦ΋ٕज़ͷਐԽ͕ܹ͍͠ ·ͱΊ
37. ©2019 Wantedly, Inc. ࠓճ࿩ͨ͜͠ͱ͕Θ͔͍ͬͯΕ͹
    8BOUFEMZ
    ͷ
 ϑϩϯτΤϯυͷ։ൃ͸Ͱ͖ΔΑ͏ʹͳ͍ͬͯΔഺ
    ϑϩϯτΤϯυͷٕज़Λ৮Δͷ͸ָ͍͠͠ɺϢʔ βʔʹ௚ʹՁ஋Λಧ͚ΒΕΔ෦෼ͳͷͰ໘ന͍
    8BOUFEMZ
    ͷϑϩϯτΤϯυΛྑ͘͠Α͏ ఻͔͑ͨͬͨ͜ͱ
38. ©2019 Wantedly, Inc. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    ऴΘΓ
39. ©2019 Wantedly, Inc. w 3FBM
    XPSME
    FTY
    BOE
    GVUVSF
    w IUUQTTQFBLFSEFDLDPNNJ[DIJSFBMXPSMEFTYBOEGVUVSF
    w .BLJOH
    TFU*OUFSWBM
    %FDMBSBUJWF
    XJUI
    3FBDU
    )PPLT
    w IUUQTPWFSSFBDUFEJPNBLJOHTFUJOUFSWBMEFDMBSBUJWFXJUISFBDUIPPLT ࢀߟ