Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Componentsを1年使って / jsfes 2016-10
Search
Kenichiro Kishida
October 16, 2016
Technology
0
480
Web Componentsを1年使って / jsfes 2016-10
秋のJavaScriptt祭り 2016年10月 LT
Kenichiro Kishida
October 16, 2016
Tweet
Share
More Decks by Kenichiro Kishida
See All by Kenichiro Kishida
Code兄弟での CI/CDをいい感じにする方法 / phpstudy-2024-06
sizuhiko
0
180
Webアクセシビリティワークショップを社内でやってみた / phpconfuk-2024
sizuhiko
1
350
デベロッパーよ 健康でいるためには 寝て 旅をして 趣味を持って メンタル大切に / DE-RADIO-2023-06-26
sizuhiko
0
140
ヘビータブユーザーが ワークスペースの利用でどのように変わったか / 2023-05-16 Vivaldi User Meetup TOKYO 2023
sizuhiko
0
320
Node.js v18 ベースイメージを使った AWS Lambda アプリ開発におけつ光と影 / 2023-04-23 JavaScript Fes
sizuhiko
0
200
@swc-node/jest を使って テストを高速化する/jsfes-2022
sizuhiko
0
370
Rails 7の採用提案で注目を集め始めた Import maps の過去、現在、そして未来について/de radio 2
sizuhiko
2
1.4k
勉強会主体で サービスを作るということ/esm-meetup-3
sizuhiko
0
350
オンライン勉強会や イベントで 盛り上がりを共有したい!/jsfes2021-summer
sizuhiko
0
710
Other Decks in Technology
See All in Technology
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
3
460
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
200
GitHub Copilot の概要
tomokusaba
1
130
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1k
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
140
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
200
Javaで作る RAGを活用した Q&Aアプリケーション
recruitengineers
PRO
1
100
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
250
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
16
5.3k
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
660
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
Кто отправит outbox? Валентин Удальцов, автор канала Пых
lamodatech
0
330
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Bash Introduction
62gerente
614
210k
Being A Developer After 40
akosma
90
590k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
33
5.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
Why Our Code Smells
bkeepers
PRO
337
57k
Transcript
8FC$PNQPOFOUT Λͬͯ ळͷ+BWB4DSJQUࡇΓCZ!TJ[VIJLP
,FOJDIJSP,JTIJEB 5PLZP +"1"/ TJ[VIJLP!HNBJMDPN !TJ[VIJLP IUUQTHJUIVCDPNTJ[VIJLP IUUQCMPHPQFOUPLZPKQ
େࣄͳ͜ͱ࠷ॳʹ
ͦ͏ͩ1PMZNFS͓͏ 1PMZNFS
1PMZNFS https://www.polymer-project.org
˞썪쎅-5쎆ൃදऀ쎅 ɹมଶత쎁1PMZNFSѪ쎂ຬ썸썽썛쎕썰 ɹ썫ҙ썦썷썬썛
͍ͨ͘ͳΔཧ༝ w ֶशίετ͕͍ +4͕গͳΊʣ w 41"͡Όͳͯ͘ྑ͍ w 8$ඪ४ʹ͍ۙʢಠࣗͰͳ͍ʣ w ͢Ͱʹଟͷίϯϙʔωϯτ͕͋Δ
w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ w Ϋϩεϒϥβʢ1PMZpMMʣ
Α͘ݴΘΕΔ͜ͱ w ͱΜ͕ͬͯΔͶʂ w ͍ͬͯΔਓ͡Ίͯݟͨ w ͑Δͷʁ w ੲ
ͬͨ͜ͱ͋Δ w ͭΒ͘ͳ͍ʁ
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!!
ۤ썮썴썝썢ɺࠔ썺썶쎁 ۤ썮썛쎅쎆썶쎡લ쎁쎪썷써쎀쎁 쎆ւਤ쎅쎁썛ߤ࿏쎩ߦ썦쎪썷쎤ʁ ઓ썰쎢쎅쎙ɺੜ쎖ग़썰쎅쎙ɺۤ썮썛쎟 썾쎙ɺॆ࣮썮썽쎢 ʮ࢛݄܅ͷӕʯΑΓ༗അެਖ਼ͷ໊ݴ
Α͔ͬͨ͜ͱ w )5.-λά࠶ར༻ੑ͕ߴ͍ w ಈ͖ͷ͋Δϖʔδ͕؆୯ʹ࡞ΕΔ w ϒϩοΫΛΈཱͯΔΑ͏ͩ w άϩʔόϧԚછͳʹͦΕ w
͡ΊͯͷਓೃછΈ͍͢ w ʢ׳Εͨਓ͕͍ͨํ͕ྑ͍ʣ
͍ͨ͘ͳΔཧ༝ w ֶशίετ͕͍ +4͕গͳΊʣ w 41"͡Όͳͯ͘ྑ͍ w 8$ඪ४ʹ͍ۙʢಠࣗͰͳ͍ʣ w ͢Ͱʹଟͷίϯϙʔωϯτ͕͋Δ
w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ w Ϋϩεϒϥβʢ1PMZpMMʣ
WebComponent ͬͯ·͔͢ʁ
8FC$PNQPOFOUT w4IBEPX%0. w$VTUPN&MFNFOUT w)5.-*NQPSUT w)5.-5FNQMBUFT https://github.com/w3c/webcomponents
ݱࡏʹϐϯΛཱͯͨਤΛද͍ࣔͨ͠
<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>
<geo-location latitude=“{{lat}}" longitude=“{{lng}}”/> <google-map latitude=“[[lat]]" longitude="[[lng]]" zoom="17"> <google-map-marker latitude="[[lat]]" longitude=“[[lng]]"
/> </google-map>
ಠࣗ$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>
+BWB4DSJQU쎆؆୯썾썤썷써쎀 썴쎣쎆8FC썾Ձ쎩ग़썰썶쎘쎅खஈ썾썙썺썽 +4গ쎁쎘썾쎙࠷େݶ쎂Ձ썣ग़썲쎢ํ๏ 썷썺썶쎡ɺ खஈ썣తԽ썮쎁썛썪썿썣 ॏཁ썷썿ࢥ썝쎪썾썰쎟 ͱ͋Δ࠙ձͰ1PMZNFSѪ͕͍͖͗ͨ͢ͱ͖ͷൃݴ
͍ͨ͘ͳΔཧ༝ w ֶशίετ͕͍ +4͕গͳΊʣ w 41"͡Όͳͯ͘ྑ͍ w 8$ඪ४ʹ͍ۙʢಠࣗͰͳ͍ʣ w ͢Ͱʹଟͷίϯϙʔωϯτ͕͋Δ
w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ w Ϋϩεϒϥβʢ1PMZpMMʣ
w1PMZNFS w95BH w#040/*$ w4LBUF+4 w3FBDU+4 w"OHVMBS 8FC$PNQPOFOUT >8FC$PNQPOFOUTPSH
http://qiita.com/laco0416/items/a75da4d7c2f0a21e0344
http://qiita.com/ko2ic/items/2aa3090dec040bd78eeb
http://hayato.io/2016/shadowdomv1/
͍ͨ͘ͳΔཧ༝ w ֶशίετ͕͍ +4͕গͳΊʣ w 41"͡Όͳͯ͘ྑ͍ w 8$ඪ४ʹ͍ۙʢಠࣗͰͳ͍ʣ w ͢Ͱʹଟͷίϯϙʔωϯτ͕͋Δ
w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ w Ϋϩεϒϥβʢ1PMZpMMʣ
https://elements.polymer-project.org/
w8FC$PNQPOFOUT w%BUB#JOEJOH w#FIBWJPST w)FMQFST w.BUFSJBM%FTJHO w$-*5PPMT
ಠࣗ$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>
֦ுλά <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>
#FIBWJPST wڞ௨ॲཧΛఆٛͰ͖Δ wNJYJO
)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>
ͦ͏ͩ1PMZNFS͓͏ 1PMZNFS
WJTJUNZCMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp