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
150
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
13
9.1k
JSON & Object Tips
brn
1
440
CA 1Day Youth Bootcamp for Frontend LT
brn
0
870
Modern TypeScript
brn
2
770
javascript - behind the scene
brn
3
710
tc39 proposals
brn
0
830
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
650
Other Decks in Programming
See All in Programming
PHP ステートレス VS ステートフル 状態管理と並行性 / php-stateless-stateful
ytake
0
110
2024年のWebフロントエンドのふりかえりと2025年
sakito
3
260
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
CloudNativePGを布教したい
nnaka2992
0
100
Ruby on cygwin 2025-02
fd0
0
150
Domain-Driven Transformation
hschwentner
2
1.9k
ソフトウェアエンジニアの成長
masuda220
PRO
12
2k
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
130
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
210
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
670
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
160
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
130
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Adopting Sorbet at Scale
ufuk
74
9.2k
Writing Fast Ruby
sferik
628
61k
How STYLIGHT went responsive
nonsquared
98
5.4k
Speed Design
sergeychernyshev
27
800
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
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 ׀幠耮ָ֮הֲ׀ְׂת׃կ