web components で 社内 ui ライブラリを作っている話 · ①社内 ui...
TRANSCRIPT
![Page 1: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/1.jpg)
Web Components で 社内 UI ライブラリを作っている話
WebComponents.kyoto Meetup #2 | Mar 04, 2018
![Page 2: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/2.jpg)
じんぼ�よしひで神保 嘉秀
@jmblog
Front-end Engineer,
![Page 3: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/3.jpg)
① 社内 UI ライブラリ「Kaizen Custom Elements」の紹介
② Web Components を採用した背景
③ 実装で工夫した点
お話すること
Web Components の仕様に関する話はしません。仕様について詳しく知りたい方はこのあたりを参考にしてください。
https://developers.google.com/web/fundamentals/web-components/
![Page 4: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/4.jpg)
① 社内UIライブラリ「Kaizen Custom Elements」の紹介
![Page 5: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/5.jpg)
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
![Page 6: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/6.jpg)
• Web Components (Custom Elements + Shadow DOM) で実装
• プリミティブな要素が中心
‣ Atomic Design の Atoms(原子) から Molecules(分子) くらいの粒度
• Storybook を使ってカタログ化
• 絶賛開発中(進捗率10%くらい)
Kaizen Custom Elements の特徴
![Page 7: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/7.jpg)
Example
![Page 8: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/8.jpg)
![Page 9: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/9.jpg)
src/modules/app-elements/components/kz-app-titile/index.ts
![Page 10: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/10.jpg)
https://speakerdeck.com/mizchi/real-world-es201x-and-future?slide=39
![Page 11: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/11.jpg)
https://kaizen-custom-elements-preview.netlify.com/
![Page 12: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/12.jpg)
② Web Components を採用した背景
![Page 13: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/13.jpg)
この半年間で 6 つの Single Page Application を開発
React apps
• あえて技術スタックは固定化せず多様性をもたせる
• 小さく作って捨てやすくする
• 各メンバーが最速で成果を出すことにこだわる
Angular apps
2 4
![Page 14: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/14.jpg)
ボタンやツールバーといった要素を毎回実装するのはめんどくさい・・・ 😩
アプリケーションごとにデザインが微妙に違う・・・😩
一方で、
![Page 15: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/15.jpg)
Angular でも React でも(何なら Vue でも Preact でも)使える
共通の UI ライブラリが欲しい 🧐
![Page 16: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/16.jpg)
https://custom-elements-everywhere.com/
![Page 17: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/17.jpg)
React 以外では Custom Elements の
併用は問題なさそう。
React も Basic Tests はすべて通っている。
シンプル(プリミティブ)な要素に 限定すれば、問題になることはなさそう。
![Page 18: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/18.jpg)
![Page 19: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/19.jpg)
Chrome / Safari はかなりサポートが進んでる。
Edge と Firefox は未対応だが、当面は Polyfill で凌げそう。
![Page 20: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/20.jpg)
(若干の不安はあるけど)
Web Components もそろそろ「使えるレベル」になってきた印象。
まずは社内プロジェクトで試してみよう!🕺
![Page 21: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/21.jpg)
③ 実装で苦労した点
![Page 22: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/22.jpg)
Shadow DOM のスタイル問題
![Page 23: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/23.jpg)
Shadow DOM のスタイル問題
Firefox と Edge は Shadow DOM にまだ対応していないので、スタイルがスコープ化されない。ShadyCSS を使えば、擬似的にスコープ化が実現できる。
![Page 24: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/24.jpg)
lit-html v0.7
![Page 25: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/25.jpg)
lit-html v0.7
lit-html�で軽量に作っちゃうぜー
![Page 26: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/26.jpg)
Firefox�で�Shadow�DOM�の�スタイルが効かないぞ...�
lit-html�と�ShadyCSS�の�相性がよくない?🤔
lit-html v0.7
![Page 27: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/27.jpg)
lit-html v0.7 Polymer v3.0
![Page 28: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/28.jpg)
lit-html v0.7 Polymer v3.0
うまくいった
![Page 29: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/29.jpg)
lit-html v0.7 Polymer v3.0
React + CSS in JS
React�+�CSS�in�JS�で�Shadow�DOM�のスタイル問題を�
解決できる気がする!�
であれば、Polymer�よりもすでに知⾒が溜まってる�React�を使ったほうががいいのでは?
![Page 30: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/30.jpg)
lit-html v0.7 Polymer v3.0
React + CSS in JSチョット待てよ�🤔
React�本体を同梱するとファイルサイズが気になるし、�React�アプリで使う場合、バージョンが異なる�2つのReact�が読み込まれることになって困るか...
![Page 31: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/31.jpg)
lit-html v0.7 Polymer v3.0
React + CSS in JSlit-html + CSS in JS
lit-html�+�CSS�in�JS�で�Shadow�DOM�のスタイル問題が�
解決できる気がする!
![Page 32: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/32.jpg)
lit-html v0.7 Polymer v3.0
React + CSS in JSlit-html + CSS in JS
厳しかった...�😞
Shadow�Root�をもつカスタム要素に�スタイルを当てるには�:host�へのスタイル定義が必要。�⼀⽅、Firefox�では�Shadow�Root�が作成されないため�
:host�と同じスタイル定義を�CSS�in�JS�で⾏う必要がある。�⼆重管理になってしまう。
![Page 33: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/33.jpg)
lit-html v0.7 Polymer v3.0
React + CSS in JSlit-html + CSS in JS
Polymer v3.0やっぱりお前じゃなきゃ�
ダメなのか...
![Page 34: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/34.jpg)
lit-html v0.7 Polymer v3.0
React + CSS in JSlit-html + CSS in JS
Polymer v3.0 lit-html v0.9
![Page 35: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/35.jpg)
lit-html v0.7 Polymer v3.0
React + CSS in JSlit-html + CSS in JS
Polymer v3.0 lit-html v0.9
lit-html�で�ShadyCSS�が�サポートされた�🎉
Shadow�DOM�のスタイル問題は�これで解決できそう(今ココ)
![Page 36: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/36.jpg)
https://jmblog.jp/posts/2018-02-15/lit-html-with-shadycss/
![Page 37: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/37.jpg)
create-react-app で minify できない問題
![Page 38: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/38.jpg)
create-react-app で minify できない問題
create-react-app で生成した React アプリで Kaizen Custom Elements 使うと、
npm run build でエラーとなることが発覚。
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
![Page 39: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/39.jpg)
http:"//bit.ly/2tRViJ9
“いくつかのサードパーティーのパッケージは、コードを ES5 へ変換せずに(ES6のまま) npm へ公開しており、ES6 の機能をサポートしていないブラウザやツールで問題を起こす原因となっています。我々としては少なくともあと数年は ES5 で npm に公開することをおすすめします。”
(このあと、「issue を投げる」「fork する」「コピペする」などの解決策(?)が続く。)
![Page 40: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/40.jpg)
つまり「create-react-app 使いたかったら ES6 のパッケージは使うな」
![Page 41: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/41.jpg)
でも、Custom Elements は ES6 の Class 構文を使う必要がある。
ES5 に変換してしまうと、ブラウザでの実行時に
Failed to construct 'HTMLElement' というエラーになってしまう。
(custom-elements-es5-adapter.js を使えばいいけど、
今後のことを考えると polyfill の使用は最小限に留めたい。)
![Page 42: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/42.jpg)
(╯°□°)╯( ┻━┻
![Page 43: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/43.jpg)
仕方がないので、UMD 版も用意
Format File
ES Module kaizen-app-elememts.esm.js
UMD kaizen-app-elememts.umd.js
![Page 44: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/44.jpg)
rollup.config.js
![Page 45: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/45.jpg)
index.html で読み込んで使用
![Page 46: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/46.jpg)
まとめ
![Page 47: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/47.jpg)
• Web Components を本番投入しようとすると、いろいろとハマるポイントはまだ多い。
• でも、今から知見を溜めておく価値はあると思うので、まずは社内や個人の小さなプロジェクトで試してみるとよいのでは。
• lit-html や Polymer の動きも活発なので、機が熟すのを心待ちにしましょう!
まとめ
![Page 48: Web Components で 社内 UI ライブラリを作っている話 · ①社内 UI ライブラリ「Kaizen Custom Elements」の紹介 ②Web Components を採用した背景 ③実装で工夫した点](https://reader036.vdocuments.us/reader036/viewer/2022071023/5fd7eaba4504f01fdc0b57a1/html5/thumbnails/48.jpg)
We are hiring!
Kaizen Platform ではエンジニアを募集しています。
興味のある方は https://jobs.lever.co/kaizenplatform?team=Engineer まで!