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
270
初心者のための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
EU のデジタル市場法と Apple / DMA and Apple
1000ch
0
55
Web Share API
1000ch
0
74
2023 年の Web 開発のベースライン / Web Development Baseline 2023
1000ch
0
20
開発生産性と組織 / Productivity and Organization
1000ch
0
1k
なぜ私達は働くのか / Why We Work?
1000ch
0
40
新しいメルカリ Web とそのパフォーマンス / The New Mercari Web and its performance
1000ch
0
37
Web Standards Interop 2022
1000ch
0
260
パフォーマンスを高める CSS / Performance Optimized CSS
1000ch
1
730
HTML Optimization for Web Performance
1000ch
0
670
Other Decks in Technology
See All in Technology
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
160
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
150
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
270
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
ソフトウェアエンジニアリングの知見を活かして データ基盤をいい感じにする on Snowflake [MIERUNE BBQ #10]
mtpooh
2
150
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Teambox: Starting and Learning
jrom
130
8.6k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Building Your Own Lightsaber
phodgson
101
5.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
What's new in Ruby 2.0
geeforr
338
31k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
In The Pink: A Labor of Love
frogandcode
139
22k
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