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 で 社内 UI ライブラリを作っている話
Search
Yoshihide Jimbo
March 04, 2018
Programming
11
4.3k
Web Components で 社内 UI ライブラリを作っている話
WebComponents.kyoto Meetup #2 での発表資料です。
https://wc-kyoto.connpass.com/event/78690/
Yoshihide Jimbo
March 04, 2018
Tweet
Share
More Decks by Yoshihide Jimbo
See All by Yoshihide Jimbo
高齢者でも使えるプロダクトUIの挑戦 / Designing User Interfaces for the Elderly
jmblog
32
28k
unstated-next による Redux に頼らない状態管理の考察
jmblog
9
5.3k
雰囲気でやってる人向けの Redux 再入門
jmblog
21
6.5k
わかりやすいグラフを作ろう
jmblog
3
1.4k
gulp: The Good Parts
jmblog
29
5.9k
CSS in JS と CSS Modules
jmblog
25
4.7k
PostCSS とは何か
jmblog
38
9.9k
Kaizen Platform における UI ライブラリのワークフロー
jmblog
30
6.1k
フロントエンドエンジニアのための Dotfiles
jmblog
53
8.5k
Other Decks in Programming
See All in Programming
私の後悔をAWS DMSで解決した話
hiramax
4
210
はじめてのMaterial3 Expressive
ym223
2
230
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1.1k
複雑なドメインに挑む.pdf
yukisakai1225
5
1.1k
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
290
Ruby Parser progress report 2025
yui_knk
1
420
Deep Dive into Kotlin Flow
jmatsu
1
290
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
110
Testing Trophyは叫ばない
toms74209200
0
840
Cache Me If You Can
ryunen344
1
520
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
110
Featured
See All Featured
BBQ
matthewcrist
89
9.8k
The Pragmatic Product Professional
lauravandoore
36
6.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
A designer walks into a library…
pauljervisheath
207
24k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Agile that works and the tools we love
rasmusluckow
330
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Code Reviewing Like a Champion
maltzj
525
40k
Transcript
Web Components Ͱࣾ UI ϥΠϒϥϦΛ࡞͍ͬͯΔ WebComponents.kyoto Meetup #2 | Mar
04, 2018
じんぼ よしひで ਆอ Յल @jmblog Front-end Engineer,
͓͢Δ͜ͱ ᶃ ࣾ UI ϥΠϒϥϦʮKaizen Custom Elementsʯͷհ ᶄ Web Components
Λ࠾༻ͨ͠എܠ ᶅ ࣮Ͱۤ࿑ͨ͠
ᶃ ࣾ UI ϥΠϒϥϦʮKaizen Custom Elementsʯͷհ
Kaizen Custom Elements app-elements icon-elements <kz-app-toolbar> <kz-app-title> <kz-app-nav-menu> <kz-avatar> <kz-button>
<kz-card> ""... <kz-icon-bookmark> <kz-icon-calendar> <kz-icon-chevron-down> <kz-icon-copy> <kz-icon-download> <kz-icon-edit> ""...
Kaizen Custom Elements ͷಛ • Web Components (Custom Elements +
Shadow DOM) Ͱ࣮ • ϓϦϛςΟϒͳίϯϙʔωϯτ͕த৺ • Atomic Design ͷ Atomsʢݪࢠʣ ͔Β Moleculesʢࢠʣ ͘Β͍ͷཻ • Storybook ΛͬͯΧλϩάԽ • ઈࢍ։ൃதʢਐḿ10%͘Β͍ʣ
Example
https://speakerdeck.com/mizchi/real-world-es201x-and-future?slide=39 ͜ͷੈք؍ΛΠϝʔδ
https://kaizen-custom-elements-preview.netlify.com/
ᶄ Web Components Λ࠾༻ͨ͠എܠ
͜ͷؒͰ 6 ͭͷ Single Page Application Λ։ൃ Angular apps React
apps 2 4 • ٕ͋͑ͯज़ελοΫݻఆԽͤͣଟ༷ੑΛͨͤΔ • খ͘͞࡞ࣺͬͯͯ͘͢͢Δ • ֤ϝϯόʔ͕࠷ͰՌΛग़͢͜ͱʹͩ͜ΘΔ
ҰํͰ Ϙλϯπʔϧόʔͱ͍ͬͨϓϦϛςΟϒͳίϯϙʔωϯτΛ ຖճ࣮͢Δͷ໘͍͘͞… ΞϓϦέʔγϣϯ͝ͱʹඍົʹσβΠϯ͕ҧͬͯ͠·͏…
Angular Ͱ React ͰʢԿͳΒ Vue Ͱ Preact Ͱʣ͑Δ ڞ௨ͷ UI
ϥΠϒϥϦ͕ཉ͍͠ɻ Web Components ͷग़൪Ͱʁʂ
https://custom-elements-everywhere.com/
None
Angular ͱ Custom Elements ͷซ༻ͳͦ͞͏ɻ React Basic Tests ͯ͢௨͍ͬͯΔͷͰɺϓϦϛςΟϒͳ
ίϯϙʔωϯτʹ༻్Λݶఆ͢ΕɺʹͳΔ͜ͱͳͦ͞͏ɻ
None
None
Chrome / Safari ͔ͳΓαϙʔτ͕ਐΜͰΔɻ Edge ͱ Firefox ະରԠ͕ͩɺ໘ Polyfill Ͱ྇͛ͦ͏ɻ
ʢएׯͷෆ҆͋Δ͚Ͳʣ Web Components ͦΖͦΖʮ͑ΔϨϕϧʯʹͳ͖ͬͯͨҹɻ ·ͣࢼͯ͠ΈΑ͏ʂ
ᶅ ࣮Ͱۤ࿑ͨ͠
Shadow DOM ͷελΠϧ
Shadow DOM ͷελΠϧ Firefox ͱ Edge Shadow DOM ʹ·ͩରԠ͍ͯ͠ͳ͍ͷ
ͰɺελΠϧ͕είʔϓԽ͞Εͳ͍ɻ ShadyCSS Λ͑ɺٖࣅతʹείʔϓԽ͕࣮ݱͰ͖Δɻ
lit-html v0.7
lit-html v0.7 lit-html で軽量に作っちゃうぜー
lit-html v0.7 Firefox で Shadow DOM に スタイルが効かないぞ lit-html Λ
ShadyCSS ͷ ૬ੑ͕Α͘ͳ͍ʁ
lit-html v0.7 Polymer v3.0
lit-html v0.7 Polymer v3.0 うまくいった
lit-html v0.7 Polymer v3.0 React + CSS in JS でも
Shadow DOM のスタイル問題を 解決できる気がする! であれば、Polymer ではなく すでに知⾒がたまっている React を 使ったほうがよくない? React + CSS in JS
lit-html v0.7 Polymer v3.0 ちょっと待てよ 配布する Custom Elements の
ライブラリに React を同梱するの? React + CSS in JS
lit-html v0.7 Polymer v3.0 React + CSS in JS lit-html
+ CSS in JS lit-html + CSS in JS で Shadow DOM のスタイル問題を 解決できる気がする! であれば、軽量にできる!
lit-html v0.7 Polymer v3.0 React + CSS in JS lit-html
+ CSS in JS 厳しかった... :host にスタイルを定義する場合、 同じスタイル定義を CSS in JS でも⾏う 必要があり⼆重管理になってしまう。
lit-html v0.7 Polymer v3.0 React + CSS in JS lit-html
+ CSS in JS やはりお前じゃなきゃだめなのか Polymer v3.0
lit-html v0.7 Polymer v3.0 React + CSS in JS lit-html
+ CSS in JS Polymer v3.0 lit-html v0.9
lit-html v0.7 Polymer v3.0 React + CSS in JS lit-html
+ CSS in JS Polymer v3.0 lit-html v0.9 lit-html で ShadyCSS が サポートされた ͜ΕͰղܾͰ͖ͦ͏ʢࠓ͜͜ʣ
https://jmblog.jp/posts/2018-02-15/lit-html-with-shadycss/
create-react-app Ͱ minify Ͱ͖ͳ͍
create-react-app Ͱ minify Ͱ͖ͳ͍ Failed to compile. Failed to minify
the code from this file: ./node_modules/@kaizenplatform/kaizen-app-elements/kaizen-app-elements.js:1:57 Read more here: http://bit.ly/2tRViJ9 create-react-app Λͬͯੜͨ͠ React ΞϓϦͩͱɺ npm run build ͰΤϥʔʹͳΔ͜ͱ͕ൃ֮ɻ
http://bit.ly/2tRViJ9 "͍͔ͭ͘ͷαʔυύʔςΟͷύοέʔδɺES5 ʹมͤͣʹ ES6 ͷ ·· npm ʹެ։ͯ͠·͕͢ɺES6 Λαϙʔτ͍ͯ͠ͳ͍ϒϥβ πʔϧͰʹͳΔͷͰɺগͳ͘ͱ͋ͱES5
Ͱ npm ެ։͢ Δ͜ͱΛ͓͢͢Ί͍ͯ͠·͢ɻ" ͭ·Γ ES6 ʹͳ͍ͬͯΔͷ͕ѱ͍ͱɻ
͔͠͠ɺCustom Elements ES6 ͷΫϥεߏจΛ͏ඞཁ͕͋Δɻ ES5 ʹมͯ͠͠·͏ͱɺϒϥβ࣮ߦ࣌ʹΤϥʔʹͳΔɻ ʢcustom-elements-es5-adapter.js Λ͑Α͍͔͠Εͳ͍͕ɺ ͦͦ
ES6 Λαϙʔτ͍ͯ͠ΔϒϥβΛରͱ͍ͯ͠Δͷʹ Θ͟Θ͟ ES5 ʹม͢Δͷʁʣ
(›°□°ʣ›ớ ᵲᴸᵲ
ํ͕ͳ͍ͷͰɺUMD ൛༻ҙ Format File ES Module kaizen-app-elememts.esm.js UMD kaizen-app-elememts.umd.js
rollup Ͱ2όʔδϣϯΛੜ
index.html ͰಡΈࠐΜͰར༻
·ͱΊ
·ͱΊ • Web Components Λຊ൪ೖ͠Α͏ͱ͢Δͱɺ͍Ζ ͍ΖͱϋϚΔϙΠϯτ·ͩଟ͍ɻ • Ͱࠓ͔ΒݟΛཷΊ͓ͯ͘Ձ͋Δͱࢥ͏ɻ • ·ͣࣾݸਓͷখ͞ͳϓϩδΣΫτͰࢼͯ͠Έͯ
ʁ • lit-html Polymer ͷಈ͖׆ൃͳͷͰɺؾ͕ख़͢Δ ͷΛ৺ͪʹ͠·͠ΐ͏ʂ
We are hiring! Kaizen Platform ͰΤϯδχΞΛืू͍ͯ͠·͢ɻ ڵຯͷ͋Δํ https://jobs.lever.co/kaizenplatform?team=Engineer ·Ͱʂ