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入門 #gotandajs
Search
tiwu
May 10, 2019
Technology
2
410
Web Components入門 #gotandajs
https://gotandajs.connpass.com/event/127779/
Gotanda.js #11 in MobileFactory
で発表した資料です
tiwu
May 10, 2019
Tweet
Share
More Decks by tiwu
See All by tiwu
Eleventy で SSG
tiwu_dev
2
680
Eleventy - 11ty
tiwu_dev
0
140
Install for PWA
tiwu_dev
0
1.4k
App Shortcuts
tiwu_dev
0
890
Web Vitals
tiwu_dev
0
72
Web Share API
tiwu_dev
0
1.4k
Badge in Background
tiwu_dev
0
73
PWAとCache API #frontkansai
tiwu_dev
5
2.1k
Web Componentsとlit-element #frontkansai
tiwu_dev
2
1.5k
Other Decks in Technology
See All in Technology
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
4
780
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
2
600
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
3.3k
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
230
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
1.2k
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
180
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
160
ComposeではないコードをCompose化する case ビズリーチ / DroidKaigi 2025 koyasai
visional_engineering_and_design
0
110
Uncle Bobの「プロフェッショナリズムへの期待」から学ぶプロの覚悟
nakasho
2
110
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
720
社内報はAIにやらせよう / Let AI handle the company newsletter
saka2jp
8
1.4k
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
6
1k
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
How STYLIGHT went responsive
nonsquared
100
5.8k
Automating Front-end Workflow
addyosmani
1371
200k
Documentation Writing (for coders)
carmenintech
75
5k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Six Lessons from altMBA
skipperchong
28
4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
How to Ace a Technical Interview
jacobian
280
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Balancing Empowerment & Direction
lara
4
690
Transcript
Web Components入門 Wataru Taguchi
アジェンダ - 自己紹介 - Web Componentsとは - 例 - メリット
- カスタム要素 - Shadow DOM - 作り方・使い方 - 事例 - まとめ
自己紹介 # Wataru Taguchi - GameWith Front End Engineer -
PWAとかWeb Componentsとかパフォーマンス チューニングが好き - @tiwu_official - FF14, Beer, Kyoto Animation
Web Componentsとは Vanilla JS、HTML、CSS を使用して 再利用可能なコンポーネントを作成する仕組み
例 https://informal-gotanda-js-web-components.netlify.com/
例
例
- ライブラリに依存せずコンポーネントを作成できる - どんなサイトでも動く - Scoped CSSが書ける - 命名ルール地獄からの解放 -
DOMを隠す - document.querySelectorで取得できない メリット
- カスタム要素 - 新しくHTMLタグを作成する - Shadow DOM - DOMを隠すことができる Web
Componentsを構成する技術
- customElements.define() - 新しいタグを定義することができる - 新しいタグは必ずダッシュ(-)が必要 - 例:◦hoge-button × hogebutton カスタム要素
- attachShadow() - Shadow DOMを取得できる - innerHTMLやappendChildを利用して追加ができる Shadow DOM
None
None
- https://www.youtube.com/ - https://voice.ameba.jp/ - https://support.pairs.lv/hc/ja/ - https://www.ikyu.com/kankou/kyoto/ - AMPのコンポーネントはWeb
Componets 事例
- ライブラリに依存せずコンポーネントが作れる - Scoped CSSが書ける - カスタム要素とShadow DOM - 静的なコンポーネントなら簡単に作れる
- 結構大手のサイトで使われている まとめ
Q : 対応ブラウザは? A : Edge以外大丈夫 Q&A
Q : Edgeどうすれば・・? A : Chromiumベースになるから大丈夫だろう・・・ Q&A
Q : クライアントサイドでレンダリングされるということは SEOが・・・ A : Google I/Oで最新Chromiumレンダリングエンジンを サポートすることが発表されたから大丈夫 Q&A
ご清聴ありがとうございました