Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TypeScript から JavaScript への変換が見えやすくするビューワーを作った話...

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for girigiribauer girigiribauer
April 03, 2019
Technology
630
1

TypeScript から JavaScript への変換が見えやすくするビューワーを作った話 / 20190403-typescript-studying

雑でごめんなさい

Avatar for girigiribauer

girigiribauer

April 03, 2019

More Decks by girigiribauer

See All by girigiribauer
2026年は Rust 置き換えが流行る！ / 20260220-niigata-5min-tech
Avatar for girigiribauer girigiribauer
0
250
移動は善 / 20260124-NGK2026S
Avatar for girigiribauer girigiribauer
1
120
Google Antigravity を使ってみた肌感 / 20251130-ai-craft-hacks-niigata
Avatar for girigiribauer girigiribauer
0
73
なんとなく使っていたクリップボードの不思議 / 20250926-niigata-5min-tech
Avatar for girigiribauer girigiribauer
0
66
タスクにもストック型・フロー型があるということに Todoist を使い始めて気づいた話 / 20250725-niigata-5min-tech
Avatar for girigiribauer girigiribauer
0
83
Bluesky のフィードを作ろう / 20250620-niigata-5min-tech
Avatar for girigiribauer girigiribauer
0
58
『Bluesky 公式アカウント移行まとめ』のアップデートをした話 / 20241018-niigata-5min-tech
Avatar for girigiribauer girigiribauer
0
120
コンテナクエリはコンテナ技術の話ではなく CSS の話です / 20240920-niigata-5min-tech
Avatar for girigiribauer girigiribauer
1
110
公共交通のオープンデータ事始め / 20240823-niigata-5min-tech
Avatar for girigiribauer girigiribauer
0
120

Other Decks in Technology

See All in Technology
CloudFrontのHost Header転送設定でパケットの中身はどう変わるのか？
Avatar for nagisa_53 nagisa53
1
230
Datadog で実現するセキュリティ対策 ~オブザーバビリティとセキュリティを 一緒にやると何がいいのか~
Avatar for Shuntaro Azuma a2ush
0
180
Physical AI on AWS リファレンスアーキテクチャ / Physical AI on AWS Reference Architecture
Avatar for shota aws_shota
1
260
遊びで始めたNew Relic MCP、​気づいたらChatOpsな​オブザーバビリティボットができてました/From New Relic MCP to a ChatOps Observability Bot
Avatar for AEON aeonpeople
1
150
20260323_データ分析基盤でGeminiを使う話
Avatar for yuichi 1210yuichi0
0
210
Babylon.js を使って試した色々な内容 / Various things I tried using Babylon.js / Babylon.js 勉強会 vol.5
Avatar for you（@youtoy） you
PRO
0
170
MIX AUDIO EN BROADCAST
Avatar for Erick Ralph Kionga ralpherick
0
140
SaaSの操作主体は人間からAIへ - 経理AIエージェントが目指す深い自動化
Avatar for Motoshi Nishihira nishihira
0
130
AWSで2番目にリリースされたサービスについてお話しします(諸説あります)
Avatar for Yuuki Yamashita yama3133
0
100
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
16
410k
第26回FA設備技術勉強会 - Claude/Claude_codeでデータ分析 -
Avatar for コロッケそば happysamurai294
0
310
Oracle AI Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
5
1.3k

Featured

See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.9k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
150
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.2k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
160
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
340
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
199
73k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k

Transcript

  1. TypeScript から JavaScript への 変換が見えやすくする ビューワーを作った話 2019/04/03 TypeScript ษڧձ @girigiribauer

  2. \ 沖縄から来ました /

  3. ts2js-viewer を雑に作った • TypeScript ͕ JavaScript ʹͲͷΑ͏ʹ
 ม׵͞ΕΔ͔ɺखؒΛ͔͚ͣʹαΫοͱ
 ֬ೝ͍ͨ͠ •

    https://ts2js-viewer.netlify.com/ ʹ্͛·ͨ͠

  4. 左に書いたら、右に出るやつ

  5. 変換が分かりやすい！ • Enum ͷڍಈͱ͔ʢkey, value ͕ަޓʹೖΔʣ • ܕ͕શ෦֎ΕΔͱ͔ • async

    / await ͕ͿΘͬͱ௕͘ͳΔͱ͔ ࡶʹ࡞ͬͨϨϕϧͳͷͰɺ ϓϦηοτͷίʔυ΋ϕλॻ͖ͩ͠ɺ ʮ͜͏͍͏ม׵΋͋ͬͨํ͕͍͍Μ͡Όͳ͍ʁʯ Έ͍ͨͳͷ͕શવ໢ཏͰ͖ͯ·ͤΜ

  6. How to use • import * as ts from “typescript";

    Ͱ
 ࡶʹಡΈࠐΜͰ࢖ͬͪΌ͏ • `npm i typescript` ͩͱ warning ͰͪΌ͏
 global ʹΠϯετʔϧͨ͠΋ͷΛ `npm link`
 ͯ͠࢖͏ͷ͕ຊདྷͷ࢖͍ํͬΆ͍


  7. Using the Compiler API • https://github.com/Microsoft/TypeScript/ wiki/Using-the-Compiler-API • ts.transpileModule(code, options)

    ͕γϯϓϧ • γϯϓϧʹม׵͢Δ΍ͭͷଞʹ΋ɺ
 ந৅ߏจ໦ (AST) Λτϥόʔγϯάͯ͘͠ΕΔ ΍ͭ΋͋ΔʢผͷػձͰ୭͔͕஻Δ…!ʣ

  8. まとめ • Ͳ͏͍͏ϓϦηοτ͕͋ΔͱΑΓֶͼ͕͋Δ ͔ɺ୭͔ڭ͑ͯ΄͍͠ • ໊ݹ԰Ͱ͸ʰϑϩϯτΤϯυ΋͘΋͘ձʱΛ
 ຖ݄΍ͬͯΔΑʂ͜͏͍͏ͷ΋͘΋͘͢Δͱ ͍͍Αʂ