Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

piyoppi
November 21, 2023

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

piyoppi

November 21, 2023
Tweet

Other Decks in Programming

Transcript

  1. 1
    「defineCustomElement」を活⽤した
    サービス共通のUIコンポーネントライブラリ
    尾形 将平
    GMOペパボ株式会社 EC事業部 エンジニア
    2023.10.28

    View full-size slide

  2. 2
    ⾃⼰紹介
    EC事業部 プロダクトチーム
    尾形 将平 Shohei Ogata
    ● ECプラットフォーム「カラーミーショップ」の
    開発に従事
    ● Vue.js歴は概ね4年くらい
    ● GitHub : @piyoppi

    View full-size slide

  3. ECプラットフォーム「カラーミーショップ」
    3
    インターネットで商いを⽀援

    View full-size slide

  4. 「カラーミーショップ」とVue.js
    4
    アプリストア
    カラーミーショップとVue.js
    ショップ管理画⾯
    社内ツール
    などなど...

    View full-size slide

  5. 「カラーミーショップ」とVue.js
    5
    ショップ管理画⾯
    ● PHP + jQuery のMPA
    ● ショップデザイン /
    商品管理 / 発送 など...
    ● 2021年〜からVue.js
    (Custom Element)を利⽤

    View full-size slide

  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

    View full-size slide

  7. Custom Element変換層の導⼊による
    UIコンポーネントライブラリの開発
    7

    View full-size slide

  8. Custom Element変換層の導⼊によるUIコンポーネントライブラリの開発
    8
    ce-proxy
    ui-components
    .ts .css
    vue-application
    .js
    .ce.js
    web-application
    <br/><c-button> ボタン </c-button><br/>defineCustomElement()<br/>

    View full-size slide

  9. 9
    custom-elements-proxy
    ui-components
    .ts .css
    vue-application
    .js
    .ce.js
    web-application
    <br/><colorme-button> ボタン<br/></colorme-button><br/>defineCustomElement()<br/>● SFC(.vue)をそれぞれビルド<br/>● SFC毎に .ts & .css ファイルを公開<br/>Custom Element変換層の導⼊によるUIコンポーネントライブラリの開発<br/>c-button<br/>.vue<br/>c-radio<br/>.vue<br/>c-button<br/>.vue.ts<br/>c-button<br/>.css<br/>c-radio<br/>.vue.ts<br/>c-radio<br/>.css<br/>…<br/>…<br/>

    View full-size slide

  10. ce-proxy
    vue-application
    .js
    .ce.js
    web-application
    <br/><colorme-button> ボタン<br/></colorme-button><br/>defineCustomElement()<br/>10<br/>● ui-componentsが公開するSFCを利⽤<br/>○ スタイルの読み込みはViteプラグインで⾃動化している<br/>Custom Element変換層の導⼊によるUIコンポーネントライブラリの開発<br/><template><br/><div><br/><c-button>ボタン</c-button><br/></div><br/></template><br/><script setup lang=”ts”><br/>import CButton from “ui-components/c-button.vue”<br/>import “ui-components/c-button.css”<br/>

    View full-size slide

  11. ce-proxy
    vue-application
    .js
    .ce.js
    web-application
    <br/><colorme-button> ボタン<br/></colorme-button><br/>defineCustomElement()<br/>11<br/>● defineCustomElement() を通して<br/>Custom Element化<br/>● 属性値を Vue props にそのまま渡<br/>せない場合の変換層としても機能<br/>Custom Element変換層の導⼊によるUIコンポーネントライブラリの開発<br/>ce-proxy ui-components<br/>JSON<br/>HTML<br/></><br/>component<br/>Object<br/>component<br/>

    View full-size slide

  12. ce-proxy
    vue-application
    .js
    .ce.js
    web-application
    <br/><colorme-button> ボタン<br/></colorme-button><br/>defineCustomElement()<br/>12<br/>● コンポーネント毎にJavaScriptを出⼒<br/>● 必要なコンポーネントを検索して取得<br/>するスクリプトを同梱<br/>○ よく使うコンポーネントはスクリプトに同梱してネットワー<br/>クの往復による遅延を低減<br/>Custom Element変換層の導⼊によるUIコンポーネントライブラリの開発<br/><script src=”ce-proxy.js”><br/><B>foo</B><br/><C>bar</C><br/>ce-proxy.js<br/>C<br/>A.js<br/>A<br/>B.js<br/>B<br/>

    View full-size slide

  13. 13
    ● ce-proxyをロード
    ● ui-components が公開するSFCを
    ce-proxyを介して利⽤できる
    web-application
    <br/><c-button> ボタン </c-button><br/>Custom Element変換層の導⼊によるUIコンポーネントライブラリの開発<br/>

    View full-size slide

  14. 14
    ● カラーミーショップではdefineCustomElement() を
    活⽤しています
    ● カスタム要素の変換層を作ることでより再利⽤性の
    ⾼いUIライブラリを作っています
    まとめ

    View full-size slide