いろいろなWeb Components #ginzajs

by tiwu

Slide 1

Slide 1 text

いろいろなWeb Components Wataru Taguchi

Slide 2

Slide 2 text

アジェンダ - 自己紹介 - Web Componentsとは - メリット - いろいろなWeb Components - 事例 - Q&A - まとめ

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

- ライブラリに依存せずコンポーネントを作成できる - ビルド作業はない - どんなサイトでも動く - Scoped CSSが書ける - 命名ルール地獄からの解放メリット

Slide 6

Slide 6 text

- カスタム要素 - 新しくHTMLタグを作成する - Shadow DOM - DOMを隠すことができる Web Componentsを構成する技術

Slide 7

Slide 7 text

https://web-components-sample.netlify.com/ デモ

Slide 8

Slide 8 text

シンプルなボタン

Slide 9

Slide 9 text

シンプルなボタン text属性を利用し表示 cssとHTMLをまとめて配布する

Slide 10

Slide 10 text

シンプルなボタン

Slide 11

Slide 11 text

シンプルなボタン slotを利用して表示 imgやpやspanとか利用できる

Slide 12

Slide 12 text

遷移に使ってみたり

Slide 13

Slide 13 text

遷移に使ってみたり blue-buttonを利用してaでラップする遷移先とテキストは属性を使って渡す

Slide 14

Slide 14 text

任意の処理するボタンにしてみたり

Slide 15

Slide 15 text

任意の処理するボタンにしてみたりロジックも閉じ込めて配布する

Slide 16

Slide 16 text

条件分岐いれてみたり

Slide 17

Slide 17 text

条件分岐いれてみたり多彩な振る舞いのコンポーネントも作れる

Slide 18

Slide 18 text

- https://www.youtube.com/ - https://voice.ameba.jp/ - https://support.pairs.lv/hc/ja/ - 日経電子版（現在リニューアル中）事例

Slide 19

Slide 19 text

Q : 対応ブラウザは？ A : Edge以外大丈夫 Q&A

Slide 20

Slide 20 text

Q : Edgeどうすれば・・？ A : Chromiumベースになるから大丈夫だろう・・・ Q&A

Slide 21

Slide 21 text

Q : クライアントサイドでレンダリングされるということは SEOが・・・ A : Google I/Oで最新Chromiumレンダリングエンジンをサポートすることが発表されたから大丈夫 Q&A

Slide 22

Slide 22 text

- ライブラリに依存せずコンポーネントが作れる - Scoped CSSが書ける - カスタム要素とShadow DOM - 静的なコンポーネントなら簡単に作れる - 結構大手のサイトで使われているまとめ