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
Search
Hayashi Takao
April 25, 2020
0
71
今日から始めるWeb Components
WebComponentsの概要に触れました。
Hayashi Takao
April 25, 2020
Tweet
Share
More Decks by Hayashi Takao
See All by Hayashi Takao
Reactで始めるsencer入門
remrem0090
0
44
今日から始めるgithub actions
remrem0090
0
40
Reactでのマルチストア運用を考察する
remrem0090
0
210
effectorを使い倒してReduxのかわりになるか検証する
remrem0090
1
720
React code Splitting
remrem0090
1
520
Featured
See All Featured
Visualization
eitanlees
146
15k
The Cost Of JavaScript in 2023
addyosmani
46
7.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
Why Our Code Smells
bkeepers
PRO
335
57k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
560
Thoughts on Productivity
jonyablonski
68
4.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
230
52k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Measuring & Analyzing Core Web Vitals
bluesmoon
5
200
Done Done
chrislema
182
16k
Transcript
今日から始める Web components
アジェンダ - 自己紹介 - Web Componentsとは - Web Componentsの仕様 -
Web Componentsのつかいどころ - Web Componentsとライブラリ - 実際の書き方
自己紹介 林 恭央 / Hayashi Takao @www_REM_zzz takao-h Software Engineer
/ Scala, Java, TypeScript
Web Componentsとは? Web Componentsはwebページやwebアプリの中でカスタムUIの制御の使いまわしを 可能にする一連のテクノロジーです。 カプセル化された機能をつかってカスタムUIの再利用を実現します。
Web Componentsの仕様 Custom Element : 新しいタイプのDOM要素の設計と利用の基盤 Shadow DOM : カプセル化したスタイルとマークアップの利用法の定義をする
HTML import : HTMLと他のHTMLの取り込みを可能にする HTML Template : マークアップのフラグメントを宣言する
Custom Element
Custom Element
HTML import
HTML Template
Web Componentsとライブラリ 各種フロントエンドのライブラリとの共存が一応できる。 特にVue.jsでは相性がいい。 だが問題もある。 Reactにおいては関数を渡すときに宣言的に書くことができない。
まとめ - Web Componentsはカプセル化を含む一連の技術を使ってカスタムUIの使いまわ しを可能にしてれる。 - グローバルなUIの表示に向いている。 - Web Componentsは未来のフロントエンドの実装を表現してくれる。