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

秋のJavaScriptt祭り 2016年10月 LT

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