2015年8月27日に行われたHTML5ビギナーズ勉強会の「初心者のためのWeb標準技術」のセッションの資料です。
ॳ৺ऀͷͨΊͷWebඪ४ٕज़2015ळat HTML5ϏΪφʔζ by 1000ch
View Slide
1000ch
ProfileWebϑϩϯτΤϯυΤϯδχΞHTML5ͱ͍͏͔Webٕज़શൠNode.js + iOS/Mac#perfmatters
@cssradar @hiloki @t32k @1000ch @ahomuFrontend Weekly• ࠃ֎ͷϑϩϯτΤϯυใΛΩϡϨʔγϣϯ• िʹҰਫ༵ʹ৴
@cssradar @hiloki @t32k @1000ch @ahomuFrontend Weekly• ࠃ֎ͷϑϩϯτΤϯυใΛΩϡϨʔγϣϯ• िʹҰਫ༵ʹ৴https://frontendweekly.tokyo
ࡢࠓͷWebϑϩϯτΤϯυ…
ߴԽ͢ΔWebϑϩϯτΤϯυߴ·Γଓ͚ΔϑϩϯτΤϯυͷൺॏมΘΓଓ͚ΔWebΞϓϦέʔγϣϯ૿͑ଓ͚Δ৽͍ٕ͠ज़ͱपลπʔϧ
ʮؾ͍ͮͨ࣌ʹഇΕͯΔʯͳΜͯ͜ͱ͠͠
ͦΜͳதͰഇΕʹ͍ٕ͘ज़…
Web StandardsW3Cɾ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 6http://www.slideshare.net/1000ch/begin-ecmascript6
͍·͙͢׆͔͢ʂ࠷৽JavaScriptWEB+DB PRESS Vol.87 ಛू1
2. CSS.next
CSS.nextSelector 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ͱPostCSShttp://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 2015CSS.nextHTTP/2Web ComponentsService Worker
ES 2015CSS.nextHTTP/2Web ComponentsService WorkerBabelɾCSSnextɾAutoprefixerͱ͍ͬͨΑ͏ͳ֤छπʔϧͬͯɺඇରԠϒϥβͰ࣮ߦͰ͖ΔΑ͏ͳJavaScriptʹมʢτϥϯεύΠϧʣ͢Δ
ES 2015CSS.nextHTTP/2Web ComponentsService WorkerΫϥΠΞϯτͱͷΤϯυϙΠϯταʔόʔʹHTTP/2ΛରԠͤ͞ΔʢΫϥΠΞϯτ͕HTTP/2ʹରԠ͍ͯ͠ΕHTTP/2Ͱ௨৴͠ɺඇରԠͰ͋ΕHTTP/1.1ʹʣ
ES 2015CSS.nextHTTP/2Web ComponentsService WorkerWebComponents.jsͱ͍͏ϙϦϑΟϧΛ͏͜ͱͰݹ͍ϒϥβʢSafari 7+ɾIE11+ʣͰ͋Δఔ࣮ߦͰ͖ΔΑ͏ʹͳΔ
ES 2015CSS.nextHTTP/2Web ComponentsService WorkerΦϑϥΠϯରԠαʔόʔPushΛඞਢͷཁ݅ͱ͠ͳ͚ΕɺͦͦΦϓτΠϯͱͯ͠ಋೖ͍͢͠ɻରԠ͍ͯ͠Δϒϥβʹର͚ͯͩ͠ͰϢʔβʔΤϯήʔδϝϯτΛߴΊΒΕΔ
·ͱΊதʹීٴͤͣʹඇਪʹͳ͍ͬͯ͘ͷ…ރΕʹ͍͕͘ಋೖ͠ʹ͔֬͘͞ʹ͋Δհͨ͠ϞϊΩϟονΞοϓͯ͠ଛͳ͍
खݩͰࢼͯ͠ΈΔΑ͠αʔϏεʹऔΓೖΕΔΑ͠
※͝ར༻ܭըతʹ
͓ΘΓ+ +ShogoSensui%&1000ch1000ch