Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Componentsとlit-element #frontkansai
Search
tiwu
November 02, 2019
Technology
2
1.3k
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
Eleventy で SSG
tiwu_dev
2
630
Eleventy - 11ty
tiwu_dev
0
120
Install for PWA
tiwu_dev
0
1.2k
App Shortcuts
tiwu_dev
0
820
Web Vitals
tiwu_dev
0
61
Web Share API
tiwu_dev
0
1.2k
Badge in Background
tiwu_dev
0
51
PWAとCache API #frontkansai
tiwu_dev
5
1.9k
Service Worker Life Cycle “Install” #pwanight
tiwu_dev
0
610
Other Decks in Technology
See All in Technology
Postman Vaultを使った秘密情報の安全な管理
nagix
3
100
第27回クラウド女子会 ~re:Invent 振り返りLT会~ 宣言型ポリシー、使ってみたらこうだった!
itkr2305
0
290
SREとしてスタッフエンジニアを目指す / SRE Kaigi 2025
tjun
15
6.2k
CNAPPから考えるAWSガバナンスの実践と最適化
nrinetcom
PRO
1
330
Mocking your codebase without cursing it
gaqzi
0
160
Microsoft Ignite 2024 最新情報!Microsoft 365 Agents SDK 概要 / Microsoft Ignite 2024 latest news Microsoft 365 Agents SDK overview
karamem0
0
190
ココナラのセキュリティ組織の体制・役割・今後目指す世界
coconala_engineer
0
220
信頼性を支えるテレメトリーパイプラインの構築 / Building Telemetry Pipeline with OpenTelemetry
ymotongpoo
9
4.9k
Redshiftを中心としたAWSでのデータ基盤
mashiike
0
100
顧客の声を集めて活かすリクルートPdMのVoC活用事例を徹底解剖!〜プロデザ!〜
recruitengineers
PRO
0
200
例外処理を理解して、設計段階からエラーを「見つけやすく」「起こりにくく」する
kajitack
12
3.7k
トレードオフスライダーにおける品質について考えてみた
suzuki_tada
3
180
Featured
See All Featured
Being A Developer After 40
akosma
89
590k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
11
900
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
30
2.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
192
16k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
GraphQLとの向き合い方2022年版
quramy
44
13k
Into the Great Unknown - MozCon
thekraken
34
1.6k
How to train your dragon (web standard)
notwaldorf
89
5.8k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
4 Signs Your Business is Dying
shpigford
182
22k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
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 はいいぞ
ご清聴ありがとうございました