ChromeDevSummit ’18 での発表に見る Web Components の過去/現在、そして未来/jsfes-2018-autumn

Chrome Dev Summit 2018 で発表された内容と、初夏のJavaScript祭りからのアップデートポイントについて解説します

Transcript

1. $ISPNF%FW4VNNJU`
   ͰͷൃදʹݟΔ
   8FC$PNQPOFOUTͷ
   աڈݱࡏɺͦͯ͠ະདྷ
   ळͷ+BWB4DSJQUࡇ
   ,FOJDIJSP,JTIJEB
   !TJ[VIJLP
   

   View Slide

2. ,FOJDIJSP,JTIJEB
   5PLZP +"1"/
   TJ[VIJLP!HNBJMDPN !TJ[VIJLP
   IUUQTHJUIVCDPNTJ[VIJLP
   IUUQCMPHPQFOUPLZPKQ
   

   View Slide

3. View Slide

4. https://polymer-jp.org/
   

   View Slide

5. /FFE1PMZpMM
   

   View Slide

6. 6TF5IF1MBUGPSN
   

   View Slide

7. 5IF8FC4UBDL
   Web primitives
   Built-in modules
   Frameworks
   Web Components
   Day 2 Keynote (Chrome Dev Summit 2018) https://youtu.be/SbUAkQ_s7Os
   

   View Slide

8. !BOHVMBSFMFNFOUT
   https://angular.io/api/elements
   

   View Slide

9. 7VF$VTUPN&MFNFOU
   https://karol-f.github.io/vue-custom-element/
   

   View Slide

10. /FX8FCTJUF
    w -JU&MFNFOUMJUIUNM
    w 18"4UBSUFS,JU
    w .BUFSJBM8FC$PNQP
    OFOUT1PMZNFS
    &MFNFOUT
    w 1PMZNFS-JCSBSZ
    

    View Slide

11. As front-end engineers in the Chrome team, our
    mission is to make the web better.
    We work on libraries and tools to help
    developers unlock the web’s full potential, taking
    advantage of cutting-edge features like Web
    Components, Service Workers and HTTP/2.
    We experiment with new patterns for building
    faster, smaller web applications.
    We advocate for standards, helping ensure that
    web developers have a strong voice in the
    process.
    "CPVUUIF1PMZNFS1SPKFDU
    

    View Slide

12. .BUFSJBMDPNQPOFOUT
    w (PPHMF*0Ͱൃද͞
    Εͨ৽͍͠σβΠϯͷ
    8FC$PNQPOFOUT
    w IUUQTHJUIVCDPN
    NBUFSJBMDPNQPOFOUT
    NBUFSJBMDPNQPOFOUT
    XFCDPNQPOFOUT
    w IUUQTNBUFSJBMDPNQPOFOUTHJUIVCJP
    NBUFSJBMDPNQPOFOUTXFCDPNQPOFOUT
    EFNPTJOEFYIUNM
    

    View Slide

13. -JU&MFNFOU
    w 1PMZNFSϕʔεͷ௒
    ܰྔ$VTUPN&MFNFOU
    ϕʔεΫϥε
    w IUUQTHJUIVCDPN
    1PMZNFSMJUFMFNFOU
    
    <br/>import {LitElement, html} from '@polymer/lit-element';<br/>class MyElement extends LitElement {<br/>static get properties() { return { mood: String }}<br/>_render({mood}) {<br/>return html`<style> .mood { color: green; } </style><br/>Web Components are <span class="mood">${mood}</span>!`;<br/>}<br/>}<br/>customElements.define('my-element', MyElement);<br/>
    
    

    View Slide

14. 18"4UBSUFS,JU
    w 1PMZNFSͰ࡞ΒΕͨ
    18"σϞΞϓϦ
    w IUUQTHJUIVCDPN
    1PMZNFSQXB
    TUBSUFSLJU
    w IUUQTQXBTUBSUFS
    LJUBQQTQPUDPN
    

    View Slide

15. 5.19

    2018
    11.17

    2018
    ▶︎
    

    View Slide

16. Polymer Versions
    • v1.11.3
    • v2.6.0
    • v3.0.2
    • 140

    releases
    • v1.11.3
    • v2.6.1
    • v3.1.0
    • 145

    releases
    ▶︎
    Up
    

    View Slide

17. Polymer CLI Versions
    1.6.0 1.7.0 pre 4
    ▶︎ Up
    

    View Slide

18. w -BUFTUSFMFBTFTGSPNUIF1PMZNFS1SPKFDU

    https://www.polymer-project.org/blog/2018-10-22-latest-releases-update
    
    w %BZ,FZOPUF $ISPNF%FW4VNNJU
    

    https://youtu.be/SbUAkQ_s7Os
    w WJSUVBMTDSPMMFS-FUUIFSFCFMFTT %0.
    
    $ISPNF%FW4VNNJU
    

    https://youtu.be/UtD41bn6kJ0
    w #VJMEJOH&OHBHJOH*NNFSTJWF&YQFSJFODFT
    $ISPNF%FW4VNNJU
    

    https://youtu.be/ylz2EbWueKw
    w 5IF7JSUVFPG-B[JOFTT-FWFSBHJOH
    *ODSFNFOUBMJUZGPS'BTUFS8FC6* $ISPNF
    %FW4VNNJU
    

    https://youtu.be/ypPRdtjGooc

    

    View Slide

19. View Slide

20. +
    )5.-ͱ+4Ͱ8P5 8FC$PNQPOFOUT
    

    View Slide

21. View Slide

22. http://blog.open.tokyo.jp/chirimen-piano/
    

    View Slide

23. WJTJUNZCMPHHJUIVC
    https://github.com/sizuhiko
    http://blog.open.tokyo.jp
    

    View Slide