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
590
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
32
『Bluesky 公式アカウント移行まとめ』のアップデートをした話 / 20241018-niigata-5min-tech
girigiribauer
0
89
コンテナクエリはコンテナ技術の話ではなく CSS の話です / 20240920-niigata-5min-tech
girigiribauer
1
76
公共交通のオープンデータ事始め / 20240823-niigata-5min-tech
girigiribauer
0
91
私と 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
Agentic Workflowという選択肢を考える
tkikuchi1002
1
500
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
1.1k
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
260
OpenHands🤲にContributeしてみた
kotauchisunsun
1
430
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
3
120
Uniadex__公開版_20250617-AIxIoTビジネス共創ラボ_ツナガルチカラ_.pdf
iotcomjpadmin
0
160
フィンテック養成勉強会#54
finengine
0
180
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
Welcome to the LLM Club
koic
0
170
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
960
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.7k
Building an army of robots
kneath
306
45k
Unsuck your backbone
ammeep
671
58k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
GitHub's CSS Performance
jonrohan
1031
460k
GraphQLとの向き合い方2022年版
quramy
48
14k
Side Projects
sachag
455
42k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Making Projects Easy
brettharned
116
6.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
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) Λτϥόʔγϯάͯ͘͠ΕΔ ͭ͋ΔʢผͷػձͰ୭͔͕Δ…!ʣ
まとめ • Ͳ͏͍͏ϓϦηοτ͕͋ΔͱΑΓֶͼ͕͋Δ ͔ɺ୭͔ڭ͑ͯ΄͍͠ • ໊ݹͰʰϑϩϯτΤϯυ͘͘ձʱΛ ຖ݄ͬͯΔΑʂ͜͏͍͏ͷ͘͘͢Δͱ ͍͍Αʂ