Slide 1
Slide 1 text
1
「defineCustomElement」を活⽤した
サービス共通のUIコンポーネントライブラリ
尾形 将平
GMOペパボ株式会社 EC事業部 エンジニア
2023.10.28
Slide 2
Slide 2 text
2
⾃⼰紹介
EC事業部 プロダクトチーム
尾形 将平 Shohei Ogata
● ECプラットフォーム「カラーミーショップ」の
開発に従事
● Vue.js歴は概ね4年くらい
● GitHub : @piyoppi
Slide 3
Slide 3 text
ECプラットフォーム「カラーミーショップ」
3
インターネットで商いを⽀援
Slide 4
Slide 4 text
「カラーミーショップ」とVue.js
4
アプリストア
カラーミーショップとVue.js
ショップ管理画⾯
社内ツール
などなど...
Slide 5
Slide 5 text
「カラーミーショップ」とVue.js
5
ショップ管理画⾯
● PHP + jQuery のMPA
● ショップデザイン /
商品管理 / 発送 など...
● 2021年〜からVue.js
(Custom Element)を利⽤
Slide 6
Slide 6 text
「カラーミーショップ」と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
Slide 7
Slide 7 text
Custom Element変換層の導⼊による
UIコンポーネントライブラリの開発
7
Slide 8
Slide 8 text
Custom Element変換層の導⼊によるUIコンポーネントライブラリの開発
8
ce-proxy
ui-components
.ts .css
vue-application
.js
.ce.js
web-application
<c-button> ボタン </c-button>
defineCustomElement()
Slide 9
Slide 9 text
9
custom-elements-proxy
ui-components
.ts .css
vue-application
.js
.ce.js
web-application
<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
…
…
Slide 10
Slide 10 text
ce-proxy
vue-application
.js
.ce.js
web-application
<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”
Slide 11
Slide 11 text
ce-proxy
vue-application
.js
.ce.js
web-application
<colorme-button> ボタン
</colorme-button>
defineCustomElement()
11
● defineCustomElement() を通して
Custom Element化
● 属性値を Vue props にそのまま渡
せない場合の変換層としても機能
Custom Element変換層の導⼊によるUIコンポーネントライブラリの開発
ce-proxy ui-components
JSON
HTML
</>
component
Object
component
Slide 12
Slide 12 text
ce-proxy
vue-application
.js
.ce.js
web-application
<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
Slide 13
Slide 13 text
13
● ce-proxyをロード
● ui-components が公開するSFCを
ce-proxyを介して利⽤できる
web-application
<c-button> ボタン </c-button>
Custom Element変換層の導⼊によるUIコンポーネントライブラリの開発
Slide 14
Slide 14 text
14
● カラーミーショップではdefineCustomElement() を
活⽤しています
● カスタム要素の変換層を作ることでより再利⽤性の
⾼いUIライブラリを作っています
まとめ