Web Componentsとlit-element #frontkansai

F7f43b56c430d12358a8581d9e331000?s=47 tiwu
November 02, 2019

Web Componentsとlit-element #frontkansai

FRONTEND CONFERENCE 2019 https://2019.kfug.jp/
のアンカファレンスで登壇した資料です

F7f43b56c430d12358a8581d9e331000?s=128

tiwu

November 02, 2019
Tweet

Transcript

  1. Web Components とLitElement Wataru Taguchi

  2. アジェンダ - 自己紹介 - Web Components - LitElement - 比較

    - 使ってみたツラミ - まとめ
  3. # Wataru Taguchi - GameWith Engineer - PWA, Web Components,

    AMP - パフォーマンスチューニングが好き - @tiwu_official - FF14, ストファイ5, Beer, Kyoto Animation 自己紹介
  4. Web Componentsとは Vanilla JS、HTML、CSS を使用して 再利用可能なコンポーネントを作成する仕組み

  5. 例 https://informal-gotanda-js-web-components.netlify.com/

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

    外から影響を受けない - css の影響を受けない - document.querySelectorで取得できない メリット
  7. - カスタム要素 - 新しくHTMLタグを作成する - Shadow DOM - DOMを隠すことができる Web

    Componentsを構成する技術
  8. - customElements.define() - 新しいタグを定義することができる - 新しいタグは必ずダッシュ(-)が必要 - 例:◦hoge-button × hogebutton カスタム要素

  9. - attachShadow() - Shadow DOMを取得できる - innerHTMLやappendChildを利用して追加ができる Shadow DOM

  10. None
  11. None
  12. ネイティブ要素の拡張

  13. https://web-components-sample.netlify.com/ いろいろなWeb Copmonents

  14. シンプルなボタン

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

  16. シンプルなボタン

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

  18. 遷移に使ってみたり

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

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

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

  22. 条件分岐いれてみたり

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

  24. LitElementとは 軽量で高速なWebコンポーネントをつくる シンプルなベースクラス

  25. - 宣言的に書ける - 要素は、プロパティが変更されると自動的に更新される - 軽い - lit-htmlが変更されたデータのみを再描画するため、DOMの更新は非常に高 速 -

    Web Componentsに準拠している - どのフレームワークでも動く - TypeScriptでも書ける メリット
  26. LitElementのサンプル

  27. Todoリスト https://lit-element-sample.netlify.com/

  28. Todoリスト my-todo my-list my-item my-input

  29. Todoリスト my-todo my-list my-item my-input 入力

  30. Todoリスト my-todo my-list my-item my-input 入力 CustomEvent発火

  31. Todoリスト my-todo my-list my-item my-input 入力 CustomEvent発火 入力された値を受け取って listに追加 &LSに追加

  32. Todoリスト my-todo my-list my-item my-input 入力 CustomEvent発火 入力された値を受け取って listに追加 &LSに追加

    リスト更新
  33. Todoリスト my-todo my-list my-item my-input 削除

  34. Todoリスト my-todo my-list my-item my-input 削除 CustomEvent発火

  35. Todoリスト my-todo my-list my-item my-input 削除 CustomEvent発火 CustomEvent発火

  36. Todoリスト my-todo my-list my-item my-input 削除 CustomEvent発火 indexを元にlistから削除 &LSに追加 CustomEvent発火

  37. Todoリスト my-todo my-list my-item my-input 削除 CustomEvent発火 CustomEvent発火 indexを元にlistから削除 &LSに追加

    リスト更新
  38. 比較 my-input addEventListenerを利用し、イベントを付与 inputのvalueは直接DOM弄りを空にする

  39. 比較 my-input @clickを利用し、イベントを付与 inputのvalueは直接DOMは弄らず空にする

  40. 比較 my-item addEventListenerを利用し、イベントを付与 indexはattributeから取得

  41. 比較 my-item @clickを利用し、イベントを付与 indexはClassの変数から取得

  42. 比較 my-list observedAttributesを利用しlistプロ パティの変更を監視 attributeChangedCallbackで変更 があったら、my-itemを削除して新し いlistを元にmy-itemをDOMに挿入 する my-itemにdeleteイベントを貼って、 deleteイベントを再度発火させる

  43. 比較 my-list this.list.mapを利用してmy-itemを表示させる @my-delete-eventでイベントを貼って、再度発火させる

  44. 比較 my-todo listはJSON.stringifyを使ってJSON文字列にして”をエスケープさせる listの追加、削除があったらsetAttributeを使って,リストを描画させる

  45. 比較 my-todo JSON文字列はエスケープ無しで問題なし list変数に変更を加えるだけで、リストの再描画が走る ※ filterではなくspliceを利用し削除したら再描画は走らなかった

  46. - 動的な値の変更・描画はLitElementが楽 - LitElementはcssの補完が効かないのが辛い - bundle size - web components

    1.5kb - LitElement 7.7kb 所感
  47. - https://www.youtube.com/ - https://voice.ameba.jp/ - https://support.pairs.lv/hc/ja/ - 日経電子版(現在リニューアル中) 事例

  48. 使ってみたツラミ https://the-my-best-todo-list.site/

  49. - input をShadow DOM 使って装飾ができない - form でinput のvalue を拾えない

    - ネイティブ要素でinput を拡張してみた - Shadow DOM を生やせない - https://developer.mozilla.org/ja/docs/Web/API/Element/attachShado w 使ってみたツラミ
  50. - slot を使ってパワープレイで装飾した 使ってみたツラミ

  51. - slot を使ってパワープレイで装飾した 使ってみたツラミ

  52. - 外部ライブラリが動かない - (当たり前だけど)Shadow DOM 内だと動かない - slot でパワープレイ 使ってみたツラミ

  53. - slot の装飾が1階層しか効かない 使ってみたツラミ

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

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

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

  57. - ライブラリに依存せずコンポーネントが作れる - Scoped CSSが書ける - LitElementは結構便利 - ただ描画周りは気をつける必要あり -

    結構大手のサイトで使われている まとめ
  58. Web Components / LitElement はいいぞ

  59. ご清聴ありがとうございました