Web Components入門 #gotandajs

https://gotandajs.connpass.com/event/127779/

Gotanda.js #11 in MobileFactory
で発表した資料です

Transcript

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