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

TypeScript+Expressでサーバーサイド開発やってみた / typescript_express_debugging

TypeScript+Expressでサーバーサイド開発やってみた / typescript_express_debugging

TypeScript + Expressでサーバーサイド開発やってみた。主にツールやデバッグ周りの話をしました。ぜんぜんわからない、おれはふんいきでデバッグしている。

Takahiro Tsuchiya

April 03, 2019
Tweet

More Decks by Takahiro Tsuchiya

Other Decks in Programming

Transcript

  1. 5ZQF4DSJQU&YQSFTTͰ
    αʔόʔαΠυ։ൃ΍ͬͯΈͨ
    TypeScriptษڧձ
    2019/04/03ʢਫʣ
    Takahiro Tsuchiya / @corocn

    View full-size slide

  2. @corocn
    ͜ΖͪΌΜ

    View full-size slide

  3. ࣗݾ঺հ
    • ࢓ࣄ: Ruby on Rails / AWS, GCP / Vue.js
    • ڵຯ: WebAuthn / ύεϫʔυϨεೝূ
    • ෭ۀ: TypeScript + AWS



    bosyu
    ٕज़ॻࣥච
    Ξϯόαμʔ׆ಈ
    ٕज़ॻయ6

    ʢدߘʣ
    nfug amanogawa.rb
    اըத
    ΤϯδχΞ࠾༻

    View full-size slide

  4. ࠓ೔ͷ࿩
    • TypeScript + Express ΛֶͿ࣌ʹ΍ͬͨ͜ͱ
    • ओʹ։ൃ࣌ͷίϯύΠϧ΍σόοάํ๏શવ
    Θ͔Βͳ͔ͬͨͷͰͦͷ࿩
    • খωλʢ࣌ؒ༨ͬͨΒʣ

    View full-size slide

  5. αʔόʔαΠυTS
    ॻ͍ͯΔਓʁ

    View full-size slide

  6. ։ൃʹ͋ͨͬͯಡΜͩ΋ͷ
    • “TypeScript Deep Dive” ඞಡ
    • Express ެࣜϦϑΝϨϯε Ұ௨Γ
    • Express γϯϓϧͰ෼͔Γ΍͍͢
    • middlewareͷ࢓૊ΈͱΤϥʔϋϯυϦϯά
    पΓΛࡶʹ࣮૷Ͱ͖ͨΒΦοέʔ
    • ܕγεςϜ͸ৄ͘͠ͳ͍ͷͰదٓௐ΂ͳ͕Β

    View full-size slide

  7. ͜ΕͰຊ౰ʹ૸Γग़ͤΔʁ

    View full-size slide

  8. σόοάํ๏ʹ͍ͭͯ
    ཈͓͑ͯ͘ͱྑͦ͞͏ͩͧʁ

    View full-size slide

  9. Node.jsͷσόοά
    • console.log ͰؤுΔ
    • node —inspect dist/index.js
    • debugger ͕ىಈ
    • IDEʢVSCode/IntelliJʣ͸͍ͭ͜ʹΞλονͯ͠σόοά
    • —debug-brk ΦϓγϣϯΛ෇͚Δͱ1ߦ໨Ͱࢭ·ͬͯ͘Ε
    Δ

    View full-size slide

  10. Node.jsͷσόοά (2)
    • debugger ͕ىಈ͍ͯ͠Δঢ়ଶͰ

    chrome://inspect ʹΞΫηε͢Δͱɺ
    Chromeͷ։ൃऀπʔϧͰσόοάͰ͖Δ

    View full-size slide

  11. Expressͷσόοάʢϩάʣ
    • ؀ڥม਺ DEBUG Λࢦఆ͢Δ
    • DEBUG=* node —inspect dist/index.js
    • DEBUG=express:router ͷΑ͏ʹߜΓࠐΊΔ
    • middlewareͷಡΈࠐΈॱ΋֬ೝͰ͖Δ
    • github.com/visionmedia/debug
    • const logger = require(‘debug’)(‘hoge’)
    • logger(‘hello world’)
    • DEBUG=hoge

    View full-size slide

  12. ։ൃπʔϧ
    • Visual Studio Code Λਪ঑͢Δਓଟ਺
    • Rails։ൃʹRubyMineΛ࢖͍ͬͯΔͷͰ TS΋
    IntelliJͰॻ͘͜ͱʹͨ͠
    • ΩʔόΠϯυ͕֮͑ΒΕͳ͍͆
    • εΠονϯάίετߴ͍
    • σόοΨ͸ඇৗʹߴੑೳͳͷͰυγυγ࢖͏΂͖

    View full-size slide

  13. VSCode
    • launch.json Ͱઃఆ͢Ε͹ಈ͘ʢଟ෼ʣ
    • ௥ՃೖΕΔ΋Μͳ͠

    View full-size slide

  14. IntelliJ
    • Edit Configurations ͔Β npm run ίϚϯυ
    ܦ༝Ͱىಈ
    • ͪ͜Β΋উखʹΞλονͯ͘͠ΕΔ

    View full-size slide

  15. Α͏΍͘TypeScriptͷ࿩

    View full-size slide

  16. ։ൃํ๏͸2छྨʁ
    • tsc ͰίϯύΠϧͯ͠ .js Λ࣮ߦ
    • ts-nodeͰ .ts Λ௚઀࣮ߦ
    • ݁࿦͔Βݴ͏ͱޙऀͷ͕ྑ͔ͬͨ

    View full-size slide

  17. tsc ͷ৔߹
    • tsc or tsc —watchʢincrementalʣ
    • src/**/*.ts => dist/**/*.js ͱม׵͢Δ
    • scripts: { 

    dev: node —inspect dist/index.js,

    watch: tsc-watch —onSuccess ‘npm run dev’

    }
    • tsc-watch Ͱมߋݕ஌ˠίϯύΠϧˠ࠶ىಈ
    • IntelliJͩͱ1ճมߋݕ஌ͯ͠࠶ىಈ͢ΔͱϒϨʔΫϙΠϯ
    τ͕ޮ͔ͳ͘ͳΔͷͰͭΒ͍ɾɾɾʢόάʁʣ

    View full-size slide

  18. ts-node ͷ৔߹
    • ͦ΋ͦ΋ts-nodeͬͯͳΜͧ
    • TypeScript execution and REPL for node.js
    • REPL: Read-Eval-Print Loop / ର࿩ܕධՁ؀ڥ
    • .ts ϑΝΠϧΛ௚઀࣮ߦͰ͖Δศར
    • scripts: { 

    dev: node --require ts-node/register src/index.ts,

    watch: "nodemon --watch 'src/**/*.ts' --exec ‘ts-node’ src/index.ts”

    }
    • —exec ‘npm run dev’ ͬͯॻ͍ͨΒ͏·͘ಈ͔ͳ͔ͬͨ


    View full-size slide

  19. ts-node ͷ৔߹ ʢଓ͖ʣ
    • IntelliJͷσόοΨͱͷ૬ੑ΋໰୊ͳ͍
    • ϒϨʔΫϙΠϯτఀࢭதʹϑΝΠϧ࿔ΔͱόάΔ
    • js ʹม׵ͯ͠ಈ͔͢΂͖ͩͱࢥ͍͕ͬͯͨɾɾɾ
    • ຊ൪΋ ts-node Ͱӡ༻ͯ͠Δࣄྫ͋ΔΒ͍͠
    • Φʔόʔϔουؾʹ͠ͳ͚Ε͹໰୊ͳ͠ʁ


    View full-size slide

  20. ts-node ਪ঑
    TypeScript Deep Dive΋

    ͦ͏ݴ͍ͬͯΔ

    View full-size slide

  21. ͕࣌ؒ͋Ε͹༨ஊ

    View full-size slide

  22. ϛυϧ΢ΣΞબఆ
    • ϩΪϯά: morgan
    • CORS: cors
    • ೝূ: passport
    • ORM: ࣍ͷϖʔδͰ࿩͢
    • ඞཁͳ΋ͷ͸ἧ͍ͬͯΔ͕ࡉ͔͍ϥΠϒϥϦ͕ଟͯ͘ೖΕΔ
    ͷ໘౗ɻ
    • Express͡Όͳͯ͘΋ͬͱ෼ް͍ϑϨʔϜϫʔΫͷ΄͏͕͍
    ͍͔΋ɻLoopbackͱ͔ʁ

    View full-size slide

  23. Which ORM is best for Node.js?
    • Sequelieze.js
    • ࿝ฮ
    • TypeORM
    • Ψνόά౿ΜͰ٧Ήɻߋ৽ස౓௿Ί͔΋
    • Objection.js + Knex.js
    • Ұ൪෼͔Γ΍͔ͬͨ͢

    View full-size slide

  24. TypeSyncศར
    • ར༻ՄೳͳܕఆٛϑΝΠϧΛґଘʹಥͬࠐΜ
    Ͱ͘ΕΔ
    • github.com/jeffijoe/typesync
    • ϥΠϒϥϦΛೖΕΔ࣌ʹຖճ npm install
    @types/hoge ͢Δͷ͸໘౗

    View full-size slide

  25. ޮ཰తʹ։ൃ͢ΔͨΊʹ

    σόοάํ๏͸཈͓͑ͯ͜͏

    View full-size slide