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

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. ׬