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
ponday
February 26, 2019
Programming
1
420
Web Componentsの今
FukuokaJS『三大フレームワーク + WebComponents』(2019/02/26)の発表資料です。
ponday
February 26, 2019
Tweet
Share
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
1
1.2k
TypeScriptの型表現
honda
10
3k
これまでのReact、これからのReact
honda
0
310
Gatsbyお試し
honda
0
110
styled-components or emotion?
honda
0
680
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
690
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
810
Web Componentsの動向とPolymer
honda
4
2.5k
Other Decks in Programming
See All in Programming
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ~他言語変換の仕組み~ / cdk-language-transformation
gotok365
7
370
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
cuebic9bic
1
240
マテリアルって何者?RealityKitで扱うマテリアル入門
nao_randd
0
140
❄️ tmux-nixの実装を通して学ぶNixOSモジュール
momeemt
1
120
事業KPIを基に価値の解像度を上げる
nealle
0
200
primeNumberでのRBS導入の現在 && RBS::Traceでinline RBSを拡充してみた
mnmandahalf
0
250
推論された型の移植性エラーTS2742に挑む
teamlab
PRO
0
150
OpenTelemetryで始めるベンダーフリーなobservability / Vendor-free observability starting with OpenTelemetry
seike460
PRO
0
160
JSAI2025 RecSysChallenge2024 優勝報告
unonao
1
370
TypeScript エンジニアが Android 開発の世界に飛び込んだ話
yuisakamoto
6
940
【TSkaigi 2025】これは型破り?型安全? 真実はいつもひとつ!(じゃないかもしれない)TypeScript クイズ〜〜〜〜!!!!!
kimitashoichi
1
300
rbs-traceを使ってWEARで型生成を試してみた After RubyKaigi 2025〜ZOZO、ファインディ、ピクシブ〜 / tried rbs-trace on WEAR
oyamakei
0
1k
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Designing for humans not robots
tammielis
253
25k
What's in a price? How to price your products and services
michaelherold
245
12k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
650
Measuring & Analyzing Core Web Vitals
bluesmoon
7
460
How to train your dragon (web standard)
notwaldorf
92
6k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
180
53k
A designer walks into a library…
pauljervisheath
205
24k
Transcript
Web Componentsの今 FukuokaJS『三大フレームワーク + WebComponents』 / Feb 26th, 2019 ponday
(@ponday_dev)
Profile - ponday (Honda, Yusuke) - 株式会社ベガコーポレーション - Like :
TypeScript / Elixir / Python etc… - 副業もやってます
ここの話
今日の内容 - Web Componentsとは? - Web Componentsの良いところ/つらいところ - Web Components向けのライブラリ
- JSフレームワークとWeb Components
Web Components
Web Components - Web標準の技術で、再利用可能な部品を作るAPI - いくつかの仕様の総称 - Custom Elements -
Shadow DOM - ES Modules - すでにEdge以外のブラウザで対応済!
Custom Elements - 独自のHTML要素を定義できるAPI - customElements.define - class構文を使う - いわゆるコンポーネント機能
None
Shadow DOM - グローバルから独立したDOMツリー - CSSやJSの影響範囲が限定できる - Scoped CSSなどが実現できる -
Shadow DOMの中のCSSは外部に影響を与えない - Shadow DOMの中のCSSは外部の影響を受けない
None
これまで Component Component Component State Management Routing State Management Routing
State Management Routing DOM API
これまでのWeb開発 - コンポーネント機構は各フレームワークが提供 - DOM APIにはコンポーネント機構がない - 各フレームワークが頑張ってコンポーネントを実現していた - Scoped
CSSなどのカプセル化の仕組みも同様 - フレームワークに依存するコンポーネント - 当然、フレームワーク間の互換性はない - UIライブラリはフレームワークごとに必要
これから DOM API Component Component Component State Management Routing State
Management Routing State Management Routing Web Components
これからのWeb開発 - DOM APIもコンポーネント機構を持つ - カプセル化の仕組みも備える - コンポーネント機構の新しい選択肢 - 特定の技術に依存しないコンポーネント
- フレームワークなどに依存しない - 真の意味で汎用的な部品の実現
Web Componentsの良いところ - Web標準の技術であること - ブラウザネイティブなサポート - 複雑なビルド設定は不要 - 他のフレームワークとの共存も簡単
- 導入が非常に簡単 - Web標準の技術だからこそ - 外部からの影響を受けない/外部に影響を与えない
つらいところ - 長くなりがち - ボイラープレートが多い - 描画タイミングの管理 - テンプレートが書きづらい -
文字列 or DOM API - 当然、差分更新はない
lit-html / LitElement
lit-html - テンプレート構築用のライブラリ - Tagged Template Literalsベース - テンプレートが関数になるので取り回しやすい -
Web Components以外の用途でも使える - 最近バージョン1.0が出た
None
LitElement - Web Componentsをシンプルに書くためのライブラリ - Polymerの後継 - 素のWeb Componentsを書くのは結構つらい -
面倒な部分をラップしてよしなに処理してくれる - テンプレートエンジンとしてlit-htmlを利用 - 最近バージョン2.0が出た
None
DEMO
DEMO - imgタグの改良版 - lazy loading/中断 - 拡大表示
Q. JSフレームワークは不要になるの?
なりません
JSフレームワークとの関わり - Web Components単体でアプリは作れない - 状態管理やルーティングの面倒はみない - JSフレームワークとは競合ではなく、共存するもの - 一部のコンポーネントがWeb
Componentsで置き換えられる - 状態管理やルーティングは、フレームワークの責務 - フレームワーク → Web Componentsへの変換も
Web Componentsの使いどころ - 汎用的なコンポーネント - Atomic Designにおける〜Moleculesくらいがターゲット - UIライブラリが担っている領域 -
既存資産の活用 - JSフレームワーク製のコンポーネントをWeb Components化 - 別のシステム、JSフレームワークに流用できる
まとめ - Web Componentsは再利用可能な部品を作るAPI - 対応ブラウザも増えてきている - JSフレームワークとは競合ではなく共存するもの
Thank you !!