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

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

Avatar for girigiribauer girigiribauer
April 03, 2019
Technology
1
580

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

雑でごめんなさい
Avatar for girigiribauer

girigiribauer

April 03, 2019
Tweet

More Decks by girigiribauer

See All by girigiribauer
『Bluesky 公式アカウント移行まとめ』のアップデートをした話 / 20241018-niigata-5min-tech
Avatar for girigiribauer girigiribauer
0
83
コンテナクエリはコンテナ技術の話ではなく CSS の話です / 20240920-niigata-5min-tech
Avatar for girigiribauer girigiribauer
1
70
公共交通のオープンデータ事始め / 20240823-niigata-5min-tech
Avatar for girigiribauer girigiribauer
0
83
私と Vim / 20240426-niigata-5min-tech
Avatar for girigiribauer girigiribauer
2
170
がんばらない勉強会の続け方 / 20240426-niigata-5min-tech-omake
Avatar for girigiribauer girigiribauer
1
550
初めての chrome extension で Plasmo 使ってみた / 20240329-niigata-5min-tech
Avatar for girigiribauer girigiribauer
0
110
時間配分を常に意識するために、通知する仕組みを作った話 / 20220527-peacock-meets-up-01
Avatar for girigiribauer girigiribauer
0
240
モーダルウィンドウを作るときは createPortal を選択肢に加えよう、という話 / 20200201-react-nagoya-learning
Avatar for girigiribauer girigiribauer
0
110
コードフォーマッタを導入して
プロジェクト内に平穏をもたらす話 / 20191025-v-okinawa
Avatar for girigiribauer girigiribauer
0
170

Other Decks in Technology

See All in Technology
試作とデモンストレーション / Prototyping and Demonstrations
Avatar for Kenji Saito ks91
PRO
0
110
AI駆動で進化する開発プロセス ～クラスメソッドでの実践と成功事例～ / aidd-in-classmethod
Avatar for tomoki10 tomoki10
1
1.1k
AIによるコードレビューで開発体験を向上させよう！
Avatar for Atsushi Nakatsugawa moongift
PRO
0
420
genspark_presentation.pdf
Avatar for h.uriu haruki_uiru
1
250
製造業向けIoTソリューション提案資料.pdf
Avatar for h.uriu haruki_uiru
0
250
ペアーズにおける評価ドリブンな AI Agent 開発のご紹介
Avatar for fukubaka0825 fukubaka0825
9
2.5k
ソフトウェアテスト 最初の一歩 〜テスト設計技法をワークで体験しながら学ぶ〜 #JaSSTTokyo / SoftwareTestingFirstStep
Avatar for nihonbuson nihonbuson
PRO
1
150
LLMの開発と社会実装の今と未来 / AI Builders' Community (ABC) vol.2
Avatar for Preferred Networks pfn
PRO
1
130
Next.jsと状態管理のプラクティス
Avatar for uhyo uhyo
5
2k
Global Azure2025(GitHub Copilot ハンズオン)
Avatar for tomokusaba tomokusaba
2
750
Part1　GitHubってなんだろう？その１
Avatar for tomokusaba tomokusaba
3
770
3D生成AIのための画像生成
Avatar for 伊藤光祐 kosukeito
2
620

Featured

See All Featured
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
349
20k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
276
23k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
13
840
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
68
11k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
38
1.8k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.2k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
693
190k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
54
5.5k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
41
2.3k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
41
2.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.2k

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