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
初心者のためのWeb標準技術 / Study Web Standards
Search
Shogo Sensui
August 27, 2015
Technology
0
290
初心者のためのWeb標準技術 / Study Web Standards
2015年8月27日に行われたHTML5ビギナーズ勉強会の「初心者のためのWeb標準技術」のセッションの資料です。
Shogo Sensui
August 27, 2015
Tweet
Share
More Decks by Shogo Sensui
See All by Shogo Sensui
三年間の関わりから見る PR TIMES エンジニアリングの変化 / Transition of PRTimes Engineering
1000ch
0
2.3k
EU のデジタル市場法と Apple / DMA and Apple
1000ch
0
130
Web Share API
1000ch
0
150
2023 年の Web 開発のベースライン / Web Development Baseline 2023
1000ch
0
59
開発生産性と組織 / Productivity and Organization
1000ch
0
1.2k
なぜ私達は働くのか / Why We Work?
1000ch
0
88
新しいメルカリ Web とそのパフォーマンス / The New Mercari Web and its performance
1000ch
0
95
Web Standards Interop 2022
1000ch
0
330
パフォーマンスを高める CSS / Performance Optimized CSS
1000ch
1
830
Other Decks in Technology
See All in Technology
From Live Coding to Vibe Coding with Firebase Studio
firebasethailand
1
300
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
2
250
Jitera Company Deck / JP
jitera
0
250
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
13
3.7k
Bliki (ja), and the Cathedral, and the Bazaar
koic
8
1.5k
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
7
9.7k
OpenTelemetry の Log を使いこなそう
biwashi
5
1.1k
【2025 Japan AWS Jr. Champions Ignition】点から線、線から面へ〜僕たちが起こすコラボレーション・ムーブメント〜
amixedcolor
1
100
MCPと認可まわりの話 / mcp_and_authorization
convto
2
290
AIに全任せしないコーディングとマネジメント思考
kikuchikakeru
0
270
TypeScript 上達の道
ysknsid25
23
4.8k
AWS表彰プログラムとキャリアについて
naoki_0531
1
140
Featured
See All Featured
A better future with KSS
kneath
238
17k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Faster Mobile Websites
deanohume
308
31k
For a Future-Friendly Web
brad_frost
179
9.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
GraphQLとの向き合い方2022年版
quramy
49
14k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Navigating Team Friction
lara
187
15k
Transcript
ॳ৺ऀͷͨΊͷ Webඪ४ٕज़2015ळ at HTML5ϏΪφʔζ by 1000ch
1000ch
Profile WebϑϩϯτΤϯυΤϯδχΞ HTML5ͱ͍͏͔Webٕज़શൠ Node.js + iOS/Mac #perfmatters
@cssradar @hiloki @t32k @1000ch @ahomu Frontend Weekly • ࠃ֎ͷϑϩϯτΤϯυใΛΩϡϨʔγϣϯ •
िʹҰਫ༵ʹ৴
@cssradar @hiloki @t32k @1000ch @ahomu Frontend Weekly • ࠃ֎ͷϑϩϯτΤϯυใΛΩϡϨʔγϣϯ •
िʹҰਫ༵ʹ৴ https://frontendweekly.tokyo
ࡢࠓͷWebϑϩϯτΤϯυ…
None
ߴԽ͢ΔWebϑϩϯτΤϯυ ߴ·Γଓ͚ΔϑϩϯτΤϯυͷൺॏ มΘΓଓ͚ΔWebΞϓϦέʔγϣϯ ૿͑ଓ͚Δ৽͍ٕ͠ज़ͱपลπʔϧ
ʮؾ͍ͮͨ࣌ʹഇΕͯΔʯ ͳΜͯ͜ͱ͠͠
ͦΜͳதͰ ഇΕʹ͍ٕ͘ज़…
Web Standards W3CɾWHATWGɾECMAͳͲ͕த৺ʹͳͬͯ Webͷඪ४ͱͳΔٕज़༷Λࡦఆ͍ͯ͠Δ
࠷ۙྲྀߦΓͷ͓͖͍͑ͯͨ Webඪ४Λ͓͞Β͍ ※͜Ε͚ͩΕΠΠͱ͍͏จ຺Ͱܾͯ͋͠Γ·ͤΜ
࠷ۙϫαͷ… Webඪ४ٕज़ ݫબ5બ
1. ECMAScript 2015
ECMAScript 2015 ΫϥεߏจΞϩʔؔɺPromiseͳͲ ػೳɾγϯλοΫεڞʹେ෯ʹڧԽ͞Εͨ ͍ΘΏΔES6HarmonyͱݺΕΔͷ 20156݄ʹ6th edition͕ඪ४Խ͞Εͨ ChromeFirefox͕࣮ΛਐΊΔ γΣΞશମΛݟΔͱ·ͩ·͍ͩ͠ !
? ♥
function Human(name) { if (name === undefined) { name =
'Taro'; } this.name = name; } Human.prototype.hello = function() { console.log('My name is ' + this.name); }; class Human { constructor(name = 'Taro') { this.name = name; } hello() { console.log(`My name is ${this.name}`); } } ES5 ES6
͍·͔Β͡ΊΔECMAScript 6 http://www.slideshare.net/1000ch/begin-ecmascript6
͍·͙͢׆͔͢ʂ࠷৽JavaScript WEB+DB PRESS Vol.87 ಛू1
2. CSS.next
CSS.next Selector Level4ɾNotationɾϓϩύςΟͳͲ ػೳ໘Ͱ༷ʑͳڧԽ͕ͳ͞Ε͍ͯΔ ʮCSS3ͰΓ্͕ͬͨʙʯҎ߱ͷมߋ ϓϦϓϩηοαͷӨڹΛड͚͍ͯΔ ES6ಉ༷ϒϥβͷରԠঢ়گࢥΘ͘͠ͳ͍ ! ? ♥
CSS.next CSS :root { --primary-color: #E86100; --base-fontsize: 1rem; } h1
{ font-size: calc(var(--base-fontsize) * 2); height: calc(100px - 2em); } body { font-size: var(--base-fontsize); } h1 { font-size: 2rem; height: calc(100px - 2em); } body { font-size: 1rem; }
cssnextͰΈΔ࣍ੈCSSͱPostCSS http://blog.yucchiy.com/2015/04/22/cssnext-postcss-for- nextgeneration-of-css
3. HTTP/2
HTTP/2 ! ? ♥ ϓϩτίϧϨϕϧͰ௨৴ޮ͕ྑ͘ͳΓ αʔόʔPushͳͲWebج൫ͱͯ͠ਐԽ WWWͰ࠾༻͞Ε͍ͯΔHTTPͷ 1.1͔Β2࣮ʹ16ͿΓόʔδϣϯUP ϒϥβ͓ΑͼαʔόʔͷରԠ͕ඞཁ طଘͷύϑΥʔϚϯεʹؔ͢Δϊϋͷݟ͠
http://www.http2demo.io/
HTTP/2ͷݱঢ়ͱ͜Ε͔Β http://www.slideshare.net/shigeki_ohtsu/http2-ohtsu-html5conf2015
4. Web Components
Web Components ! ? ♥ HTML/CSS/JSͷείʔϓͷࠜຊతͳղܾ Web෦ͷ࠶ར༻ʹ͚ͨ ίϯϙʔωϯτԽͷ࡞๏ͷඪ४Խ ϒϥβͷ࣮Ҏલʹɺ༷͕Fix͍ͯ͠ͳ͍ ʢಛʹShadow
DOMͱHTML Importsʣ
http://1000ch.github.io/switch-element/
ͳͥWeb ComponentsΣϒ։ൃʹֵ໋Λى͜͢ͷ͔ https://blog.agektmr.com/2014/05/web-components.html
جૅ͔ΒΘ͔Δ Web Components పఈղઆ https://html5experts.jp/series/web-components-2/
5. Service Worker
Service Worker ! ? ♥ αʔόʔPushͷड৴ΦϑϥΠϯԽͳͲ Webʹ͓͚ΔϢʔβʔମݧΛେ͖͘ม͑Δ Push APIɾCache APIͳͲΛ୲͏
ػೳΛ࣮ݱ͢Δ৽ͨͳWebͷج൫ٕज़ ηΩϡΞͳWebʢHTTPSʣͰ͔͠ར༻Ͱ͖ͳ͍
https://1000ch.github.io/todo/
Service Workerʹؔ͢Δ༷ͱ͔ػೳͱ͔ https://1000ch.net/posts/2014/service-worker-internals.html
Service Workerͷհ http://www.html5rocks.com/ja/tutorials/service-worker/introduction
ʮศརͦ͏ͳͷΘ͔ͬͨʯ ʮࢼͯ͠Έ͍ͨؾ͢Δʯ
ʮϒϥβͷରԠঢ়گͬͯ Ͳ͏ͳΜͰ͠ΐ͏…ʯ
How to fallback?
ES 2015 CSS.next HTTP/2 Web Components Service Worker
ES 2015 CSS.next HTTP/2 Web Components Service Worker BabelɾCSSnextɾAutoprefixerͱ ͍ͬͨΑ͏ͳ֤छπʔϧͬͯɺ
ඇରԠϒϥβͰ࣮ߦͰ͖ΔΑ ͏ͳJavaScriptʹมʢτϥϯε ύΠϧʣ͢Δ
ES 2015 CSS.next HTTP/2 Web Components Service Worker ΫϥΠΞϯτͱͷΤϯυϙΠϯτ αʔόʔʹHTTP/2ΛରԠͤ͞Δ
ʢΫϥΠΞϯτ͕HTTP/2ʹରԠ͠ ͍ͯΕHTTP/2Ͱ௨৴͠ɺඇରԠ Ͱ͋ΕHTTP/1.1ʹʣ
ES 2015 CSS.next HTTP/2 Web Components Service Worker WebComponents.jsͱ͍͏ϙϦϑΟ ϧΛ͏͜ͱͰݹ͍ϒϥβ
ʢSafari 7+ɾIE11+ʣͰ͋Δఔ ࣮ߦͰ͖ΔΑ͏ʹͳΔ
ES 2015 CSS.next HTTP/2 Web Components Service Worker ΦϑϥΠϯରԠαʔόʔPushΛ ඞਢͷཁ݅ͱ͠ͳ͚Εɺͦͦ
ΦϓτΠϯͱͯ͠ಋೖ͍͢͠ɻ ରԠ͍ͯ͠Δϒϥβʹରͯͩ͠ ͚ͰϢʔβʔΤϯήʔδϝϯτ ΛߴΊΒΕΔ
·ͱΊ தʹීٴͤͣʹඇਪʹͳ͍ͬͯ͘ͷ… ރΕʹ͍͕͘ಋೖ͠ʹ͔֬͘͞ʹ͋Δ հͨ͠ϞϊΩϟονΞοϓͯ͠ଛͳ͍
खݩͰࢼͯ͠ΈΔΑ͠ αʔϏεʹऔΓೖΕΔΑ͠
※͝ར༻ܭըతʹ
͓ΘΓ + +ShogoSensui % & 1000ch 1000ch