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
ES6ModulesとServiceWorker時代のTypescript開発
Search
Taketoshi Aono(青野健利 a.k.a brn)
June 15, 2017
Programming
0
160
ES6ModulesとServiceWorker時代のTypescript開発
ServiceWorkerとES6 Modulesを利用してTypescript開発をどう変えていけるか考えてみた
Taketoshi Aono(青野健利 a.k.a brn)
June 15, 2017
Tweet
Share
More Decks by Taketoshi Aono(青野健利 a.k.a brn)
See All by Taketoshi Aono(青野健利 a.k.a brn)
document.write再考
brn
6
3k
Parsing Javascript
brn
14
9.2k
JSON & Object Tips
brn
1
490
CA 1Day Youth Bootcamp for Frontend LT
brn
0
950
Modern TypeScript
brn
2
810
javascript - behind the scene
brn
3
740
tc39 proposals
brn
0
880
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
700
Other Decks in Programming
See All in Programming
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
770
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
250
AIともっと楽するE2Eテスト
myohei
6
2.6k
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
140
技術同人誌をMCP Serverにしてみた
74th
1
640
VS Code Update for GitHub Copilot
74th
2
640
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
190
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
The Cult of Friendly URLs
andyhume
79
6.5k
Navigating Team Friction
lara
187
15k
Done Done
chrislema
184
16k
We Have a Design System, Now What?
morganepeng
53
7.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
RailsConf 2023
tenderlove
30
1.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Site-Speed That Sticks
csswizardry
10
690
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Transcript
Typescript Development with ServiceWorker and ES6 Modules
せ: @brn (ꫬꅿ⨳ⵃa.k.a ـٕ٦ظ) 耵噟: ؿٗٝزؒٝسؒٝآص،٥iOSؒٝآص، ⠓爡: Cyberagent ،سذؙأةآؔRightSegment٥AI Messenger
ـؚٗ: http://abcdef.gets.b6n.ch/ Twitter: https://twitter.com/brn227 GitHub: https://github.com/brn
What is ServiceWorker? ServiceWorkerהכWebل٦آغحؙؚٓؐٝسד؝ٝزٗ٦ٕ׃ծ httpؙٔؒأزך؎ٝة٦إفز瘝➙תדjavascriptדכדֹזַֿה 㹋植ׅ堣腉דׅկ https://developers.google.com/web/fundamentals/getting-started/ primers/service-workers?hl=ja
Intercept http request ֿד➙㔐כServiceWorkerךhttpؙٔؒأز؎ٝة٦إفز堣腉הծ ES6 Modulesⵃ欽׃גTypescriptך如⚅➿涪橆㞮圓眠׃גת׃կ
ES6 Modules ֲ兛鸐ח⢪גְתׅ״י 涺ׁ㛇劤涸חכbabelדزٓٝأػ؎ٕ׃גְה䙼ְתׅկ ـٓؐؠדכ植㖈SafariהChrome Canarayד؟ه٦زׁגְתׅկ ➙㔐כֿךES6 Modulesⵃ欽׃גծ Typescriptךٌآُ٦ٕٗ٦س׃תׅկ
Typescript Compiler ـٓؐؠד⹛ֹתׅկ ׃ծCompilerHost鏣㹀ׅװ倯כ㢳ⴓئזךדծ ts.transpileModuleⵃ欽׃ג1ٌآُ٦ٕ嫣ח؝ٝػ؎ٕ׃תׅկ https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API#a-simple-transform-function
Strategy ؝ٝػ؎ٕך崧דָׅծ • ServiceWorkerךinstall؎كٝزskipWatingדׅ굲לׅ • ServiceWorkerךactivate؎كٝزclaimד㸣✪ׅկ • ً؎ٝ⩎כnavigator.serviceWorker.registerך䨱⦼ךPromiseⰻדactiveف ٗػذ؍湊鋔 •
activeחזtypescriptscript type="module"דٗ٦سׅկ • ServiceWorkerךfetch؎كٝزⰻד؝ٝػ؎ٕ׃ג鵤ׅկ הְֲ䠬ׄדװגת׃կ
tsconfig.json ׁח؝ٝػ؎ٕך鏣㹀tsconfig.jsonַ《⳿׃ֻזךדծ • 剑ⴱחً؎ٝأٖحس⩎ַpostMessageדtsconfigך《䖤䭷爙կ • tsconfigךٗ٦سָ㸣✪׃ServiceWorker⩎ַpostMessageד鸐濼 • typescriptךٗ٦س ה׃ת׃կ
Strategy ServiceWorkerכⴱ㔐ח؎ٝأز٦ׁٕהծinstall؎كٝزָ涪抟׃ծ waiting朐䡾חזתׅկ׃גٔٗ٦سׅהactive朐䡾ח獳遤׃ծ ✳䏝湡ך鏝㉏⟃꣬ծfetch؎كٝزٍؗحثֿׅהָ〳腉חזתׅկ install active ⴱ㔐 ✳㔐湡⟃꣬
Strategy ׃ַ׃ծ➙㔐כⴱ㔐ַل٦آ؝ٝزٗ٦ٕ׃ְկ זךדծself.skipWaiting()ㄎן⳿׃גactivate׃ծclaim()ㄎן⳿׃גծ ل٦آ؝ٝزٗ٦ٕ朐䡾ח׃תׅկ ل٦آך؝ٝزٗ٦ٕ朐䡾ָ㢌⻉ׅהծcontrollerchange؎كٝزָً ؎ٝل٦آדㄎן⳿ׁתׅկ ך؎كٝزٔحأٝ׃גֶֹծactive朐䡾嗚濼׃postMesseage דtsconfig.jsonך《䖤遤ְתׅկ install ⴱ㔐
active ⴱ㔐 skipWaiting controllerchange Main postMessage
Strategy register() controllerchange postMessage(load tsconfig) postMessage(load succeeded) load typescript via
script tag ... ServiceWorker Main install active skipWaiting() claim() wait fetch event load typescript via ES6 import transpileModule transpileModule Transpiled code
Demo رٌ https://brn.github.io/swts/
Problem 植㖈ךהֿES6 Modulesח㼎䘔׃גְזְModuleכ⹛⡲׃תׇկ את㣐⼱ךnpmךModuleכ⹛ַזְגֿהדׅկ ׃✲חⵃ欽ׅModule؝ٝػ؎ٕ׃גֶֽלזהַכז ַ׃תׇկ
GitHub ֿֿתדך㹋鄲npm moduleה׃גⰕ׃גֶֹת׃կ https://github.com/brn/swts.git
Summary ServiceWorkerדbabel٥typescriptכַז⦜זֿהָ㢳ְկ 暴חES6 Modulesָ⢪ִגծ commonjs䕎䒭ךٌآُ٦ָٕٗ٦سדֹזַהծ鼋欵ך㉏겗ָ֮կ commonjs => ES6 modulesַׅծamd٥Systemjsהְֲ鼋欵ח걾ַկ ES6
Modulesⵃ欽׃tranpileחꟼ׃גכתתװֿהָ㢳ֲկ
Summary ׀幠耮ָ֮הֲ׀ְׂת׃կ