Slide 1
Slide 1 text
Web Components入門
Wataru Taguchi
Slide 2
Slide 2 text
アジェンダ
- 自己紹介
- Web Componentsとは
- 例
- メリット
- カスタム要素
- Shadow DOM
- 作り方・使い方
- 事例
- まとめ
Slide 3
Slide 3 text
自己紹介
# Wataru Taguchi
- GameWith Front End Engineer
- PWAとかWeb Componentsとかパフォーマンス
チューニングが好き
- @tiwu_official
- FF14, Beer, Kyoto Animation
Slide 4
Slide 4 text
Web Componentsとは
Vanilla JS、HTML、CSS を使用して
再利用可能なコンポーネントを作成する仕組み
Slide 5
Slide 5 text
例
https://informal-gotanda-js-web-components.netlify.com/
Slide 6
Slide 6 text
例
Slide 7
Slide 7 text
例
Slide 8
Slide 8 text
- ライブラリに依存せずコンポーネントを作成できる
- どんなサイトでも動く
- Scoped CSSが書ける
- 命名ルール地獄からの解放
- DOMを隠す
- document.querySelectorで取得できない
メリット
Slide 9
Slide 9 text
- カスタム要素
- 新しくHTMLタグを作成する
- Shadow DOM
- DOMを隠すことができる
Web Componentsを構成する技術
Slide 10
Slide 10 text
- customElements.define()
- 新しいタグを定義することができる
- 新しいタグは必ずダッシュ（-）が必要
- 例：○hoge-button × hogebutton
カスタム要素
Slide 11
Slide 11 text
- attachShadow()
- Shadow DOMを取得できる
- innerHTMLやappendChildを利用して追加ができる
Shadow DOM
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
- https://www.youtube.com/
- https://voice.ameba.jp/
- https://support.pairs.lv/hc/ja/
- https://www.ikyu.com/kankou/kyoto/
- AMPのコンポーネントはWeb Componets
事例
Slide 15
Slide 15 text
- ライブラリに依存せずコンポーネントが作れる
- Scoped CSSが書ける
- カスタム要素とShadow DOM
- 静的なコンポーネントなら簡単に作れる
- 結構大手のサイトで使われている
まとめ
Slide 16
Slide 16 text
Q : 対応ブラウザは？
A : Edge以外大丈夫
Q&A
Slide 17
Slide 17 text
Q : Edgeどうすれば・・？
A : Chromiumベースになるから大丈夫だろう・・・
Q&A
Slide 18
Slide 18 text
Q : クライアントサイドでレンダリングされるということは
SEOが・・・
A : Google I/Oで最新Chromiumレンダリングエンジンを
サポートすることが発表されたから大丈夫
Q&A
Slide 19
Slide 19 text
ご清聴ありがとうございました