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

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

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

秋のJavaScriptt祭り 2016年10月 LT

Kenichiro Kishida

October 16, 2016
Tweet

More Decks by Kenichiro Kishida

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

  3. େࣄͳ͜ͱ͸࠷ॳʹ

    View Slide

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

    View Slide

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

    View Slide

  6. ˞썪쎅-5쎆ൃදऀ쎅

    ɹมଶత쎁1PMZNFSѪ쎂ຬ썸썽썛쎕썰

    ɹ썫஫ҙ썦썷썬썛

    View Slide

  7. ࢖͍ͨ͘ͳΔཧ༝
    w ֶशίετ͕௿͍ +4੒෼͕গͳΊʣ
    w 41"͡Όͳͯ͘΋ྑ͍
    w 8$ඪ४ʹ͍ۙʢಠࣗͰ͸ͳ͍ʣ
    w ͢Ͱʹଟ਺ͷίϯϙʔωϯτ͕͋Δ
    w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ
    w Ϋϩεϒϥ΢βʢ1PMZpMMʣ

    View Slide

  8. Α͘ݴΘΕΔ͜ͱ
    w ͱΜ͕ͬͯΔͶʂ
    w ࢖͍ͬͯΔਓ͸͡Ίͯݟͨ
    w ࢖͑Δͷʁ
    w ੲ
    ࢖ͬͨ͜ͱ͋Δ
    w ͭΒ͘ͳ͍ʁ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. ࢖͍ͨ͘ͳΔཧ༝
    w ֶशίετ͕௿͍ +4੒෼͕গͳΊʣ
    w 41"͡Όͳͯ͘΋ྑ͍
    w 8$ඪ४ʹ͍ۙʢಠࣗͰ͸ͳ͍ʣ
    w ͢Ͱʹଟ਺ͷίϯϙʔωϯτ͕͋Δ
    w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ
    w Ϋϩεϒϥ΢βʢ1PMZpMMʣ

    View Slide

  13. WebComponent

    ࢖ͬͯ·͔͢ʁ

    View Slide

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

    View Slide

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

    View Slide


  16. <br/>
    <br/>function createMap() {<br/>navigator.geolocation.getCurrentPosition(position => {<br/>const map = new google.maps.Map(document.getElementById('map'), {<br/>center: {<br/>lat: position.coords.latitude,<br/>lng: position.coords.longitude},<br/>zoom: 17<br/>});<br/>new google.maps.Marker({position: center, map: map});<br/>});<br/>}<br/>

    View Slide

  17. latitude=“{{lat}}"
    longitude=“{{lng}}”/>
    latitude=“[[lat]]"
    longitude="[[lng]]" zoom="17">
    latitude="[[lat]]"
    longitude=“[[lng]]" />

    View Slide

  18. ಠࣗ$PNQPOFOUT



    <br/><!— 独自のCSS —><br/>


    <br/>Polymer({<br/>is: 'タグ名',<br/>properties: {<br/>hoge: {type: Boolean, value: false} // HTMLのタグ属性などを定義<br/>},<br/>ready: function() { // コンポーネントが利用可能になったときの処理<br/>}<br/>});<br/>

    View Slide

  19. +BWB4DSJQU쎆؆୯썾޷썤썷써쎀
    썴쎣쎆8FC썾Ձ஋쎩ग़썰썶쎘쎅खஈ썾썙썺썽
    +4੒෼গ쎁쎘썾쎙࠷େݶ쎂Ձ஋썣ग़썲쎢ํ๏
    썷썺썶쎡ɺ
    खஈ썣໨తԽ썮쎁썛썪썿썣
    ॏཁ썷썿ࢥ썝쎪썾썰쎟
    ͱ͋Δ࠙਌ձͰ1PMZNFSѪ͕͍͖͗ͨ͢ͱ͖ͷൃݴ

    View Slide

  20. ࢖͍ͨ͘ͳΔཧ༝
    w ֶशίετ͕௿͍ +4੒෼͕গͳΊʣ
    w 41"͡Όͳͯ͘΋ྑ͍
    w 8$ඪ४ʹ͍ۙʢಠࣗͰ͸ͳ͍ʣ
    w ͢Ͱʹଟ਺ͷίϯϙʔωϯτ͕͋Δ
    w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ
    w Ϋϩεϒϥ΢βʢ1PMZpMMʣ

    View Slide

  21. w1PMZNFS
    w95BH
    w#040/*$
    w4LBUF+4
    w3FBDU+4
    w"OHVMBS
    8FC$PNQPOFOUT
    >8FC$PNQPOFOUTPSH

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  25. ࢖͍ͨ͘ͳΔཧ༝
    w ֶशίετ͕௿͍ +4੒෼͕গͳΊʣ
    w 41"͡Όͳͯ͘΋ྑ͍
    w 8$ඪ४ʹ͍ۙʢಠࣗͰ͸ͳ͍ʣ
    w ͢Ͱʹଟ਺ͷίϯϙʔωϯτ͕͋Δ
    w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ
    w Ϋϩεϒϥ΢βʢ1PMZpMMʣ

    View Slide

  26. https://elements.polymer-project.org/

    View Slide

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

    View Slide

  28. ಠࣗ$PNQPOFOUT



    <br/><!— 独自のCSS —><br/>


    <br/>Polymer({<br/>is: 'タグ名',<br/>properties: {<br/>hoge: {type: Boolean, value: false} // HTMLのタグ属性などを定義<br/>},<br/>ready: function() { // コンポーネントが利用可能になったときの処理<br/>}<br/>});<br/>

    View Slide

  29. ֦ுλά

    <br/>Polymer({<br/>is: 'my-input',<br/>extends: 'input',<br/>behaviors: [Polymer.IronValidatableBehavior],<br/>properties: {<br/>hoge: {type: Boolean, value: false} // HTMLのタグ属性などを定義<br/>},<br/>ready: function() { // コンポーネントが利用可能になったときの処理<br/>}<br/>});<br/>

    View Slide

  30. #FIBWJPST
    wڞ௨ॲཧΛఆٛͰ͖Δ
    wNJYJO

    View Slide

  31. )FMQFST
    response="{{users}}">


    {{user.name}}



    管理者だったら何か

    View Slide

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

    View Slide

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

    View Slide