@potato4d が @T28_tatsuya に Vue 3 の defineCustomElement を Production で活用した事例について話を聞いてみました。

defineCustomElement

• API の概要
  • defineCustomElement === VueComponent を HTMLElement で wrap するための関数
  • wrap したHTMLElement を customElements.define に渡して Web components を定義する
• 内部構造
  • vue/runtime-core の renderer に渡して、ShadowRoot に VNode を描画する
    • Vue2 では「Vue インスタンスを作って 、 shadowRoot に appendChild 」というアプローチだった

UITの事例

LINE公式アカウントのクーポンページで、toC 向けの画面と toB 向けの画面でコンポーネントを共有することに

• ユーザーがLINE上で閲覧するクーポン画面(toC)
  • 先日 UIリニューアルが行われた
• お店がクーポンを発行するためのCMS(toB)
  • toC での表示をプレビュー画面がある

今回は toB 側のプレビュー用コンポーネントを defineCustomElement で出力することに

使ってみた所感

Positive

• アプリ用に開発したコンポーネントを再利用できることは嬉しい
• Vueアプリ用にコンポーネントを作って、それをアプリ外に再利用出来る仕組みは色々活用できる気がする

課題感

• 以下の点に課題を感じた
  • Vue の props と Web components の attribute の扱いが異なる
• style を再帰的に抽出してくれない
  • Pull Request を出してみたがまだまだ道のりは遠い
  • https://github.com/vuejs/vue-next/pull/4309

Refs

• LINE 新卒採用 2023
  • https://linecorp.com/ja/career/newgrads/engineering/
• キャリア採用はこちらから
  • https://linecorp.com/ja/career/position/475
• BGM&SE
  • 魔王魂/騒音のない世界/OtoLogic

---

採用について

• LINEヤフー新卒採用
• LINEヤフー中途採用

使用素材・クレジット

• BGM&SE
  • 魔王魂
  • 騒音のない世界
  • OtoLogic