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
生成AI時代のコンポーネントライブラリの作り方
touyou
1
210
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
技術同人誌をMCP Serverにしてみた
74th
1
640
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
130
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
160
PipeCDのプラグイン化で目指すところ
warashi
1
270
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
VS Code Update for GitHub Copilot
74th
2
640
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
130
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Optimizing for Happiness
mojombo
379
70k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
A Tale of Four Properties
chriscoyier
160
23k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
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 ׀幠耮ָ֮הֲ׀ְׂת׃կ