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

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

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

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

C4c161ae9eeeed8f161197410f7a228a?s=128

Kenichiro Kishida

November 17, 2018
Tweet

Transcript

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

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

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

  5. /FFE1PMZpMM

  6. 6TF5IF1MBUGPSN

  7. 5IF8FC4UBDL 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. /FX8FCTJUF 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. "CPVUUIF1PMZNFS1SPKFDU
  12. .BUFSJBMDPNQPOFOUT 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 -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

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

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

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