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
430
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.3k
TypeScriptの型表現
honda
10
3.1k
これまでのReact、これからのReact
honda
0
320
Gatsbyお試し
honda
0
120
styled-components or emotion?
honda
0
690
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
710
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
830
Web Componentsの動向とPolymer
honda
4
2.6k
Other Decks in Programming
See All in Programming
概念モデル→論理モデルで気をつけていること
sunnyone
3
290
AIコーディングAgentとの向き合い方
eycjur
0
280
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
770
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
3.2k
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.9k
はじめてのMaterial3 Expressive
ym223
2
880
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
2.4k
楽して成果を出すためのセルフリソース管理
clipnote
0
180
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
4.4k
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
What's in a price? How to price your products and services
michaelherold
246
12k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Designing for Performance
lara
610
69k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
The Cult of Friendly URLs
andyhume
79
6.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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 !!