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標準技術」のセッションの資料です。

Shogo Sensui

August 27, 2015
Tweet

More Decks by Shogo Sensui

Other Decks in Technology

Transcript

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

    View Slide

  2. 1000ch

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  6. ࡢࠓͷWebϑϩϯτΤϯυ…

    View Slide

  7. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  14. 1. ECMAScript 2015

    View Slide

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

    View Slide

  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

    View Slide

  17. ͍·͔Β͸͡ΊΔECMAScript 6
    http://www.slideshare.net/1000ch/begin-ecmascript6

    View Slide

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

    View Slide

  19. 2. CSS.next

    View Slide

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

    View Slide

  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;
    }

    View Slide

  22. cssnextͰΈΔ࣍ੈ୅CSSͱPostCSS
    http://blog.yucchiy.com/2015/04/22/cssnext-postcss-for-
    nextgeneration-of-css

    View Slide

  23. 3. HTTP/2

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  27. 4. Web Components

    View Slide

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

    View Slide

  29. http://1000ch.github.io/switch-element/

    View Slide

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

    View Slide

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

    View Slide

  32. 5. Service Worker

    View Slide

  33. Service Worker
    !
    ?
    ♥ αʔόʔPushͷड৴΍ΦϑϥΠϯԽͳͲ
    Webʹ͓͚ΔϢʔβʔମݧΛେ͖͘ม͑Δ
    Push APIɾCache APIͳͲΛ୲͏
    ػೳΛ࣮ݱ͢Δ৽ͨͳWebͷج൫ٕज़
    ηΩϡΞͳWebʢHTTPSʣͰ͔͠ར༻Ͱ͖ͳ͍

    View Slide

  34. https://1000ch.github.io/todo/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  39. How to fallback?

    View Slide

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

    View Slide

  41. ES 2015
    CSS.next
    HTTP/2
    Web Components
    Service Worker
    BabelɾCSSnextɾAutoprefixerͱ
    ͍ͬͨΑ͏ͳ֤छπʔϧ࢖ͬͯɺ
    ඇରԠϒϥ΢βͰ΋࣮ߦͰ͖ΔΑ
    ͏ͳJavaScriptʹม׵ʢτϥϯε
    ύΠϧʣ͢Δ

    View Slide

  42. ES 2015
    CSS.next
    HTTP/2
    Web Components
    Service Worker
    ΫϥΠΞϯτͱͷΤϯυϙΠϯτ
    αʔόʔʹHTTP/2ΛରԠͤ͞Δ
    ʢΫϥΠΞϯτ͕HTTP/2ʹରԠ͠
    ͍ͯΕ͹HTTP/2Ͱ௨৴͠ɺඇରԠ
    Ͱ͋Ε͹HTTP/1.1ʹʣ

    View Slide

  43. ES 2015
    CSS.next
    HTTP/2
    Web Components
    Service Worker
    WebComponents.jsͱ͍͏ϙϦϑΟ
    ϧΛ࢖͏͜ͱͰݹ͍ϒϥ΢β
    ʢSafari 7+ɾIE11+ʣͰ΋͋Δఔ౓
    ࣮ߦͰ͖ΔΑ͏ʹͳΔ

    View Slide

  44. ES 2015
    CSS.next
    HTTP/2
    Web Components
    Service Worker
    ΦϑϥΠϯରԠ΋αʔόʔPushΛ
    ඞਢͷཁ݅ͱ͠ͳ͚Ε͹ɺͦ΋ͦ
    ΋ΦϓτΠϯͱͯ͠ಋೖ͠΍͍͢ɻ
    ରԠ͍ͯ͠Δϒϥ΢βʹରͯͩ͠
    ͚Ͱ΋ϢʔβʔΤϯήʔδϝϯτ
    ΛߴΊΒΕΔ

    View Slide

  45. ·ͱΊ
    தʹ͸ීٴͤͣʹඇਪ঑ʹͳ͍ͬͯ͘΋ͷ΋…
    ރΕʹ͍͕͘ಋೖ͠ʹ͘͞΋͔֬ʹ͋Δ
    ঺հͨ͠Ϟϊ͸ΩϟονΞοϓͯ͠ଛ͸ͳ͍

    View Slide

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

    View Slide

  47. ※͝ར༻͸ܭըతʹ

    View Slide

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

    View Slide