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
490
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
190
Webアクセシビリティワークショップを社内でやってみた / phpconfuk-2024
sizuhiko
1
370
デベロッパーよ 健康でいるためには 寝て 旅をして 趣味を持って メンタル大切に / DE-RADIO-2023-06-26
sizuhiko
0
150
ヘビータブユーザーが ワークスペースの利用でどのように変わったか / 2023-05-16 Vivaldi User Meetup TOKYO 2023
sizuhiko
0
330
Node.js v18 ベースイメージを使った AWS Lambda アプリ開発におけつ光と影 / 2023-04-23 JavaScript Fes
sizuhiko
0
210
@swc-node/jest を使って テストを高速化する/jsfes-2022
sizuhiko
0
390
Rails 7の採用提案で注目を集め始めた Import maps の過去、現在、そして未来について/de radio 2
sizuhiko
2
1.4k
勉強会主体で サービスを作るということ/esm-meetup-3
sizuhiko
0
350
オンライン勉強会や イベントで 盛り上がりを共有したい!/jsfes2021-summer
sizuhiko
0
720
Other Decks in Technology
See All in Technology
Modern Linux
oracle4engineer
PRO
0
100
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
230
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
170
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
430
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
0
110
テストを軸にした生き残り術
kworkdev
PRO
0
210
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
430
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.4k
Language Update: Java
skrb
2
300
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.2k
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
870
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
250
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.8k
BBQ
matthewcrist
89
9.8k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
RailsConf 2023
tenderlove
30
1.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Practical Orchestrator
shlominoach
190
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
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