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 から JavaScript への変換が見えやすくするビューワーを作った話...
Search
girigiribauer
April 03, 2019
Technology
1
600
TypeScript から JavaScript への変換が見えやすくするビューワーを作った話 / 20190403-typescript-studying
雑でごめんなさい
girigiribauer
April 03, 2019
Tweet
Share
More Decks by girigiribauer
See All by girigiribauer
Bluesky のフィードを作ろう / 20250620-niigata-5min-tech
girigiribauer
0
33
『Bluesky 公式アカウント移行まとめ』のアップデートをした話 / 20241018-niigata-5min-tech
girigiribauer
0
96
コンテナクエリはコンテナ技術の話ではなく CSS の話です / 20240920-niigata-5min-tech
girigiribauer
1
77
公共交通のオープンデータ事始め / 20240823-niigata-5min-tech
girigiribauer
0
93
私と Vim / 20240426-niigata-5min-tech
girigiribauer
2
180
がんばらない勉強会の続け方 / 20240426-niigata-5min-tech-omake
girigiribauer
1
560
初めての chrome extension で Plasmo 使ってみた / 20240329-niigata-5min-tech
girigiribauer
0
120
時間配分を常に意識するために、通知する仕組みを作った話 / 20220527-peacock-meets-up-01
girigiribauer
0
240
モーダルウィンドウを作るときは createPortal を選択肢に加えよう、という話 / 20200201-react-nagoya-learning
girigiribauer
0
110
Other Decks in Technology
See All in Technology
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
250
大量配信システムにおけるSLOの実践:「見えない」信頼性をSLOで可視化
plaidtech
PRO
0
290
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1k
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
5
600
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
2
690
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
260
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
3
1.6k
ロールが細分化された組織でSREは何をするか?
tgidgd
1
200
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
110
Claude Code に プロジェクト管理やらせたみた
unson
8
4.9k
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
230
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Designing for Performance
lara
610
69k
Docker and Python
trallard
45
3.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Writing Fast Ruby
sferik
628
62k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Code Reviewing Like a Champion
maltzj
524
40k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Transcript
TypeScript から JavaScript への 変換が見えやすくする ビューワーを作った話 2019/04/03 TypeScript ษڧձ @girigiribauer
\ 沖縄から来ました /
ts2js-viewer を雑に作った • TypeScript ͕ JavaScript ʹͲͷΑ͏ʹ ม͞ΕΔ͔ɺखؒΛ͔͚ͣʹαΫοͱ ֬ೝ͍ͨ͠ •
https://ts2js-viewer.netlify.com/ ʹ্͛·ͨ͠
左に書いたら、右に出るやつ
変換が分かりやすい! • Enum ͷڍಈͱ͔ʢkey, value ͕ަޓʹೖΔʣ • ܕ͕શ෦֎ΕΔͱ͔ • async
/ await ͕ͿΘͬͱ͘ͳΔͱ͔ ࡶʹ࡞ͬͨϨϕϧͳͷͰɺ ϓϦηοτͷίʔυϕλॻ͖ͩ͠ɺ ʮ͜͏͍͏ม͋ͬͨํ͕͍͍Μ͡Όͳ͍ʁʯ Έ͍ͨͳͷ͕શવཏͰ͖ͯ·ͤΜ
How to use • import * as ts from “typescript";
Ͱ ࡶʹಡΈࠐΜͰͬͪΌ͏ • `npm i typescript` ͩͱ warning ͰͪΌ͏ global ʹΠϯετʔϧͨ͠ͷΛ `npm link` ͯ͠͏ͷ͕ຊདྷͷ͍ํͬΆ͍
Using the Compiler API • https://github.com/Microsoft/TypeScript/ wiki/Using-the-Compiler-API • ts.transpileModule(code, options)
͕γϯϓϧ • γϯϓϧʹม͢Δͭͷଞʹɺ நߏจ (AST) Λτϥόʔγϯάͯ͘͠ΕΔ ͭ͋ΔʢผͷػձͰ୭͔͕Δ…!ʣ
まとめ • Ͳ͏͍͏ϓϦηοτ͕͋ΔͱΑΓֶͼ͕͋Δ ͔ɺ୭͔ڭ͑ͯ΄͍͠ • ໊ݹͰʰϑϩϯτΤϯυ͘͘ձʱΛ ຖ݄ͬͯΔΑʂ͜͏͍͏ͷ͘͘͢Δͱ ͍͍Αʂ