「defineCustomElement」を活用した サービス共通のUIコンポーネントライブラリ

Transcript

1. 1 「defineCustomElement」を活⽤した サービス共通のUIコンポーネントライブラリ 尾形 将平 GMOペパボ株式会社 EC事業部 エンジニア 2023.10.28
2. 2 ⾃⼰紹介 EC事業部 プロダクトチーム 尾形 将平 Shohei Ogata • ECプラットフォーム「カラーミーショップ」の 開発に従事 • Vue.js歴は概ね4年くらい • GitHub : @piyoppi
3. ECプラットフォーム「カラーミーショップ」 3 インターネットで商いを⽀援
4. 「カラーミーショップ」とVue.js 4 アプリストア カラーミーショップとVue.js ショップ管理画⾯ 社内ツール などなど...
5. 「カラーミーショップ」とVue.js 5 ショップ管理画⾯ • PHP + jQuery のMPA • ショップデザイン / 商品管理 / 発送 など... • 2021年〜からVue.js (Custom Element)を利⽤
6. 「カラーミーショップ」とVue.js 6 ショップ管理画⾯とVue.js • 2021〜 Vue2系 + Vue CLI Web Components Build ◦ https://tech.pepabo.com/2021/03/23/admin-ui-components/ • 2022〜 Vue3系 + defineCustomElement ◦ https://tech.pepabo.com/2022/10/31/colorme-vue3-migration/ • 2023〜 ペパボ共通デザインシステム「Inhouse」導⼊ ◦ https://note.com/colorme_design/n/n6e3499aa25d3
7. Custom Element変換層の導⼊による UIコンポーネントライブラリの開発 7
8. Custom Element変換層の導⼊によるUIコンポーネントライブラリの開発 8 ce-proxy ui-components .ts .css vue-application .js .ce.js web-application <script src=”ce-proxy.js”> <c-button> ボタン </c-button> defineCustomElement()
9. 9 custom-elements-proxy ui-components .ts .css vue-application .js .ce.js web-application <script src=”ce-proxy.js”> <colorme-button> ボタン </colorme-button> defineCustomElement() • SFC(.vue)をそれぞれビルド • SFC毎に .ts & .css ファイルを公開 Custom Element変換層の導⼊によるUIコンポーネントライブラリの開発 c-button .vue c-radio .vue c-button .vue.ts c-button .css c-radio .vue.ts c-radio .css … …
10. ce-proxy vue-application .js .ce.js web-application <script src=”ce-proxy.js”> <colorme-button> ボタン </colorme-button> defineCustomElement() 10 • ui-componentsが公開するSFCを利⽤ ◦ スタイルの読み込みはViteプラグインで⾃動化している Custom Element変換層の導⼊によるUIコンポーネントライブラリの開発 <template> <div> <c-button>ボタン</c-button> </div> </template> <script setup lang=”ts”> import CButton from “ui-components/c-button.vue” import “ui-components/c-button.css” </script>
11. ce-proxy vue-application .js .ce.js web-application <script src=”ce-proxy.js”> <colorme-button> ボタン </colorme-button> defineCustomElement() 11 • defineCustomElement() を通して Custom Element化 • 属性値を Vue props にそのまま渡 せない場合の変換層としても機能 Custom Element変換層の導⼊によるUIコンポーネントライブラリの開発 ce-proxy ui-components JSON HTML </> component Object component
12. ce-proxy vue-application .js .ce.js web-application <script src=”ce-proxy.js”> <colorme-button> ボタン </colorme-button> defineCustomElement() 12 • コンポーネント毎にJavaScriptを出⼒ • 必要なコンポーネントを検索して取得 するスクリプトを同梱 ◦ よく使うコンポーネントはスクリプトに同梱してネットワー クの往復による遅延を低減 Custom Element変換層の導⼊によるUIコンポーネントライブラリの開発 <script src=”ce-proxy.js”> <B>foo</B> <C>bar</C> ce-proxy.js C A.js A B.js B
13. 13 • ce-proxyをロード • ui-components が公開するSFCを ce-proxyを介して利⽤できる web-application <script src=”ce-proxy.js”> <c-button> ボタン </c-button> Custom Element変換層の導⼊によるUIコンポーネントライブラリの開発
14. 14 • カラーミーショップではdefineCustomElement() を 活⽤しています • カスタム要素の変換層を作ることでより再利⽤性の ⾼いUIライブラリを作っています まとめ