Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Web Componentsとlit-element #frontkansai
tiwu
November 02, 2019
Technology
2
250
Web Componentsとlit-element #frontkansai
FRONTEND CONFERENCE 2019
https://2019.kfug.jp/
のアンカファレンスで登壇した資料です
tiwu
November 02, 2019
Tweet
Share
More Decks by tiwu
See All by tiwu
tiwu_dev
2
210
tiwu_dev
0
45
tiwu_dev
0
170
tiwu_dev
0
19
tiwu_dev
0
38
tiwu_dev
0
180
tiwu_dev
0
27
tiwu_dev
5
750
tiwu_dev
0
410
Other Decks in Technology
See All in Technology
kilometer
0
150
hisaichi5518
0
190
sho7650
0
110
shimacos
2
360
clustervr
0
210
k1low
0
300
shomaekawa
3
1.3k
fujiihda
8
1.1k
harshbothra
0
150
pinboro
1
1.8k
yuyamada
7
510
fu3ak1
0
530
Featured
See All Featured
andyhume
62
3.5k
mongodb
23
3.8k
holman
461
280k
holman
288
130k
scottboms
251
11k
garrettdimon
287
110k
hannesfritz
27
930
tammielis
237
23k
chrislema
231
16k
jeffersonlam
328
15k
chriscoyier
145
19k
samlambert
237
9.9k
Transcript
Web Components とLitElement Wataru Taguchi
アジェンダ - 自己紹介 - Web Components - LitElement - 比較
- 使ってみたツラミ - まとめ
# Wataru Taguchi - GameWith Engineer - PWA, Web Components,
AMP - パフォーマンスチューニングが好き - @tiwu_official - FF14, ストファイ5, Beer, Kyoto Animation 自己紹介
Web Componentsとは Vanilla JS、HTML、CSS を使用して 再利用可能なコンポーネントを作成する仕組み
例 https://informal-gotanda-js-web-components.netlify.com/
例
例
- ライブラリに依存せずコンポーネントを作成できる - どんなサイトでも動く - Scoped CSSが書ける - 命名ルール地獄からの解放 -
外から影響を受けない - css の影響を受けない - document.querySelectorで取得できない メリット
- カスタム要素 - 新しくHTMLタグを作成する - Shadow DOM - DOMを隠すことができる Web
Componentsを構成する技術
- customElements.define() - 新しいタグを定義することができる - 新しいタグは必ずダッシュ(-)が必要 - 例:◦hoge-button × hogebutton カスタム要素
- attachShadow() - Shadow DOMを取得できる - innerHTMLやappendChildを利用して追加ができる Shadow DOM
None
None
ネイティブ要素の拡張
https://web-components-sample.netlify.com/ いろいろなWeb Copmonents
シンプルなボタン
シンプルなボタン text属性を利用し表示 cssとHTMLをまとめて配布する
シンプルなボタン
シンプルなボタン slotを利用して表示 imgやpやspanとか利用できる
遷移に使ってみたり
遷移に使ってみたり blue-buttonを利用してaでラップする 遷移先とテキストは属性を使って渡す
任意の処理するボタンにしてみたり
任意の処理するボタンにしてみたり ロジックも閉じ込めて配布する
条件分岐いれてみたり
条件分岐いれてみたり 多彩な振る舞いのコンポーネントも作 れる
LitElementとは 軽量で高速なWebコンポーネントをつくる シンプルなベースクラス
- 宣言的に書ける - 要素は、プロパティが変更されると自動的に更新される - 軽い - lit-htmlが変更されたデータのみを再描画するため、DOMの更新は非常に高 速 -
Web Componentsに準拠している - どのフレームワークでも動く - TypeScriptでも書ける メリット
LitElementのサンプル
Todoリスト https://lit-element-sample.netlify.com/
Todoリスト my-todo my-list my-item my-input
Todoリスト my-todo my-list my-item my-input 入力
Todoリスト my-todo my-list my-item my-input 入力 CustomEvent発火
Todoリスト my-todo my-list my-item my-input 入力 CustomEvent発火 入力された値を受け取って listに追加 &LSに追加
Todoリスト my-todo my-list my-item my-input 入力 CustomEvent発火 入力された値を受け取って listに追加 &LSに追加
リスト更新
Todoリスト my-todo my-list my-item my-input 削除
Todoリスト my-todo my-list my-item my-input 削除 CustomEvent発火
Todoリスト my-todo my-list my-item my-input 削除 CustomEvent発火 CustomEvent発火
Todoリスト my-todo my-list my-item my-input 削除 CustomEvent発火 indexを元にlistから削除 &LSに追加 CustomEvent発火
Todoリスト my-todo my-list my-item my-input 削除 CustomEvent発火 CustomEvent発火 indexを元にlistから削除 &LSに追加
リスト更新
比較 my-input addEventListenerを利用し、イベントを付与 inputのvalueは直接DOM弄りを空にする
比較 my-input @clickを利用し、イベントを付与 inputのvalueは直接DOMは弄らず空にする
比較 my-item addEventListenerを利用し、イベントを付与 indexはattributeから取得
比較 my-item @clickを利用し、イベントを付与 indexはClassの変数から取得
比較 my-list observedAttributesを利用しlistプロ パティの変更を監視 attributeChangedCallbackで変更 があったら、my-itemを削除して新し いlistを元にmy-itemをDOMに挿入 する my-itemにdeleteイベントを貼って、 deleteイベントを再度発火させる
比較 my-list this.list.mapを利用してmy-itemを表示させる @my-delete-eventでイベントを貼って、再度発火させる
比較 my-todo listはJSON.stringifyを使ってJSON文字列にして”をエスケープさせる listの追加、削除があったらsetAttributeを使って,リストを描画させる
比較 my-todo JSON文字列はエスケープ無しで問題なし list変数に変更を加えるだけで、リストの再描画が走る ※ filterではなくspliceを利用し削除したら再描画は走らなかった
- 動的な値の変更・描画はLitElementが楽 - LitElementはcssの補完が効かないのが辛い - bundle size - web components
1.5kb - LitElement 7.7kb 所感
- https://www.youtube.com/ - https://voice.ameba.jp/ - https://support.pairs.lv/hc/ja/ - 日経電子版(現在リニューアル中) 事例
使ってみたツラミ https://the-my-best-todo-list.site/
- input をShadow DOM 使って装飾ができない - form でinput のvalue を拾えない
- ネイティブ要素でinput を拡張してみた - Shadow DOM を生やせない - https://developer.mozilla.org/ja/docs/Web/API/Element/attachShado w 使ってみたツラミ
- slot を使ってパワープレイで装飾した 使ってみたツラミ
- slot を使ってパワープレイで装飾した 使ってみたツラミ
- 外部ライブラリが動かない - (当たり前だけど)Shadow DOM 内だと動かない - slot でパワープレイ 使ってみたツラミ
- slot の装飾が1階層しか効かない 使ってみたツラミ
Q : 対応ブラウザは? A : Edge以外大丈夫 Q&A
Q : Edgeどうすれば・・? A : Chromiumベースになるから大丈夫だろう・・・ Q&A
Q : クライアントサイドでレンダリングされるということは SEOが・・・ A : Google I/Oで最新Chromiumレンダリングエンジンを サポートすることが発表されたから大丈夫 Q&A
- ライブラリに依存せずコンポーネントが作れる - Scoped CSSが書ける - LitElementは結構便利 - ただ描画周りは気をつける必要あり -
結構大手のサイトで使われている まとめ
Web Components / LitElement はいいぞ
ご清聴ありがとうございました