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

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

Transcript

1. $ISPNF%FW4VNNJU
   `
   ͰͷൃදʹݟΔ
   8FC
   $PNQPOFOUT
   ͷ
   աڈݱࡏɺͦͯ͠ະདྷ 
   ळͷ+BWB4DSJQUࡇ
    ,FOJDIJSP
   ,JTIJEB
   !TJ[VIJLP
2. ,FOJDIJSP
   ,JTIJEB
   5PLZP
   +"1"/
   TJ[VIJLP!HNBJMDPN
   
   !TJ[VIJLP
   IUUQTHJUIVCDPNTJ[VIJLP
   IUUQCMPHPQFOUPLZPKQ
   
4. https://polymer-jp.org/
5. /FFE
   1PMZpMM
   
6. 6TF5IF1MBUGPSN
7. 5IF
   8FC
   4UBDL Web primitives Built-in modules Frameworks Web Components Day 2 Keynote (Chrome Dev Summit 2018) https://youtu.be/SbUAkQ_s7Os
8. !BOHVMBSFMFNFOUT https://angular.io/api/elements
9. 7VF
   $VTUPN
   &MFNFOU https://karol-f.github.io/vue-custom-element/
10. /FX
    8FCTJUF w -JU&MFNFOUMJUIUNM
    w 18"
    4UBSUFS
    ,JU
    w .BUFSJBM8FC$PNQP OFOUT1PMZNFS
    &MFNFOUT
    w 1PMZNFS
    -JCSBSZ
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. "CPVU
    UIF
    1PMZNFS
    1SPKFDU
12. .BUFSJBM
    DPNQPOFOUT w (PPHMF
    *0
    Ͱൃද͞ Εͨ৽͍͠σβΠϯͷ 8FC
    $PNQPOFOUT
    w IUUQTHJUIVCDPN NBUFSJBMDPNQPOFOUT NBUFSJBMDPNQPOFOUT XFCDPNQPOFOUT
    w IUUQTNBUFSJBMDPNQPOFOUTHJUIVCJP NBUFSJBMDPNQPOFOUTXFCDPNQPOFOUT EFNPTJOEFYIUNM
13. -JU&MFNFOU w 1PMZNFSϕʔεͷ௒ ܰྔ
    $VTUPN&MFNFOU ϕʔεΫϥε
    w IUUQTHJUIVCDPN 1PMZNFSMJUFMFNFOU <script src="node_modules/@webcomponents/webcomponents-bundle.js"></script> <script type="module"> import {LitElement, html} from '@polymer/lit-element'; class MyElement extends LitElement { static get properties() { return { mood: String }} _render({mood}) { return html`<style> .mood { color: green; } </style> Web Components are <span class="mood">${mood}</span>!`; } } customElements.define('my-element', MyElement); </script> <my-element mood="happy"></my-element>
14. 18"
    4UBSUFS
    ,JU w 1PMZNFSͰ࡞ΒΕͨ 18"σϞΞϓϦ
    w IUUQTHJUIVCDPN 1PMZNFSQXB TUBSUFSLJU
    w IUUQTQXBTUBSUFS LJUBQQTQPUDPN
15. 5.19
 2018 11.17
 2018 ▶︎
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
17. Polymer CLI Versions 1.6.0 1.7.0 pre 4 ▶︎ Up
18. w -BUFTU
    SFMFBTFT
    GSPN
    UIF
    1PMZNFS
    1SPKFDU
 https://www.polymer-project.org/blog/2018-10-22-latest-releases-update
    w %BZ
    
    ,FZOPUF
    $ISPNF
    %FW
    4VNNJU
     
 https://youtu.be/SbUAkQ_s7Os
    w WJSUVBMTDSPMMFS
    -FU
    UIFSF
    CF
    MFTT
    %0.
    $ISPNF
    %FW
    4VNNJU
     
 https://youtu.be/UtD41bn6kJ0
    w #VJMEJOH
    &OHBHJOH
    *NNFSTJWF
    &YQFSJFODFT
    $ISPNF
    %FW
    4VNNJU
     
 https://youtu.be/ylz2EbWueKw
    w 5IF
    7JSUVF
    PG
    -B[JOFTT
    -FWFSBHJOH
    *ODSFNFOUBMJUZ
    GPS
    'BTUFS
    8FC
    6*
    $ISPNF
    %FW
    4VNNJU
     
 https://youtu.be/ypPRdtjGooc

20. + )5.-ͱ+4Ͱ8P5 8FC
    $PNQPOFOUT
22. http://blog.open.tokyo.jp/chirimen-piano/
23. WJTJU
    NZ
    CMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp