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
10
6k
現場のエンジニアから見た採用担当との協働
corocn
7
3k
シリーズAをリファラル採用中心に走り抜ける / leaner-referral-engineer-2024
corocn
3
2.1k
捨てて加速するプロダクト開発 / sutete-speedup-product-development
corocn
3
690
リファラル採用にフルベットしてみた
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
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
340
Is Xcode slowly dying out in 2025?
uetyo
1
210
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.4k
エラーって何種類あるの?
kajitack
5
320
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
240
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
230
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
580
童醫院敏捷轉型的實踐經驗
cclai999
0
200
20250613-SSKMvol.15
diostray
0
100
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
600
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
330
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
420
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
39
1.9k
A Tale of Four Properties
chriscoyier
160
23k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Faster Mobile Websites
deanohume
307
31k
Designing for humans not robots
tammielis
253
25k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Writing Fast Ruby
sferik
628
62k
Unsuck your backbone
ammeep
671
58k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Navigating Team Friction
lara
187
15k
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 ͢Δͷ໘
·ͱΊ
ޮతʹ։ൃ͢ΔͨΊʹ σόοάํ๏͓͑ͯ͜͏