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

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

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

6b7ca499772f1ea867f6133778c77bbe?s=128

Takahiro Tsuchiya

April 03, 2019
Tweet

Transcript

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

  2. @corocn ͜ΖͪΌΜ

  3. ࣗݾ঺հ • ࢓ࣄ: Ruby on Rails / AWS, GCP /

    Vue.js • ڵຯ: WebAuthn / ύεϫʔυϨεೝূ • ෭ۀ: TypeScript + AWS
 
 
 bosyu ٕज़ॻࣥච Ξϯόαμʔ׆ಈ ٕज़ॻయ6
 ʢدߘʣ nfug amanogawa.rb اըத ΤϯδχΞ࠾༻
  4. ࠓ೔ͷ࿩ • TypeScript + Express ΛֶͿ࣌ʹ΍ͬͨ͜ͱ • ओʹ։ൃ࣌ͷίϯύΠϧ΍σόοάํ๏શવ Θ͔Βͳ͔ͬͨͷͰͦͷ࿩ •

    খωλʢ࣌ؒ༨ͬͨΒʣ
  5. αʔόʔαΠυTS ॻ͍ͯΔਓʁ

  6. ։ൃʹ͋ͨͬͯಡΜͩ΋ͷ • “TypeScript Deep Dive” ඞಡ • Express ެࣜϦϑΝϨϯε Ұ௨Γ

    • Express γϯϓϧͰ෼͔Γ΍͍͢ • middlewareͷ࢓૊ΈͱΤϥʔϋϯυϦϯά पΓΛࡶʹ࣮૷Ͱ͖ͨΒΦοέʔ • ܕγεςϜ͸ৄ͘͠ͳ͍ͷͰదٓௐ΂ͳ͕Β
  7. ͜ΕͰຊ౰ʹ૸Γग़ͤΔʁ

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

  9. Node.js

  10. Node.jsͷσόοά • console.log ͰؤுΔ • node —inspect dist/index.js • debugger

    ͕ىಈ • IDEʢVSCode/IntelliJʣ͸͍ͭ͜ʹΞλονͯ͠σόοά • —debug-brk ΦϓγϣϯΛ෇͚Δͱ1ߦ໨Ͱࢭ·ͬͯ͘Ε Δ •
  11. Node.jsͷσόοά (2) • debugger ͕ىಈ͍ͯ͠Δঢ়ଶͰ
 chrome://inspect ʹΞΫηε͢Δͱɺ Chromeͷ։ൃऀπʔϧͰσόοάͰ͖Δ •

  12. Express

  13. 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
  14. None
  15. ։ൃπʔϧ

  16. ։ൃπʔϧ • Visual Studio Code Λਪ঑͢Δਓଟ਺ • Rails։ൃʹRubyMineΛ࢖͍ͬͯΔͷͰ TS΋ IntelliJͰॻ͘͜ͱʹͨ͠

    • ΩʔόΠϯυ͕֮͑ΒΕͳ͍͆ • εΠονϯάίετߴ͍ • σόοΨ͸ඇৗʹߴੑೳͳͷͰυγυγ࢖͏΂͖
  17. VSCode • launch.json Ͱઃఆ͢Ε͹ಈ͘ʢଟ෼ʣ • ௥ՃೖΕΔ΋Μͳ͠

  18. IntelliJ • Edit Configurations ͔Β npm run ίϚϯυ ܦ༝Ͱىಈ •

    ͪ͜Β΋উखʹΞλονͯ͘͠ΕΔ
  19. Α͏΍͘TypeScriptͷ࿩

  20. ։ൃํ๏͸2छྨʁ • tsc ͰίϯύΠϧͯ͠ .js Λ࣮ߦ • ts-nodeͰ .ts Λ௚઀࣮ߦ

    • ݁࿦͔Βݴ͏ͱޙऀͷ͕ྑ͔ͬͨ
  21. 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ճมߋݕ஌ͯ͠࠶ىಈ͢ΔͱϒϨʔΫϙΠϯ τ͕ޮ͔ͳ͘ͳΔͷͰͭΒ͍ɾɾɾʢόάʁʣ
  22. 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’ ͬͯॻ͍ͨΒ͏·͘ಈ͔ͳ͔ͬͨ

  23. ts-node ͷ৔߹ ʢଓ͖ʣ • IntelliJͷσόοΨͱͷ૬ੑ΋໰୊ͳ͍ • ϒϨʔΫϙΠϯτఀࢭதʹϑΝΠϧ࿔ΔͱόάΔ • js ʹม׵ͯ͠ಈ͔͢΂͖ͩͱࢥ͍͕ͬͯͨɾɾɾ

    • ຊ൪΋ ts-node Ͱӡ༻ͯ͠Δࣄྫ͋ΔΒ͍͠ • Φʔόʔϔουؾʹ͠ͳ͚Ε͹໰୊ͳ͠ʁ

  24. ts-node ਪ঑ TypeScript Deep Dive΋
 ͦ͏ݴ͍ͬͯΔ

  25. ͕࣌ؒ͋Ε͹༨ஊ

  26. ϛυϧ΢ΣΞબఆ • ϩΪϯά: morgan • CORS: cors • ೝূ: passport

    • ORM: ࣍ͷϖʔδͰ࿩͢ • ඞཁͳ΋ͷ͸ἧ͍ͬͯΔ͕ࡉ͔͍ϥΠϒϥϦ͕ଟͯ͘ೖΕΔ ͷ໘౗ɻ • Express͡Όͳͯ͘΋ͬͱ෼ް͍ϑϨʔϜϫʔΫͷ΄͏͕͍ ͍͔΋ɻLoopbackͱ͔ʁ
  27. Which ORM is best for Node.js? • Sequelieze.js • ࿝ฮ

    • TypeORM • Ψνόά౿ΜͰ٧Ήɻߋ৽ස౓௿Ί͔΋ • Objection.js + Knex.js • Ұ൪෼͔Γ΍͔ͬͨ͢
  28. TypeSyncศར • ར༻ՄೳͳܕఆٛϑΝΠϧΛґଘʹಥͬࠐΜ Ͱ͘ΕΔ • github.com/jeffijoe/typesync • ϥΠϒϥϦΛೖΕΔ࣌ʹຖճ npm install

    @types/hoge ͢Δͷ͸໘౗
  29. ·ͱΊ

  30. ޮ཰తʹ։ൃ͢ΔͨΊʹ
 σόοάํ๏͸཈͓͑ͯ͜͏

  31. ׬