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
TechBuzz 第17回 HTML5+JS 講演資料
Search
Ken Wagatsuma
September 23, 2015
Programming
2
890
TechBuzz 第17回 HTML5+JS 講演資料
https://github.com/KENJU/techbuzz_htmljs_20150924
Ken Wagatsuma
September 23, 2015
Tweet
Share
More Decks by Ken Wagatsuma
See All by Ken Wagatsuma
Pregel Graph Compute Engines - Supersteps Exampls
kenju
0
210
Kafka on Kubernetes with Strimzi
kenju
0
160
AWS DynamoDB Accelerator (DAX) 101
kenju
2
7.1k
Moden browser introduction
kenju
1
400
Cookpad summer internship 2019 - API
kenju
0
10k
Introduction to Design Patterns
kenju
0
81
GraphQL Asia 2019 "Re-architecture of a decade-old app with BFF/GraphQL"
kenju
0
8.9k
Introduction to TypeScript
kenju
0
720
Introduction to Programmatic Ad
kenju
0
260
Other Decks in Programming
See All in Programming
GPUを計算資源として使おう!
primenumber
1
200
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
840
VS Code Update for GitHub Copilot
74th
2
670
技術同人誌をMCP Serverにしてみた
74th
1
680
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
650
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
810
Hack Claude Code with Claude Code
choplin
6
2.4k
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
450
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
6.7k
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
370
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
14k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building an army of robots
kneath
306
45k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
What's in a price? How to price your products and services
michaelherold
246
12k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
A Tale of Four Properties
chriscoyier
160
23k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Embracing the Ebb and Flow
colly
86
4.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Transcript
Web Workers +α Kenju Wagatsuma
Agenda ❖ 3m : Self Introduction ❖ 8m : Web
Worker / Shared Worker ❖ 8m : Story Behind “Instagram JS” ❖ 6m : Service Worker ❖ 5m : Q&A
Goal ❖ 1 : ʰWeb Worker APIͷجຊͷ͍ํΛ Δ͜ͱʱ ❖ 2:
ʰࣄྫΛ௨ͯ͠Web Worker APIͷɹ ࣮ફྫͱԠ༻ํ๏ʹ͍ͭͯΔʱ
Self Introduction
Self Introduction ❖ Career ❖ Hobby ❖ ʰࠓिಡΜͩຊʱ
Career ❖ 2011 : Graphic Designer ( PS, AI, ID
) ❖ 2013 : Web Designer ( HTML, CSS, jQuery) ❖ 2014 : Web Engineer ( + JS - Coffee, Node ) ❖ 2015 : Programmer ( + Java/Android, Linux )
Recent Keywords ❖ Atom ❖ Electron ❖ Node v4
Hobby ❖ PENTATONIX ❖ Beatbox ❖ + Guitar
ʰࠓिಡΜͩຊʱ “Soft Skills” ❖ AmazonόΧചΕ ❖ ࠓि΄ͬͯΜͱΓ ❖ ୯ͳΔϓϩάϥϚ͔Βͷ٫
Web Worker / Shared Worker
Web Worker / Shared Worker ❖ What? ❖ When? ❖
How? ❖ Sample
What? ❖ JSͰϚϧνεϨουॲཧΛ࣮ݱ͢Δɹ ͨΊͷHTML5ͷ༷ ❖ ಠࣗͷάϩʔόϧείʔϓΛ࣋ͭ
UI Thread DOM Event Listeners window object
UI Thread Worker Thread Create
UI Thread Worker Thread Create Message
UI Thread Worker Thread Create Message Result
UI Blocking... ❖ jQueryೖΕ͗ͯ͢ը໘͕ͪΒ͖ͭ͗͢ɻɻɻ ❖ εΫϩʔϧ͕ͬ͞Γɻɻɻ ❖ Animation͕શવεϜʔζ͡Όͳ͍ɻɻɻ
UI Thread jQueryඳը
UI Thread jQueryඳը εΫϩʔϧҐஔܭࢉ
UI Thread jQueryඳը εΫϩʔϧҐஔܭࢉ JSONϨεϙϯεղੳ
UI Thread jQueryඳը εΫϩʔϧҐஔܭࢉ JSONϨεϙϯεղੳ σʔλՃ
Non-Blocking! ❖ JavaScriptγϯάϧεϨου ❖ UIεϨουͱผͷεϨου͕͋Ε͍͍ ❖ DOMૢ࡞ͱܭࢉॲཧͷ
UI Thread Worker Thread Create jQueryඳը
UI Thread Worker Thread Create jQueryඳը JSON ղੳ σʔλ Ճ
εΫϩʔϧ Ґஔܭࢉ
UI Thread Worker Thread Create jQueryඳը JSON ղੳ σʔλ Ճ
εΫϩʔϧ Ґஔܭࢉ Result
When? ❖ CanvasΛ༻͍ͨը૾ॲཧ ❖ σʔλͷϓϦϩʔυ ❖ ಈըԻͷղੳॲཧ ❖ ΩϟογϡΛ༻͍ͨॲཧ ❖
JSONจࣈྻͷॲཧ ❖ IndexedDBΛ༻͍ͨॲཧ ❖ ෳࡶͳ҉߸Խ ❖ εϖϧνΣοΫͳͲͷߏจղੳ ❖ Location APILocal Storage APIͱͷԠ༻
How? ❖ 1: new Worker()ͰWorkerΠϯελϯεΛੜ ❖ 2: postMessage()ͰϝοηʔδΛૹΔ ❖ 3:
WorkerଆͰड͚औͬͨϝοηʔδΛ ͱʹॲཧΛߦ͏ ❖ 4: onmessageͰॲཧࡁΈͷσʔλΛड͚औΔ
❖ 1: new Worker()ͰWorkerΠϯελϯεΛੜ
❖ 2: postMessage()ͰϝοηʔδΛૹΔ
❖ 3: WorkerଆͰड͚औͬͨϝοηʔδΛ ͱʹॲཧΛߦ͏
❖ 4: onmessageͰॲཧࡁΈͷσʔλΛड͚औΔ
http://www.codeproject.com/Articles/429123/Web-Workers
Sample ❖ sample01: 2ͷ50ͷܭࢉ ❖ sample02: 10ສ·Ͱͷ͏ͪ࠷େͷૉͷ୳ࡧ ❖ sample03: 2ͷnͷܭࢉʢnҙʣ
✓ Web Workerͷجຊతͳϓϩηε ✓ Πϯελϯεੜ ✓ WorkerεϨουͷॲཧ ✓ ϝοηʔδૹ৴ɾड৴
Sample ❖ sample04: จࣈྻΧϯτ ✓ ୯ମͷมҎ֎ͷσʔλͷड͚͠ ✓ WorkerͰΦϒδΣΫτʢJSONʣΛड͚͢
Sample ❖ sample05: ը૾ॲཧ ✓ ޙड़
Shared Worker? ❖ ҰͭͷWorkerεϨουΛෳWindowؒͰڞ༗ ❖ WorkerεϨου = άϩʔόϧείʔϓ ❖ ੜํ๏Web
Workerͱಉ͡ ❖ Ұࡦఆ͔Β֎͞Εɺࡢ࠶࠾༻͞Εͨɹ ͱ͍͏ܦҢ͕͋Δ
Sample ❖ sample06: Shared Web Workerͷجຊ ✓ Shared Web Workerͷجຊతͳ͍ํ
✓ ಛతಈ࡞ͷ֬ೝ ✓ جຊతͳϝοηʔδͷૹड৴
Sample ❖ sample07: BlobΛ༻͍ͨWorkerͷ࡞ ❖ sample08: BlobΛ༻͍ͨWorkerͷ࡞ʢ̎ʣ ✓ ෳͷWorkerΠϯελϯεੜʹ͍ͭͯ ✓
BlobΛ༻͍ͨWorkerͷ࡞ํ๏ʹ͍ͭͯ ✓ WorkerεΫϦϓτੜͱͷҧ͍ʹ͍ͭͯ
Sample ❖ sample09: Web WorkerͰJSONΛParse ❖ sample10: Web Worker &
FileReaderSync ✓ ΑΓ࣮ફతͳWorkerͷαϯϓϧ ✓ Web APIͷJSONϨεϙϯεΛॲཧ ✓ FileReaderSync APIͱͷ߹Θٕͤ
Story Behind “Instagram JS”
Sample ❖ ҎԼͷهࣄʹԊͬͯհ͠·͢ ✓ http://qiita.com/KENJU/items/78c0034d7e93fbe8f95a
UI Thread canvasͰϐΫηϧσʔλऔಘ
UI Thread Worker Thread Create canvasͰϐΫηϧσʔλऔಘ
UI Thread Worker Thread Create canvasͰϐΫηϧσʔλऔಘ ϥάϥϯδϡ ิؒͷܭࢉ ৽͍͠ ϐΫηϧσʔλ
UI Thread Worker Thread Create canvasͰϐΫηϧσʔλऔಘ ϥάϥϯδϡ ิؒͷܭࢉ ৽͍͠ ϐΫηϧσʔλ
Result
Service Worker
Service Worker ❖ What? ❖ When? ❖ How? ❖ Sample
What? ❖ ϖʔδͷόοάάϥϯυͰಈ͘ɹɹ ΠϕϯτۦಈͷJavaScriptڥʣby @nhiroki_͞Μ
What? ❖ “Better AppCache” ❖ “ϒϥβHTTP Proxy” ❖ “Native AppͱWebͷGapΛຒΊΔ”
When? ❖ Offline ❖ Push௨ ❖ Backgroundॲཧ
Life-Cycle ❖ Install > Activate ❖ Activate͞ΕͨΒ దٓfetch http://www.html5rocks.com/en/tutorials/service-worker/introduction/
How? ❖ https·ͨlocalhostͰͷΈಈ࡞ ❖ ʮchrome://inspect/#service-workersʯ
Sample ❖ sample11: Service Workerͷجຊ ✓ Service Workerͷجຊతͳ͍ํ ✓ ىಈํ๏ɾσόοάํ๏
✓ جຊతͳϥΠϑαΠΫϧͷ֬ೝ
Further Reading ❖ http://dackdive.hateblo.jp/entry/2015/04/04/163234 ❖ http://www.html5rocks.com/en/tutorials/service-worker/introduction/ ❖ https://jakearchibald.com/2014/offline-cookbook/
Q&A
Appendix
ؔ࿈ࢿྉ ❖ Github : https://github.com/KENJU/techbuzz_htmljs_20150924 ❖ Wiki : https://github.com/KENJU/techbuzz_htmljs_20150924/wiki ❖
Slide : https://speakerdeck.com/kenju
͓͢͢Ίॻ੶ ❖ ։؟! JavaScript ―ݴޠ༷͔ΒֶͿJavaScriptͷຊ࣭ ❖ JavaScript: The Good Parts
❖ ΦϒδΣΫτࢦJavaScriptͷݪଇ ❖ JavaScriptύλʔϯ ―༏ΕͨΞϓϦέʔγϣϯͷͨΊͷ࡞๏ ❖ JavaScriptٯҾ͖Ϩγϐ jQueryରԠ (PROGRAMMER’S RECiPE) ❖ HTML5 Hacks ―ΠϯλϥΫςΟϒWebΞϓϦέʔγϣϯͷͨΊͷς ΫχοΫ