I/O ‘18で発表された Polymer の update に見る Web Components の過去/現在、そして未来/Polymer Japan Cafe#3

*0bͰൃද͞Εͨ  1PMZNFSͷVQEBUFʹݟΔ 8FC$PNQPOFOUTͷ աڈݱࡏɺͦͯ͠ະདྷ 1PMZNFS+BQBO$BGF ,FOJDIJSP,JTIJEB !TJ[VIJLP

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

)JTUPSZ

೥ )5.-קࠂ  9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ

೥ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠ ೥ )5.-קࠂ  9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ

೥ J1IPOF͕ൃച ೥ )5.-קࠂ  9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ ೥ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠

೥ 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ ೥ )5.-קࠂ  9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ ೥ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠ ೥ J1IPOF͕ൃച
8FCͷϑϩϯτΤϯυ։ൃ͸ 8FCͰෳࡶԽ͍ͯͨ͠

೥ 5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε ೥ )5.-קࠂ  9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ ೥ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠ ೥
J1IPOF͕ൃച ೥ 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ 8$͸9)5.-ͱ͔ɺ Θ͚Θ͔ΒΜͷͰɺΈΜͳͷྗͰ ϒϥ΢βͷ3BXϨϕϧ"1*Λղ์ ͯ͠8FCͷੈքΛՃ଎͠Α͏

೥ )5.-קࠂ 1PMZNFS͕ϦϦʔε͞ΕΔ ೥ )5.-קࠂ  9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ ೥ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠ ೥
J1IPOF͕ൃച ೥ 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ ೥ 5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε

೥ 1PMZNFS͕ϦϦʔε͞ΕΔ )551͕ঝೝ͞ΕΔ ೥ )5.-קࠂ  9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ ೥ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠ ೥
J1IPOF͕ൃച ೥ 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ ೥ 5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε ೥ )5.-קࠂ 1PMZNFS͕ϦϦʔε͞ΕΔ

೥ 1PMZNFS͕ϦϦʔε͞ΕΔ 4BGBSJ͕4IBEPX%0.ʹରԠͨ͠ 1PMZNFS͕ൃද͞ΕΔ 4FSWJDF8PSLFS͕8FCLJUͰ։ൃதʹ )5.-קࠂ ೥ )5.-קࠂ  9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ ೥
"KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠ ೥ J1IPOF͕ൃച ೥ 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ ೥ 5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε ೥ )5.-קࠂ 1PMZNFS͕ϦϦʔε͞ΕΔ ೥ 1PMZNFS͕ϦϦʔε͞ΕΔ )551͕ঝೝ͞ΕΔ

೥ )5.-קࠂ  9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ ೥ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠ ೥ J1IPOF͕ൃച ೥ 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ
೥ 5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε ೥ )5.-קࠂ 1PMZNFS͕ϦϦʔε͞ΕΔ ೥ 1PMZNFS͕ϦϦʔε͞ΕΔ )551͕ঝೝ͞ΕΔ ೥ 1PMZNFS͕ϦϦʔε͞ΕΔ 4BGBSJ͕4IBEPX%0.ʹରԠͨ͠ 1PMZNFS͕ൃද͞ΕΔ 4FSWJDF8PSLFS͕8FCLJUͰ։ൃதʹ )5.-קࠂ ೥ 1PMZNFS͕ϦϦʔε͞Εͨ 4BGBSJ͕4FSWJDF8PSLFSʹରԠͨ͠ )5.-ͷࢀর࢓༷ʹ  8FC$PNQPOFOUT͕௥Ճ͞Εͨ

w ࠷৽ͷόʔδϣϯ͸ w όʔδϣϯ΋·ͩ·ͩݱ໾ w (PPHMFͷ$ISPNFνʔϜ͕։ൃ w 1PMZpMMͰ͸ͳ͍ 1PMZNFS

8FC$PNQPOFOUT w4IBEPX%0. w$VTUPN&MFNFOUT w)5.-*NQPSUT w)5.-5FNQMBUFT https://github.com/w3c/webcomponents

6TF5IF1MBUGPSN

<iron-ajax auto url="https://www.googleapis.com/youtube/v3/search" params='{"part":"snippet", "q":"polymer", "key": "xxxx", "type": "video"}' handle-as="json"
last-response="{{ajaxResponse}}"></iron-ajax> <template is="dom-repeat" items="[[ajaxResponse.items]]"> <div class="horizontal-section"> <h2><a href="[[url(item.id.videoId)]]" target="_blank">[[item.snippet.title]]</a></h2> <iron-image src="[[item.snippet.thumbnails.high.url]]" width="256" height="256" sizing="cover" preload fade></iron-image> <p>[[item.snippet.description]]</p> </div> </template> https://github.com/PolymerElements/iron-ajax

w8FC$PNQPOFOUTΛ࡞ΔͨΊͷܰྔ'8 wΞϓϦέʔγϣϯ΋࡞ΕΔ wঢ়ଶ؅ཧͱ͔͸ίϯϙʔωϯτ΍ผͷϥ ΠϒϥϦ͕ඞཁ wϑϧελοΫͰ͸ͳ͍ w5ZQF4DSJQUαϙʔτ

)5.-&MFNFOU ϓϩύςΟૢ࡞ ςϯϓϨʔτૢ࡞ σʔλόΠϯσΟϯά ࣮ࡍ΍Γ͍ͨࣄ

)5.-&MFNFOU 1PMZNFS1SPQFSUZ"DDFTTPST 1PMZNFS5FNQMBUF4UBNQ 1PMZNFS1SPQFSUZ&GGFDUT 1PMZNFS&MFNFOU

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

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

18"4UBSUFS,JU w -JU&MFNFOUͰ࡞ΒΕ ͨ18"σϞΞϓϦ w IUUQTHJUIVCDPN 1PMZNFSQXB TUBSUFSLJU w IUUQTQXBTUBSUFS
LJUBQQTQPUDPN

https://polymer-jp.org/

8IZVTF)5.-*NQPSU /FFEFE1PMZpMM #PXFS .BEFCZ1PMZNFS

/FFE1PMZpMM

UP&4.PEVMFT

#PXFSUPOQN

8FBSFGSJFOET https://custom-elements-everywhere.com/

ະདྷ

w$444IBEPX1BSUT  https://drafts.csswg.org/css-shadow-parts/ w$VTUPN&MFNFOU3FHJTUFST  https://github.com/w3c/webcomponents/issues/716 w1BDLBHFOBNFNBQT  https://github.com/domenic/package-name-maps w)5.-.PEVMFT  https://github.com/w3c/webcomponents/issues/645  https://github.com/PolymerLabs/html-modules-toolkit w)5.-5FNQMBUF*OTUBOUJBUJPO 
https://github.com/w3c/webcomponents/blob/gh-pages/ proposals/Template-Instantiation.md

$444IBEPX1BSUT wΧελϜϓϩύςΟͱͷҧ͍ wخ͍͜͠ͱ

$VTUPN&MFNFOU3FHJTUFST

1BDLBHFOBNFNBQT ͜͏ॻ͖͍ͨ

)5.-.PEVMFT

)5.-5FNQMBUF*OTUBOUJBUJPO

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

I/O ‘18で発表された Polymer の update に見る Web Componen...

I/O ‘18で発表された Polymer の update に見る Web Components の 過去/現在、そして未来/Polymer Japan Cafe#3

More Decks by Kenichiro Kishida

Other Decks in Technology

Featured

Transcript

I/O ‘18で発表された Polymer の update に見る Web Componen...

I/O ‘18で発表された Polymer の update に見る Web Components の過去/現在、そして未来/Polymer Japan Cafe#3