Upgrade to Pro — share decks privately, control downloads, hide ads and more …

初心者のためのWeb標準技術 / Study Web Standards

初心者のためのWeb標準技術 / Study Web Standards

2015年8月27日に行われたHTML5ビギナーズ勉強会の「初心者のためのWeb標準技術」のセッションの資料です。

0d605a3350dd7e91b8136aecffd5ceeb?s=128

Shogo Sensui

August 27, 2015
Tweet

Transcript

  1. ॳ৺ऀͷͨΊͷ Webඪ४ٕज़2015ळ at HTML5ϏΪφʔζ by 1000ch

  2. 1000ch

  3. Profile WebϑϩϯτΤϯυΤϯδχΞ HTML5ͱ͍͏͔Webٕज़શൠ Node.js + iOS/Mac #perfmatters

  4. @cssradar @hiloki @t32k @1000ch @ahomu Frontend Weekly • ࠃ಺֎ͷϑϩϯτΤϯυ৘ใΛΩϡϨʔγϣϯ •

    िʹҰ౓ਫ༵೔ʹ഑৴
  5. @cssradar @hiloki @t32k @1000ch @ahomu Frontend Weekly • ࠃ಺֎ͷϑϩϯτΤϯυ৘ใΛΩϡϨʔγϣϯ •

    िʹҰ౓ਫ༵೔ʹ഑৴ https://frontendweekly.tokyo
  6. ࡢࠓͷWebϑϩϯτΤϯυ…

  7. None
  8. ߴ౓Խ͢ΔWebϑϩϯτΤϯυ ߴ·Γଓ͚ΔϑϩϯτΤϯυͷൺॏ มΘΓଓ͚ΔWebΞϓϦέʔγϣϯ ૿͑ଓ͚Δ৽͍ٕ͠ज़ͱपลπʔϧ

  9. ʮؾ͍ͮͨ࣌ʹ͸ഇΕͯΔʯ ͳΜͯ͜ͱ΋͠͹͠͹

  10. ͦΜͳதͰ΋ ഇΕʹ͍ٕ͘ज़…

  11. Web Standards W3CɾWHATWGɾECMAͳͲ͕த৺ʹͳͬͯ Webͷඪ४ͱͳΔٕज़࢓༷Λࡦఆ͍ͯ͠Δ

  12. ࠷ۙྲྀߦΓͷ཈͓͖͍͑ͯͨ Webඪ४Λ͓͞Β͍ ※͜Ε͚ͩ΍Ε͹ΠΠͱ͍͏จ຺Ͱ͸ܾͯ͋͠Γ·ͤΜ

  13. ࠷ۙ΢ϫαͷ… Webඪ४ٕज़ ݫબ5બ

  14. 1. ECMAScript 2015

  15. ECMAScript 2015 Ϋϥεߏจ΍Ξϩʔؔ਺ɺPromiseͳͲ ػೳɾγϯλοΫεڞʹେ෯ʹڧԽ͞Εͨ ͍ΘΏΔES6΍Harmonyͱݺ͹ΕΔ΋ͷ 2015೥6݄ʹ6th edition͕ඪ४Խ͞Εͨ Chrome΍Firefox͕࣮૷ΛਐΊΔ΋ γΣΞશମΛݟΔͱ·ͩ·ͩ๡͍͠ !

    ? ♥
  16. 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
  17. ͍·͔Β͸͡ΊΔECMAScript 6 http://www.slideshare.net/1000ch/begin-ecmascript6

  18. ͍·͙͢׆͔͢ʂ࠷৽JavaScript WEB+DB PRESS Vol.87 ಛू1

  19. 2. CSS.next

  20. CSS.next Selector Level4ɾNotationɾϓϩύςΟͳͲ ػೳ໘Ͱ༷ʑͳڧԽ͕ͳ͞Ε͍ͯΔ ʮCSS3Ͱ੝Γ্͕ͬͨʙʯҎ߱ͷมߋ ϓϦϓϩηοαͷӨڹΛड͚͍ͯΔ ES6ಉ༷ϒϥ΢βͷରԠঢ়گ͸ࢥΘ͘͠ͳ͍ ! ? ♥

  21. 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; }
  22. cssnextͰΈΔ࣍ੈ୅CSSͱPostCSS http://blog.yucchiy.com/2015/04/22/cssnext-postcss-for- nextgeneration-of-css

  23. 3. HTTP/2

  24. HTTP/2 ! ? ♥ ϓϩτίϧϨϕϧͰ௨৴ޮ཰͕ྑ͘ͳΓ αʔόʔPushͳͲWebج൫ͱͯ͠΋ਐԽ WWWͰ࠾༻͞Ε͍ͯΔHTTPͷ 1.1͔Β2΁࣮ʹ16೥ͿΓόʔδϣϯUP ϒϥ΢β͓ΑͼαʔόʔͷରԠ͕ඞཁ طଘͷύϑΥʔϚϯεʹؔ͢Δϊ΢ϋ΢ͷݟ௚͠

  25. http://www.http2demo.io/

  26. HTTP/2ͷݱঢ়ͱ͜Ε͔Β http://www.slideshare.net/shigeki_ohtsu/http2-ohtsu-html5conf2015

  27. 4. Web Components

  28. Web Components ! ? ♥ HTML/CSS/JSͷείʔϓ໰୊ͷࠜຊతͳղܾ Web෦඼ͷ࠶ར༻ʹ޲͚ͨ ίϯϙʔωϯτԽͷ࡞๏ͷඪ४Խ ϒϥ΢βͷ࣮૷Ҏલʹɺ࢓༷͕Fix͍ͯ͠ͳ͍ ʢಛʹShadow

    DOMͱHTML Importsʣ
  29. http://1000ch.github.io/switch-element/

  30. ͳͥWeb Components͸΢Σϒ։ൃʹֵ໋Λى͜͢ͷ͔ https://blog.agektmr.com/2014/05/web-components.html

  31. جૅ͔ΒΘ͔Δ Web Components పఈղઆ https://html5experts.jp/series/web-components-2/

  32. 5. Service Worker

  33. Service Worker ! ? ♥ αʔόʔPushͷड৴΍ΦϑϥΠϯԽͳͲ Webʹ͓͚ΔϢʔβʔମݧΛେ͖͘ม͑Δ Push APIɾCache APIͳͲΛ୲͏

    ػೳΛ࣮ݱ͢Δ৽ͨͳWebͷج൫ٕज़ ηΩϡΞͳWebʢHTTPSʣͰ͔͠ར༻Ͱ͖ͳ͍
  34. https://1000ch.github.io/todo/

  35. Service Workerʹؔ͢Δ࢓༷ͱ͔ػೳͱ͔ https://1000ch.net/posts/2014/service-worker-internals.html

  36. Service Workerͷ঺հ http://www.html5rocks.com/ja/tutorials/service-worker/introduction

  37. ʮศརͦ͏ͳͷ͸Θ͔ͬͨʯ ʮࢼͯ͠Έ͍ͨؾ΋͢Δʯ

  38. ʮϒϥ΢βͷରԠঢ়گͬͯ Ͳ͏ͳΜͰ͠ΐ͏…ʯ

  39. How to fallback?

  40. ES 2015 CSS.next HTTP/2 Web Components Service Worker

  41. ES 2015 CSS.next HTTP/2 Web Components Service Worker BabelɾCSSnextɾAutoprefixerͱ ͍ͬͨΑ͏ͳ֤छπʔϧ࢖ͬͯɺ

    ඇରԠϒϥ΢βͰ΋࣮ߦͰ͖ΔΑ ͏ͳJavaScriptʹม׵ʢτϥϯε ύΠϧʣ͢Δ
  42. ES 2015 CSS.next HTTP/2 Web Components Service Worker ΫϥΠΞϯτͱͷΤϯυϙΠϯτ αʔόʔʹHTTP/2ΛରԠͤ͞Δ

    ʢΫϥΠΞϯτ͕HTTP/2ʹରԠ͠ ͍ͯΕ͹HTTP/2Ͱ௨৴͠ɺඇରԠ Ͱ͋Ε͹HTTP/1.1ʹʣ
  43. ES 2015 CSS.next HTTP/2 Web Components Service Worker WebComponents.jsͱ͍͏ϙϦϑΟ ϧΛ࢖͏͜ͱͰݹ͍ϒϥ΢β

    ʢSafari 7+ɾIE11+ʣͰ΋͋Δఔ౓ ࣮ߦͰ͖ΔΑ͏ʹͳΔ
  44. ES 2015 CSS.next HTTP/2 Web Components Service Worker ΦϑϥΠϯରԠ΋αʔόʔPushΛ ඞਢͷཁ݅ͱ͠ͳ͚Ε͹ɺͦ΋ͦ

    ΋ΦϓτΠϯͱͯ͠ಋೖ͠΍͍͢ɻ ରԠ͍ͯ͠Δϒϥ΢βʹରͯͩ͠ ͚Ͱ΋ϢʔβʔΤϯήʔδϝϯτ ΛߴΊΒΕΔ
  45. ·ͱΊ தʹ͸ීٴͤͣʹඇਪ঑ʹͳ͍ͬͯ͘΋ͷ΋… ރΕʹ͍͕͘ಋೖ͠ʹ͘͞΋͔֬ʹ͋Δ ঺հͨ͠Ϟϊ͸ΩϟονΞοϓͯ͠ଛ͸ͳ͍

  46. खݩͰࢼͯ͠ΈΔ΋Α͠ αʔϏεʹऔΓೖΕΔ΋Α͠

  47. ※͝ར༻͸ܭըతʹ

  48. ͓ΘΓ + +ShogoSensui % & 1000ch 1000ch