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

TypeScript in Wantedly

Kento Moriwaki
May 29, 2018
590

TypeScript in Wantedly

Kento Moriwaki

May 29, 2018
Tweet

Transcript

  1. ©2018 Wantedly, Inc.
    TypeScript in Wantedly
    Roppongi.js#3
    29.May.2018 - Kento Moriwaki

    View full-size slide

  2. ©2018 Wantedly, Inc.
    5ZQF4DSJQUಋೖ͠·ͨ͠

    View full-size slide

  3. ©2018 Wantedly, Inc.
    8BOUFEMZ಺ͷձࣾϖʔδͷ
    ϦχϡʔΞϧͨ͠
    443Λಋೖ͢Δඞཁ͕͋Γɺ
    શମͷߏ੒Λݟ௚ͨ͠
    ΋ͱ΋ͱܕ͕΄͍͠੠͸ଟ͔ͬ
    ͨͷͰɺ͍͍λΠϛϯάͩͱ
    ࢥ͍ಋೖͨ͠
    എܠ

    View full-size slide

  4. ©2018 Wantedly, Inc.
    ೖΕͯΑ͔ͬͨ

    View full-size slide

  5. ©2018 Wantedly, Inc.
    ҆৺ͯ͠ίʔυΛมߋͰ͖Δ
    w 4UPSFͷߏ଄Λม͑ͨΓͨ͠ͱ͖ɺมߋ͢΂͖Օॴ͕͙͢ʹΘ͔Δ
    ิ׬͕ޮ͘
    w λΠϐϯά਺΋ݮΔ͠ɺ5ZQP΋ݮΔ
    Τϥʔ͕ݮΔ
    w VOEFpOFEΤϥʔ͕΄΅ແ͘ͳΔ
    Α͔ͬͨͱ͜Ζ

    View full-size slide

  6. ©2018 Wantedly, Inc.
    ͜͏΍ͬͯಋೖ͠·ͨ͠

    View full-size slide

  7. ©2018 Wantedly, Inc.
    AUTDAͰϏϧυ͠ͳ͍

    View full-size slide

  8. ©2018 Wantedly, Inc.
    ϏϧυपΓ͸΍͸ΓΊΜͲ͍͘͞
    w XFCQBDLʹMPBEFSΛ௥Ճͯ͠ɺͦΕΛ443༻ͷϏϧυ΋มߋͯ͠ɺKFTUͰUTΛϏϧυ͢Δํ
    ๏Λௐ΂ͯɻɻઃఆपΓ͸΍͸ΓΊΜͲ͍͘͞ɻ
    ݁ہCBCFM͸ඞཁ
    w QPMZpMMೖΕͨΓɺSFBDUIPUMPBEFSͷϓϥάΠϯ΍ɺTUZMFEDPNQPOFOUTͷ࠷దԽͨ͠Γɺ
    5ZQF4DSJQUͷϏϧυ݁ՌΛCBCFMʹ͔͚Δඞཁ͕Ͳ͏ͯ͠΋ग़ͯ͘Δɻ
    `tsc`ͰϏϧυ͠ͳ͍

    View full-size slide

  9. ©2018 Wantedly, Inc.
    !CBCFMQSFTFUUZQFTDSJQU
    w CBCFMͷUSBOTGPSNͰɺ5ZQF4DSJQUͷγϯλοΫεΛ࡟আͯ͘͠ΕΔૉ੖Β͍͠΍ͭ
    w IUUQTHJUIVCDPNCBCFMCBCFMUSFFNBTUFSQBDLBHFTCBCFMQSFTFUUZQFTDSJQU
    ΍Δ͜ͱ͸CBCFMSDʹҰߦՃ͑Δ͚ͩ
    w QSFTFUT<!CBCFMQSFTFUUZQFTDSJQU>
    w XFCQBDLͷมߋ͸͍Βͳ͍ɺKFTU΋ͦͷ··ಈ͘
    ࣮͸ɺbabel͚ͩͰTypeScriptͷϏϧυ͕Ͱ͖Δ

    View full-size slide

  10. ©2018 Wantedly, Inc.
    CBCFM CFUB
    ͔Β࢖͑Δ
    w ൒೥Ҏ্CFUBͷ։ൃ͕ଓ͍͍ͯΔ
    w CFUB·ͰਐΜͰ͍Δ͚Ͳ
    ׬શͳޓ׵ੑ͸࣋ͨͳ͍
    w جຊతʹ͸ɺ5ZQF4DSJQUͷίʔυ͔ΒܕΞϊςʔγϣϯΛ࡟আ͍ͯ͠Δ͚ͩ
    w AOBNFTQBDFA ADPOTUFOVNAͳͲͷػೳ͕࢖͑ͳ͍
    w XPSLBSPVOE͸ͪΌΜͱ͋Δ
    w AOVNCFSAͳͲͷΩϟετͰͰ͖ͳ͍
    w +49ͱͷ۠ผ͕Ͱ͖ͳ͍ʁABTOVNCFSAΛ࢖͑͹͍͍
    ஫ҙ఺

    View full-size slide

  11. ©2018 Wantedly, Inc.
    AUTDOP&NJUAͰܕνΣοΫͷΈߦ͏
    w MJOUFSͳͲͱಉ͡Ϩϕϧͷѻ͍
    w ܕΤϥʔ͕͋Δͱ$*͕ͪΌΜͱམͪΔΑ͏ʹ͢Δ
    w ։ൃத͸ܕ͕ؒҧ͍ͬͯͯ΋ɺϏϧυ͸ͪΌΜͱͰ͖Δ
    TypeScript͸ܕνΣοΫͷΈ

    View full-size slide

  12. ©2018 Wantedly, Inc.
    UZQFTDSJQUGTB

    View full-size slide

  13. ©2018 Wantedly, Inc.
    3FEVYͷBDUJPO SFEVDFSपΓͲ͏ॻ͍ͨΒ͍͍ͷ
    ͔ϕετϓϥΫςΟε͕Θ͔Βͳ͍
    w ௐ΂ͨΒ͍ΖΜͳॻ͖ํ͕ग़ͯ͘Δ
    w 3FEVYWͰܕఆ͕ٛΑ͘ͳΔΒ͍͠ ౰࣌

    w ͭ·Γࠓ͸Α͘ͳ͍ͷ͔ͳʁ
    w W͸͢ͰʹϦϦʔεࡁΈͰ͕͢Ͳ͏มΘͬͨͷ͔͸஌Βͳ͍

    w Ϩʔϧ͕ཉ͍͠ʂ
    typescript-fsa

    View full-size slide

  14. ©2018 Wantedly, Inc.
    ͦΜͳͱ͖ʹग़ձͬͨͷ͕ɺ5ZQF4DSJQU'4"Ͱ͠
    ͨ
    w IUUQTHJUIVCDPNBJLPWFOUZQFTDSJQUGTB
    w "DUJPO$SFBUPSMJCSBSZGPS5ZQF4DSJQU'4"DPNQMJBOU
    w ͘͢͝ബ͍6UJMJUZ
    w GBNJMZ͕͍͔ͭ͋͘Δ
    w UZQFTDSJQUGTBSFEVDFST
    w UZQFTDSJQUGTBSFEVYUIVOL
    w UZQFTDSJQUGTBSFEVYTBHB
    typescript-fsa

    View full-size slide

  15. ©2018 Wantedly, Inc.
    redux-actionsͱࣅ͍ͯΔ

    View full-size slide

  16. ©2018 Wantedly, Inc.
    ඇಉظͳActionͷఆٛ
    ։࢝ɺऴྃɺࣦഊͷΞΫγϣϯΛಉ࣌ʹ࡞ͬͯ
    ͘ΕΔ

    View full-size slide

  17. ©2018 Wantedly, Inc.
    typescript-fsa-reducers
    SFEVDFSؔ਺ʹɺDBTFͱ͍͏ϝιου͕
    ੜ͑ɺTXJUDIจͷ୅ΘΓʹͦΕΛ࢖͏
    ୈҰҾ਺ʹGTBΞΫγϣϯΛ౉͠ɺୈೋҾ
    ਺ʹͦͷ৔߹ͷSFEVDFSॲཧΛ͔͘ɻ͜
    ͷҾ਺͕͖ͪΜͱܕ͕ܾ·ͬͨ΋ͷ͕౉ͬ
    ͯ͘Δ

    View full-size slide

  18. ©2018 Wantedly, Inc.
    typescript-fsa-redux-thunk
    CJOE5IVOL"DUJPOͰɺඇಉظͳ"DUJPOΛғͬͯॲཧΛ࣮૷͢Δ
    ฦΓ஋͕݁ՌͷQBZMPBEʹͳΔɺEJTQBUDIͷ݁ՌΛJT'BJMVSF JT4VDDFTTͰධՁ͢Δ

    View full-size slide

  19. ©2018 Wantedly, Inc.
    w GTBܗࣜͰ"1*ϦΫΤετΛఆٛͰ͖Δ
    request-creator(internal)

    View full-size slide

  20. ©2018 Wantedly, Inc.
    $PNQPOFOUͷܕఆٛ

    View full-size slide

  21. ©2018 Wantedly, Inc.
    ίϯϙʔωϯτ͝ͱʹຖճܕఆٛΛॻ͘ͷ͸ΊΜͲ
    ͍͘͞
    w ΄΅ಉ͡Α͏ͳQSPQTΛड͚͍ͯΔ৔߹͸ɺ࢖͍·Θ͍ͨ͠
    w ྫ͑͹$PNQBOZ͕͋ͬͨΒɺͲͷϑΟʔϧυ͕ඞཁ͔͸ίϯϙʔωϯτʹΑΔ͕ɺͲ͏͍͏
    ܕͳͷ͔͸ڞ௨ͷ͸ͣ
    ܕఆٛΛ؆୯ʹॻ͖͍ͨ

    View full-size slide

  22. ©2018 Wantedly, Inc.
    WtdModels
    υϝΠϯ಺Ͱڞ௨ͳ&OUJUZΛఆ͍ٛͯ͘͠
    "1*͸ɺ3BJMTͷBDUJWFNPEFMTFSJBMJ[FST
    ʹґଘ͍ͯ͠ΔͷͰɺ֤4FSJBMJ[FSʹରԠ
    ͨ͠ܕΛఆٛ͢Δ

    View full-size slide

  23. ©2018 Wantedly, Inc.
    WtdModels.Partial
    υϝΠϯ಺Ͱڞ௨ͳ&OUJUZΛ΋ͱʹɺͦ
    ͷ$PNQPOFOUͰඞཁͳϑΟʔϧυΛ
    8UE.PEFMT1BSUJBMΛ࢖ͬͯએݴ͢Δɻ
    \$PNQPOFOU^.PEFMTͱ͍͏໊લʹͦͷ
    ܕΛ͓͍ͯɺίϯϙʔωϯτͱҰॹʹ
    FYQPSU͢Δϧʔϧ

    View full-size slide

  24. ©2018 Wantedly, Inc.
    WtdModels.Union
    ෳ਺ͷ$PNQPOFOUΛ૊Έ߹Θͤͨ
    $PNQPOFOUͰ͸ɺͦΕͧΕͷ
    \$PNQPOFOU^.PEFMTͷఆٛΛ
    A8UE.PEFMT6OJPOAͰ݁߹ͯ͠ܕఆٛ͢
    Δɻ
    த਎͸ɺجຊతʹAA͍ͯ͠Δ͚ͩɻ

    View full-size slide

  25. ©2018 Wantedly, Inc.
    ·ͱΊ

    View full-size slide

  26. ©2018 Wantedly, Inc.
    5ZQF4DSJQU͸ੜ࢈ੑߴ͍
    #BCFMΛ࢖͑͹ઃఆ΋ָ
    UZQFTDSJQUGTB͕͓͢͢Ί
    ܕఆָ͕ٛʹ͔͚ΔΑ͏ʹ޻෉͍ͯ͜͠͏
    ·ͱΊ

    View full-size slide

  27. ©2018 Wantedly, Inc.
    ࠷ޙʹ
    we are hiring!
    https://www.wantedly.com/projects/59809

    View full-size slide