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

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

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