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.5k
TypeScript+Expressでサーバーサイド開発やってみた / typescript_express_debugging
TypeScript + Expressでサーバーサイド開発やってみた。主にツールやデバッグ周りの話をしました。ぜんぜんわからない、おれはふんいきでデバッグしている。
Takahiro Tsuchiya
April 03, 2019
Tweet
Share
More Decks by Takahiro Tsuchiya
See All by Takahiro Tsuchiya
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
11
6.2k
現場のエンジニアから見た採用担当との協働
corocn
7
3k
シリーズAをリファラル採用中心に走り抜ける / leaner-referral-engineer-2024
corocn
3
2.1k
捨てて加速するプロダクト開発 / sutete-speedup-product-development
corocn
3
700
リファラル採用にフルベットしてみた
corocn
3
3.8k
エンジニアとプロダクトマネージャーを兼任した1年間を振り返る / pdm-furikaeri
corocn
17
8k
育休のすゝめ #devsumi 2023
corocn
3
4.9k
GCPでRubyを動かしている話 / ruby on gcp
corocn
0
940
フルリモートワーカーのデスク選定 / how-to-select-remote-work-desk
corocn
1
630
Other Decks in Programming
See All in Programming
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
220
Workers を定期実行する方法は一つじゃない
rokuosan
0
140
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
350
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
270
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
310
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
1
910
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
180
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
250
iOS開発スターターキットの作り方
akidon0000
0
230
NEWT Backend Evolution
xpromx
1
170
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
910
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
110
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Pragmatic Product Professional
lauravandoore
36
6.8k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
750
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.5k
Designing for Performance
lara
610
69k
Practical Orchestrator
shlominoach
190
11k
YesSQL, Process and Tooling at Scale
rocio
173
14k
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 ͢Δͷ໘
·ͱΊ
ޮతʹ։ൃ͢ΔͨΊʹ σόοάํ๏͓͑ͯ͜͏