$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
今日から始めるWeb Components
Search
Hayashi Takao
April 25, 2020
0
77
今日から始めるWeb Components
WebComponentsの概要に触れました。
Hayashi Takao
April 25, 2020
Tweet
Share
More Decks by Hayashi Takao
See All by Hayashi Takao
Reactで始めるsencer入門
remrem0090
0
48
今日から始めるgithub actions
remrem0090
0
43
Reactでのマルチストア運用を考察する
remrem0090
0
220
effectorを使い倒してReduxのかわりになるか検証する
remrem0090
1
780
React code Splitting
remrem0090
1
550
Featured
See All Featured
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
0
59
Java REST API Framework Comparison - PWX 2021
mraible
34
9k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
120
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
0
270
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.6k
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
0
170
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
170
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
2
2.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.8k
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は未来のフロントエンドの実装を表現してくれる。