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.2k
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
890
10分で分かる Monaca と Onsen UI
n_matagawa
0
520
JS モバイルアプリの世界と Onsen UI
n_matagawa
0
490
Onsen UIの最近とこれから Onsen UI の最近とこれから 〜 国内サポートはじめました
n_matagawa
0
250
Other Decks in Programming
See All in Programming
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
360
SwiftUI Viewの責務分離
elmetal
PRO
0
150
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Music & Morning Musume
bryan
46
6.3k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Optimizing for Happiness
mojombo
376
70k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
A designer walks into a library…
pauljervisheath
205
24k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
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 の未来に 乞うご期待!!