いろいろなWeb Components #ginzajs

Ginza.js#1
で登壇した資料です。

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

Transcript

1. いろいろなWeb Components Wataru Taguchi
2. アジェンダ - 自己紹介 - Web Componentsとは - メリット - いろいろなWeb Components - 事例 - Q&A - まとめ
3. 自己紹介 # Wataru Taguchi - GameWith Front End Engineer - PWAとかWeb Componentsとかパフォーマンス チューニングが好き - @tiwu_official - FF14, Beer, Kyoto Animation
4. Web Componentsとは Vanilla JS、HTML、CSS を使用して 再利用可能なコンポーネントを作成する仕組み
5. - ライブラリに依存せずコンポーネントを作成できる - ビルド作業はない - どんなサイトでも動く - Scoped CSSが書ける - 命名ルール地獄からの解放 メリット
6. - カスタム要素 - 新しくHTMLタグを作成する - Shadow DOM - DOMを隠すことができる Web Componentsを構成する技術
7. https://web-components-sample.netlify.com/ デモ
8. シンプルなボタン
9. シンプルなボタン text属性を利用し表示 cssとHTMLをまとめて配布する
10. シンプルなボタン
11. シンプルなボタン slotを利用して表示 imgやpやspanとか利用できる
12. 遷移に使ってみたり
13. 遷移に使ってみたり blue-buttonを利用してaでラップする 遷移先とテキストは属性を使って渡す
14. 任意の処理するボタンにしてみたり
15. 任意の処理するボタンにしてみたり ロジックも閉じ込めて配布する
16. 条件分岐いれてみたり
17. 条件分岐いれてみたり 多彩な振る舞いのコンポーネントも作 れる
18. - https://www.youtube.com/ - https://voice.ameba.jp/ - https://support.pairs.lv/hc/ja/ - 日経電子版（現在リニューアル中） 事例
19. Q : 対応ブラウザは？ A : Edge以外大丈夫 Q&A
20. Q : Edgeどうすれば・・？ A : Chromiumベースになるから大丈夫だろう・・・ Q&A
21. Q : クライアントサイドでレンダリングされるということは SEOが・・・ A : Google I/Oで最新Chromiumレンダリングエンジンを サポートすることが発表されたから大丈夫 Q&A
22. - ライブラリに依存せずコンポーネントが作れる - Scoped CSSが書ける - カスタム要素とShadow DOM - 静的なコンポーネントなら簡単に作れる - 結構大手のサイトで使われている まとめ
23. Web Componentsはいいぞ
24. ご清聴ありがとうございました