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.2k
TypeScriptの型表現
honda
10
3.1k
これまでのReact、これからのReact
honda
0
310
Gatsbyお試し
honda
0
120
styled-components or emotion?
honda
0
680
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
690
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
820
Web Componentsの動向とPolymer
honda
4
2.5k
Other Decks in Programming
See All in Programming
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
340
VS Code Update for GitHub Copilot
74th
1
320
Effect の双対、Coeffect
yukikurage
5
1.4k
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.2k
Deep Dive into ~/.claude/projects
hiragram
7
1.3k
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
850
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
260
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
230
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
110
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
46
30k
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.7k
RailsConf 2023
tenderlove
30
1.1k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How GitHub (no longer) Works
holman
314
140k
A Tale of Four Properties
chriscoyier
160
23k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Designing for humans not robots
tammielis
253
25k
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 !!