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
900
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.2k
Web Componentsとlit-element #frontkansai
tiwu_dev
2
1.5k
Other Decks in Technology
See All in Technology
Wasmのエコシステムを使った ツール作成方法
askua
0
160
オープンソースでどこまでできる?フォーマル検証チャレンジ
msyksphinz
0
130
Findy Team+ QAチーム これからのチャレンジ!
findy_eventslides
0
150
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
160
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
160
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
260
2025-10-09_プロジェクトマネージャーAIチャンス
taukami
0
140
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
ryo_suzuki
0
210
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
570
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
320
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
270
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
4
870
Featured
See All Featured
Scaling GitHub
holman
463
140k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Documentation Writing (for coders)
carmenintech
75
5.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
For a Future-Friendly Web
brad_frost
180
9.9k
Unsuck your backbone
ammeep
671
58k
The World Runs on Bad Software
bkeepers
PRO
72
11k
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
ご清聴ありがとうございました