Web Componentsを1年使って / jsfes 2016-10

Web Componentsを1年使って / jsfes 2016-10

秋のJavaScriptt祭り 2016年10月 LT

C4c161ae9eeeed8f161197410f7a228a?s=128

Kenichiro Kishida

October 16, 2016
Tweet

Transcript

  1. 8FC$PNQPOFOUT Λ೥࢖ͬͯ ळͷ+BWB4DSJQUࡇΓCZ!TJ[VIJLP

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

  3. େࣄͳ͜ͱ͸࠷ॳʹ

  4. ͦ͏ͩ1PMZNFS࢖͓͏ 1PMZNFS

  5. 1PMZNFS https://www.polymer-project.org

  6. ˞썪쎅-5쎆ൃදऀ쎅
 ɹมଶత쎁1PMZNFSѪ쎂ຬ썸썽썛쎕썰
 ɹ썫஫ҙ썦썷썬썛

  7. ࢖͍ͨ͘ͳΔཧ༝ w ֶशίετ͕௿͍ +4੒෼͕গͳΊʣ w 41"͡Όͳͯ͘΋ྑ͍ w 8$ඪ४ʹ͍ۙʢಠࣗͰ͸ͳ͍ʣ w ͢Ͱʹଟ਺ͷίϯϙʔωϯτ͕͋Δ

    w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ w Ϋϩεϒϥ΢βʢ1PMZpMMʣ
  8. Α͘ݴΘΕΔ͜ͱ w ͱΜ͕ͬͯΔͶʂ w ࢖͍ͬͯΔਓ͸͡Ίͯݟͨ w ࢖͑Δͷʁ w ੲ 

    ࢖ͬͨ͜ͱ͋Δ w ͭΒ͘ͳ͍ʁ
  9. w W w WW w WW w W w W

    w W w W w W w W https://github.com/Polymer/polymer/releases 89 Releases!!
  10. ۤ썮썴썝썢ɺࠔ썺썶쎁 ۤ썮썛쎅쎆౰썶쎡લ쎁쎪썷써쎀쎁 ๻쎆ւਤ쎅쎁썛ߤ࿏쎩ߦ썦쎪썷쎤ʁ ௅ઓ썰쎢쎅쎙ɺੜ쎖ग़썰쎅쎙ɺۤ썮썛쎟 썾쎙ɺॆ࣮썮썽쎢 ʮ࢛݄͸܅ͷӕʯΑΓ༗അެਖ਼ͷ໊ݴ

  11. Α͔ͬͨ͜ͱ w )5.-λά͸࠶ར༻ੑ͕ߴ͍ w ಈ͖ͷ͋Δϖʔδ͕؆୯ʹ࡞ΕΔ w ϒϩοΫΛ૊ΈཱͯΔΑ͏ͩ w άϩʔόϧԚછͳʹͦΕ w

    ͸͡Ίͯͷਓ΋ೃછΈ΍͍͢ w ʢ׳Εͨਓ͕͍ͨํ͕ྑ͍ʣ
  12. ࢖͍ͨ͘ͳΔཧ༝ w ֶशίετ͕௿͍ +4੒෼͕গͳΊʣ w 41"͡Όͳͯ͘΋ྑ͍ w 8$ඪ४ʹ͍ۙʢಠࣗͰ͸ͳ͍ʣ w ͢Ͱʹଟ਺ͷίϯϙʔωϯτ͕͋Δ

    w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ w Ϋϩεϒϥ΢βʢ1PMZpMMʣ
  13. WebComponent
 ࢖ͬͯ·͔͢ʁ

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

  15. ݱࡏ஍ʹϐϯΛཱͯͨ஍ਤΛද͍ࣔͨ͠

  16. <div id="map"></div> <script src="https://maps.googleapis.com/maps/api/js? callback=createMap"> </script> <script> function createMap() {

    navigator.geolocation.getCurrentPosition(position => { const map = new google.maps.Map(document.getElementById('map'), { center: { lat: position.coords.latitude, lng: position.coords.longitude}, zoom: 17 }); new google.maps.Marker({position: center, map: map}); }); } </script>
  17. <geo-location latitude=“{{lat}}" longitude=“{{lng}}”/> <google-map latitude=“[[lat]]" longitude="[[lng]]" zoom="17"> <google-map-marker latitude="[[lat]]" longitude=“[[lng]]"

    /> </google-map>
  18. ಠࣗ$PNQPOFOUT <link rel="import" href="../bower_components/polymer/polymer.html"> <dom-module id="タグ名"> <template> <style> <!— 独自のCSS

    —> </style> <!— 独自コンポーネントのHTML —> </template> <script> Polymer({ is: 'タグ名', properties: { hoge: {type: Boolean, value: false} // HTMLのタグ属性などを定義 }, ready: function() { // コンポーネントが利用可能になったときの処理 } }); </script> </dom-module>
  19. +BWB4DSJQU쎆؆୯썾޷썤썷써쎀 썴쎣쎆8FC썾Ձ஋쎩ग़썰썶쎘쎅खஈ썾썙썺썽 +4੒෼গ쎁쎘썾쎙࠷େݶ쎂Ձ஋썣ग़썲쎢ํ๏ 썷썺썶쎡ɺ खஈ썣໨తԽ썮쎁썛썪썿썣 ॏཁ썷썿ࢥ썝쎪썾썰쎟 ͱ͋Δ࠙਌ձͰ1PMZNFSѪ͕͍͖͗ͨ͢ͱ͖ͷൃݴ

  20. ࢖͍ͨ͘ͳΔཧ༝ w ֶशίετ͕௿͍ +4੒෼͕গͳΊʣ w 41"͡Όͳͯ͘΋ྑ͍ w 8$ඪ४ʹ͍ۙʢಠࣗͰ͸ͳ͍ʣ w ͢Ͱʹଟ਺ͷίϯϙʔωϯτ͕͋Δ

    w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ w Ϋϩεϒϥ΢βʢ1PMZpMMʣ
  21. w1PMZNFS w95BH w#040/*$ w4LBUF+4 w3FBDU+4 w"OHVMBS 8FC$PNQPOFOUT >8FC$PNQPOFOUTPSH

  22. http://qiita.com/laco0416/items/a75da4d7c2f0a21e0344

  23. http://qiita.com/ko2ic/items/2aa3090dec040bd78eeb

  24. http://hayato.io/2016/shadowdomv1/

  25. ࢖͍ͨ͘ͳΔཧ༝ w ֶशίετ͕௿͍ +4੒෼͕গͳΊʣ w 41"͡Όͳͯ͘΋ྑ͍ w 8$ඪ४ʹ͍ۙʢಠࣗͰ͸ͳ͍ʣ w ͢Ͱʹଟ਺ͷίϯϙʔωϯτ͕͋Δ

    w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ w Ϋϩεϒϥ΢βʢ1PMZpMMʣ
  26. https://elements.polymer-project.org/

  27. w8FC$PNQPOFOUT w%BUB#JOEJOH w#FIBWJPST w)FMQFST w.BUFSJBM%FTJHO w$-*5PPMT

  28. ಠࣗ$PNQPOFOUT <link rel="import" href="../bower_components/polymer/polymer.html"> <dom-module id="タグ名"> <template> <style> <!— 独自のCSS

    —> </style> <!— 独自コンポーネントのHTML —> </template> <script> Polymer({ is: 'タグ名', properties: { hoge: {type: Boolean, value: false} // HTMLのタグ属性などを定義 }, ready: function() { // コンポーネントが利用可能になったときの処理 } }); </script> </dom-module>
  29. ֦ுλά <link rel="import" href="../bower_components/polymer/polymer.html"> <script> Polymer({ is: 'my-input', extends: 'input',

    behaviors: [Polymer.IronValidatableBehavior], properties: { hoge: {type: Boolean, value: false} // HTMLのタグ属性などを定義 }, ready: function() { // コンポーネントが利用可能になったときの処理 } }); </script>
  30. #FIBWJPST wڞ௨ॲཧΛఆٛͰ͖Δ wNJYJO

  31. )FMQFST <iron-ajax url="/users" handle-as="json" method="GET" last- response="{{users}}"></iron-ajax> <ul> <template is="dom-repeat"

    items="[[users]]" as="user"> <li>{{user.name}}</li> </template> </ul> <template is="dom-if" if="[[admin]]"> <div>管理者だったら何か</div> </template>
  32. ͦ͏ͩ1PMZNFS࢖͓͏ 1PMZNFS

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