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.4k
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
7
4.7k
現場のエンジニアから見た採用担当との協働
corocn
7
2.9k
シリーズAをリファラル採用中心に走り抜ける / leaner-referral-engineer-2024
corocn
3
1.9k
捨てて加速するプロダクト開発 / sutete-speedup-product-development
corocn
3
640
リファラル採用にフルベットしてみた
corocn
3
3.6k
エンジニアとプロダクトマネージャーを兼任した1年間を振り返る / pdm-furikaeri
corocn
17
7.7k
育休のすゝめ #devsumi 2023
corocn
3
4.7k
GCPでRubyを動かしている話 / ruby on gcp
corocn
0
900
フルリモートワーカーのデスク選定 / how-to-select-remote-work-desk
corocn
1
590
Other Decks in Programming
See All in Programming
VisionProで部屋の明るさを反映させるシェーダーを作った話
segur
0
100
.NETでOBS Studio操作してみたけど…… / Operating OBS Studio by .NET
skasweb
0
120
快速入門可觀測性
blueswen
0
500
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
1.3k
DMMオンラインサロンアプリのSwift化
hayatan
0
170
return文におけるstd::moveについて
onihusube
1
1.4k
Findy Team+ Awardを受賞したかった!ベストプラクティス応募内容をふりかえり、開発生産性向上もふりかえる / Findy Team Plus Award BestPractice and DPE Retrospective 2024
honyanya
0
140
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
770
PHPとAPI Platformで作る本格的なWeb APIアプリケーション(入門編) / phpcon 2024 Intro to API Platform
ttskch
0
390
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
930
DevFest - Serverless 101 with Google Cloud Functions
tunmise
0
140
ChatGPT とつくる PHP で OS 実装
memory1994
PRO
3
190
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
Typedesign – Prime Four
hannesfritz
40
2.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
570
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
How to train your dragon (web standard)
notwaldorf
89
5.8k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Fireside Chat
paigeccino
34
3.1k
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 ͢Δͷ໘
·ͱΊ
ޮతʹ։ൃ͢ΔͨΊʹ σόοάํ๏͓͑ͯ͜͏