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 の期待と実情、未来 — 2年のライブラリ開発経験から
Search
Naoki Matagawa
June 17, 2017
Programming
1
5.3k
Web Components の期待と実情、未来 — 2年のライブラリ開発経験から
ng-japan 2017 (2017/06/17) での発表スライドです。
[イベントURL:
https://ngjapan.connpass.com/event/55210/
]
Naoki Matagawa
June 17, 2017
Tweet
Share
More Decks by Naoki Matagawa
See All by Naoki Matagawa
国産 OSS 立ち上げの事情
n_matagawa
20
15k
Onsen UI 2 開発における JS フレームワーク衝突事例集
n_matagawa
3
920
10分で分かる Monaca と Onsen UI
n_matagawa
0
550
JS モバイルアプリの世界と Onsen UI
n_matagawa
0
520
Onsen UIの最近とこれから Onsen UI の最近とこれから 〜 国内サポートはじめました
n_matagawa
0
280
Other Decks in Programming
See All in Programming
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
200
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
270
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
700
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
670
Googleの新しいコーディングAIエージェントJulesを使ってみた
tonionagauzzi
0
130
Understanding Kotlin Multiplatform
l2hyunwoo
0
220
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
160
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
5
140
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
190
Reactの歴史を振り返る
tutinoko
1
130
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.5k
型で語るカタ
irof
1
840
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
The Language of Interfaces
destraynor
158
25k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Building Applications with DynamoDB
mza
95
6.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Making Projects Easy
brettharned
116
6.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Writing Fast Ruby
sferik
628
62k
Transcript
2017/06/17(⼟) ng-japan 2017 8FC$PNQPOFOUTͷظͱ࣮ɺະདྷ ͷϥΠϒϥϦ։ൃܦݧ͔Β ຢ ঘथ !O@NBUBHBXB
ࣗݾհ •⼜川 尚樹 (@n_matagawa) • アシアル株式会社(2016年4⽉〜) • Web エンジニア 2年⽬
•Onsen UI 2 (2015年10⽉〜) • 純 Web Components 製の UI ライブラリ • AngularJS, Angular, React, Vue に対応 • https://onsen.io/
σϞʢ0OTFO 6*ͷհʣ https://tutorial.onsen.io/
͜ͷൃදͷඪ •Web Components について知ってもらう!!! • 「今後も Angular を使って⼤丈夫なのか?」 • 「また
Web に⼀波くるのか?」 • ……といった疑問を解消
ͳͥ "OHVMBSͷͰ 8FC$PNQPOFOUTΛʁ •Angular と Web Components は 無関係ではない!!! •
フレームワークと Web Components は 切っても切り離せない関係
ୈ෦ 8FC$PNQPOFOUTͷޫ
8FC$PNQPOFOUTͱ (1) ブラウザの機能 • WebGL, Web Audio API, ... に並ぶもの
(2) 上記を使って作られたコンポーネント
ͳͥ 8FC$PNQPOFOUT͕ʹͳ͔ͬͨʁ • メジャーブラウザに搭載され始めたから • デフォルトで使えるようになった • 特に、2017年3⽉に iOS 10.3
に搭載されたのが⼤きい
ͳͥ 8FC$PNQPOFOUT͕ʹͳ͔ͬͨʁ http://caniuse.com/#feat=custom-elementsv1
ͳͥ 8FC$PNQPOFOUT͕ʹͳ͔ͬͨʁ • メジャーブラウザに搭載され始めたから • デフォルトで使えるようになった • 特に、2017年3⽉に iOS 10.3
に搭載されたのが⼤きい • フレームワーク戦争が収束して話題が枯渇したから • 各フレームワークを掘り下げる流れになった • そこに Web Components が割って⼊ってきた
ϒϥβͷػೳͱͯ͠ͷ 8FC$PNQPOFOUT •複数の機能の集まり • しかし、重要な機能は2つだけ
ॏཁػೳͦͷ 特定の名前を持つ要素 <x-hoge> が ⽣成された時、 DOM ツリーに追加された時、…に 指定した処理を実⾏する機能
σϞʢॏཁػೳͦͷ$VTUPN&MFNFOUTʣ
ॏཁػೳͦͷ DOM ツリーの⼀部分に対して 個別の DOM, CSS スコープを与える機能(+α)
σϞʢॏཁػೳͦͷ4IBEPX%0.ʣ
ͭͷॏཁػೳΛͬͯԿ͕Ͱ͖Δ͔ʁ •ブラウザが元々持っている <input>, <video>, <table> 等と同じ仕組みで <x-hoge>, <x-piyo> を動かすことができる •HTML5
に新しい機能が増えたかのような感覚で コンポーネントを使うことができる
8FC$PNQPOFOUT͕ඳ͘ະདྷ • 再利⽤可能なコンポーネントを ブラウザの機能だけで実装 • 特定のフレームワークに依存しないコンポーネントが 実装・シェア・利⽤される世界
ୈ෦ 8FC$PNQPOFOUTͷҋ
ϑϨʔϜϫʔΫϢʔβʹͱͬͯ ੜͷ 8FC$PNQPOFOUTػೳෆ × データバインディング × Input/Output × DI ×
パイプ × モジュール •あらゆるものが無い!! • ⽣の Web Components は使えたものではない × 繰り返しレンダリング × アニメーション × …
ੜͷ 8FC$PNQPOFOUTΛ XSBQ͍ͯ͘͢͢͠Δ (1) フレームワークで機能を補填 • X-Tag (2012年〜) Vue チック
• Polymer (2013年〜) 独⾃路線 • Skate (2014年〜) React チック • slim.js (2016年〜) Angular チック
ྫʢTMJNKTʣ
ੜͷ 8FC$PNQPOFOUTΛ XSBQ͍ͯ͘͢͢͠Δ (1) フレームワークで機能を補填 • X-Tag (2012年〜) Vue チック
• Polymer (2013年〜) 独⾃路線 • Skate (2014年〜) React チック • slim.js (2016年〜) Angular チック • ランタイムライブラリを読み込む必要がある • ブラウザの機能以外(⾮標準)に頼ることになる
ੜͷ 8FC$PNQPOFOUTΛ XSBQ͍ͯ͘͢͢͠Δ (2) 別の形式で書いて⽣の Web Components に変換 • (2017/06
現在、そういったライブラリは無し) • ランタイムライブラリは不要 • しかし⼿元にビルド環境(⾮標準)を⽤意することになる
ଞਓ͕ 8FC$PNQPOFOUTͰॻ͍ͨίϯϙʔωϯτΛ ͏ͷ؆୯Ͱͳ͍ • ブラウザ標準の <input> はそのままでは使いにくい • なので @angular/forms
が作られた • それと同じことが <x-hoge> にも起こる • @angular/forms のようなものが提供されていないと使いにくい • Onsen UI 2 では ngx-onsenui を作る⽻⽬になった
ୈ෦ ͡Ό͋ɺԿͷʹཱͭͷʁ
ඇϑϨʔϜϫʔΫϢʔβʹͱͬͯͷ 8FC$PNQPOFOUT •世の中、 フレームワークを使っていない⼈の⽅が多い • データバインディングがない、 Input/Output がない、そんなのは苦痛ではない • ⾮フレームワークユーザにとっての魅⼒:
• ライブラリなしですぐに使える • コピペするだけですぐに使える
ϑϨʔϜϫʔΫϢʔβʹͱͬͯͷ 8FC$PNQPOFOUT •⽣の Web Components(+その wrapper)に フレームワークユーザの求めているものは無い • Web Components
は あくまでフレームワークに依存しない・再利⽤可能な コンポーネントを作るためのもの •Q. どうすれば良いか? • A. 引き続きフレームワークを使いましょう!!
ϥΠϒϥϦఏڙऀʹͱͬͯͷ 8FC$PNQPOFOUT • 複数のフレームワークに ライブラリを提供できる最⾼のツール • Web Components でコア(共通部分)を実装してしまえば、 あとは
@angular/forms のようなものを⽣やすだけ • 今後この設計を持つライブラリは増えていく Web Components 層 angular- onsenui ngx- onsenui react- onsenui vue- onsenui ember- onsenui aurelia- onsenui フレームワーク 層 (onsenui)
ϑϨʔϜϫʔΫఏڙऀʹͱͬͯͷ 8FC$PNQPOFOUT •フレームワークの構築に使える機能が揃っている •⾼速化に利⽤できる • Web Components は速い • Angular
は 既に Shadow DOM を使った⾼速化を実装済み • デフォルトでは無効
࠷ޙʹ
8FC$PNQPOFOUTΛୟ͘ʜʜͦͷલʹ •関係者は今も Web Components の未来に向けて 動いている •フレームワークの進化は速すぎた • Web Components
を置き去りにした •これからその溝が埋まっていく
Thank you for listening! Web Components の未来に 乞うご期待!!