Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TypeScript+Expressでサーバーサイド開発やってみた / typescri...
Search
Takahiro Tsuchiya
April 03, 2019
Programming
5
3.3k
TypeScript+Expressでサーバーサイド開発やってみた / typescript_express_debugging
TypeScript + Expressでサーバーサイド開発やってみた。主にツールやデバッグ周りの話をしました。ぜんぜんわからない、おれはふんいきでデバッグしている。
Takahiro Tsuchiya
April 03, 2019
Tweet
Share
More Decks by Takahiro Tsuchiya
See All by Takahiro Tsuchiya
現場のエンジニアから見た採用担当との協働
corocn
7
2.7k
シリーズAをリファラル採用中心に走り抜ける / leaner-referral-engineer-2024
corocn
3
1.7k
捨てて加速するプロダクト開発 / sutete-speedup-product-development
corocn
3
600
リファラル採用にフルベットしてみた
corocn
3
3.4k
エンジニアとプロダクトマネージャーを兼任した1年間を振り返る / pdm-furikaeri
corocn
16
7.3k
育休のすゝめ #devsumi 2023
corocn
3
4.5k
GCPでRubyを動かしている話 / ruby on gcp
corocn
0
850
フルリモートワーカーのデスク選定 / how-to-select-remote-work-desk
corocn
1
570
Auth0イントロダクション / corocn_auth0_day_recap_in_osaka
corocn
1
1k
Other Decks in Programming
See All in Programming
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
130
TypeScriptとGraphQLを活用した変化に強いプロダクト作り
bicstone
4
550
ESLint Rule により事業, 技術ドメインに沿った制約と誓約を敷衍させるアプローチのすゝめ
shinyaigeek
1
2.7k
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
550
私の考える初学者がBlazorできるまでの学習方法
tomokusaba
1
240
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
180
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
590
数値を文字列に整形する際の落とし穴とその解決策(iOSDC2024 ルーキーズLT) / iOSDC Japan 2024 Formatting Floating-Point Numbers
glassfiber
0
250
現代のVueとTypeScript - 型安全の活用術
minako__ph
4
3.1k
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
1
930
Mergeable Libraryで 高速なアプリ起動を実現しよう!
giginet
PRO
1
1.8k
マルチモジュールにおけるテスト最適化
fxwx23
0
110
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
StorybookのUI Testing Handbookを読んだ
zakiyama
25
5k
BBQ
matthewcrist
83
9.1k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Side Projects
sachag
451
42k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
The Invisible Side of Design
smashingmag
295
50k
Being A Developer After 40
akosma
82
580k
Infographics Made Easy
chrislema
239
18k
Designing Experiences People Love
moore
138
23k
Writing Fast Ruby
sferik
623
60k
Transcript
5ZQF4DSJQU &YQSFTTͰ αʔόʔαΠυ։ൃͬͯΈͨ TypeScriptษڧձ 2019/04/03ʢਫʣ Takahiro Tsuchiya / @corocn
@corocn ͜ΖͪΌΜ
ࣗݾհ • ࣄ: Ruby on Rails / AWS, GCP /
Vue.js • ڵຯ: WebAuthn / ύεϫʔυϨεೝূ • ෭ۀ: TypeScript + AWS bosyu ٕज़ॻࣥච Ξϯόαμʔ׆ಈ ٕज़ॻయ6 ʢدߘʣ nfug amanogawa.rb اըத ΤϯδχΞ࠾༻
ࠓͷ • TypeScript + Express ΛֶͿ࣌ʹͬͨ͜ͱ • ओʹ։ൃ࣌ͷίϯύΠϧσόοάํ๏શવ Θ͔Βͳ͔ͬͨͷͰͦͷ •
খωλʢ࣌ؒ༨ͬͨΒʣ
αʔόʔαΠυTS ॻ͍ͯΔਓʁ
։ൃʹ͋ͨͬͯಡΜͩͷ • “TypeScript Deep Dive” ඞಡ • Express ެࣜϦϑΝϨϯε Ұ௨Γ
• Express γϯϓϧͰ͔Γ͍͢ • middlewareͷΈͱΤϥʔϋϯυϦϯά पΓΛࡶʹ࣮Ͱ͖ͨΒΦοέʔ • ܕγεςϜৄ͘͠ͳ͍ͷͰదٓௐͳ͕Β
͜ΕͰຊʹΓग़ͤΔʁ
σόοάํ๏ʹ͍ͭͯ ͓͑ͯ͘ͱྑͦ͞͏ͩͧʁ
Node.js
Node.jsͷσόοά • console.log ͰؤுΔ • node —inspect dist/index.js • debugger
͕ىಈ • IDEʢVSCode/IntelliJʣ͍ͭ͜ʹΞλονͯ͠σόοά • —debug-brk ΦϓγϣϯΛ͚Δͱ1ߦͰࢭ·ͬͯ͘Ε Δ •
Node.jsͷσόοά (2) • debugger ͕ىಈ͍ͯ͠Δঢ়ଶͰ chrome://inspect ʹΞΫηε͢Δͱɺ Chromeͷ։ൃऀπʔϧͰσόοάͰ͖Δ •
Express
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
None
։ൃπʔϧ
։ൃπʔϧ • Visual Studio Code Λਪ͢Δਓଟ • Rails։ൃʹRubyMineΛ͍ͬͯΔͷͰ TS IntelliJͰॻ͘͜ͱʹͨ͠
• ΩʔόΠϯυ͕֮͑ΒΕͳ͍͆ • εΠονϯάίετߴ͍ • σόοΨඇৗʹߴੑೳͳͷͰυγυγ͏͖
VSCode • launch.json Ͱઃఆ͢Εಈ͘ʢଟʣ • ՃೖΕΔΜͳ͠
IntelliJ • Edit Configurations ͔Β npm run ίϚϯυ ܦ༝Ͱىಈ •
ͪ͜ΒউखʹΞλονͯ͘͠ΕΔ
Α͏͘TypeScriptͷ
։ൃํ๏2छྨʁ • tsc ͰίϯύΠϧͯ͠ .js Λ࣮ߦ • ts-nodeͰ .ts Λ࣮ߦ
• ͔݁Βݴ͏ͱޙऀͷ͕ྑ͔ͬͨ
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ճมߋݕͯ͠࠶ىಈ͢ΔͱϒϨʔΫϙΠϯ τ͕ޮ͔ͳ͘ͳΔͷͰͭΒ͍ɾɾɾʢόάʁʣ
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’ ͬͯॻ͍ͨΒ͏·͘ಈ͔ͳ͔ͬͨ
ts-node ͷ߹ ʢଓ͖ʣ • IntelliJͷσόοΨͱͷ૬ੑͳ͍ • ϒϨʔΫϙΠϯτఀࢭதʹϑΝΠϧ࿔ΔͱόάΔ • js ʹมͯ͠ಈ͔͖ͩ͢ͱࢥ͍͕ͬͯͨɾɾɾ
• ຊ൪ ts-node Ͱӡ༻ͯ͠Δࣄྫ͋ΔΒ͍͠ • Φʔόʔϔουؾʹ͠ͳ͚Εͳ͠ʁ
ts-node ਪ TypeScript Deep Dive ͦ͏ݴ͍ͬͯΔ
͕࣌ؒ͋Ε༨ஊ
ϛυϧΣΞબఆ • ϩΪϯά: morgan • CORS: cors • ೝূ: passport
• ORM: ࣍ͷϖʔδͰ͢ • ඞཁͳͷἧ͍ͬͯΔ͕ࡉ͔͍ϥΠϒϥϦ͕ଟͯ͘ೖΕΔ ͷ໘ɻ • Express͡Όͳͯͬ͘ͱް͍ϑϨʔϜϫʔΫͷ΄͏͕͍ ͍͔ɻLoopbackͱ͔ʁ
Which ORM is best for Node.js? • Sequelieze.js • ฮ
• TypeORM • Ψνόά౿ΜͰ٧Ήɻߋ৽සΊ͔ • Objection.js + Knex.js • Ұ൪͔Γ͔ͬͨ͢
TypeSyncศར • ར༻ՄೳͳܕఆٛϑΝΠϧΛґଘʹಥͬࠐΜ Ͱ͘ΕΔ • github.com/jeffijoe/typesync • ϥΠϒϥϦΛೖΕΔ࣌ʹຖճ npm install
@types/hoge ͢Δͷ໘
·ͱΊ
ޮతʹ։ൃ͢ΔͨΊʹ σόοάํ๏͓͑ͯ͜͏