TypeScript+Expressでサーバーサイド開発やってみた / typescript_express_debugging

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@corocn ͜ΖͪΌΜ

Slide 3

Slide 3 text

ࣗݾ঺հ • ࢓ࣄ: Ruby on Rails / AWS, GCP / Vue.js • ڵຯ: WebAuthn / ύεϫʔυϨεೝূ • ෭ۀ: TypeScript + AWS      bosyu ٕज़ॻࣥච Ξϯόαμʔ׆ಈ ٕज़ॻయ6  ʢدߘʣ nfug amanogawa.rb اըத ΤϯδχΞ࠾༻

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

͜ΕͰຊ౰ʹ૸Γग़ͤΔʁ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Node.js

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Node.jsͷσόοά (2) • debugger ͕ىಈ͍ͯ͠Δঢ়ଶͰ  chrome://inspect ʹΞΫηε͢Δͱɺ Chromeͷ։ൃऀπʔϧͰσόοάͰ͖Δ •

Slide 12

Slide 12 text

Express

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

։ൃπʔϧ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

IntelliJ • Edit Conﬁgurations ͔Β npm run ίϚϯυ ܦ༝Ͱىಈ • ͪ͜Β΋উखʹΞλονͯ͘͠ΕΔ

Slide 19

Slide 19 text

Α͏΍͘TypeScriptͷ࿩

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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ճมߋݕ஌ͯ͠࠶ىಈ͢ΔͱϒϨʔΫϙΠϯ τ͕ޮ͔ͳ͘ͳΔͷͰͭΒ͍ɾɾɾʢόάʁʣ

Slide 22

Slide 22 text

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’ ͬͯॻ͍ͨΒ͏·͘ಈ͔ͳ͔ͬͨ 

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

͕࣌ؒ͋Ε͹༨ஊ

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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