UIコンポーネント Vue3マイグレーション体験記 ~npm workspace機能を使ったモノレポ構成編~

自己紹介 1 爲本 雄亮 Tamemoto Yusuke 2022年にWebデザイナーとしてヤフー 株式会社に新卒入社。 2023年7月からPayPayカード株式会社 に主務出向し、デザインエンジニアと してPayPayカードのWeb/アプリにお ける実装、運用、改善業務に携わる。

背景 š Vueの2系が2023年の12月末にEOLになる。 š PayPayカード内ではvue2系を使ったサービスが多いため、セキュリ ティ関連で3系にマイグレーションしなければいけない。 š もちろんパッケージとして配信されている共通のUIコンポーネント群 もサービス内で利用されており、3系にマイグレーションする必要が ある。 2

背景 š フロントエンドバリデーションライブラリ vee-validateをv3からv4にしなければ ならないこと š 移行スケジュールとの兼ね合いでvite4とwebpack4の両環境で動作するよう資材を配 布しなければならないこと UIコンポーネントをVue3にマイグレーションする上での大きな2つの壁 3

背景 š フロントエンドバリデーションライブラリ vee-validateをv3からv4にしなければな らないこと š 移行スケジュールとの兼ね合いでvite4とwebpack4の両環境で動作するよう資材を配 布しなければならないこと š → 今回はここの話 UIコンポーネントをVue3にマイグレーションする上での大きな2つの壁 4

課題 Vue2(Webpack) Vue2(Vite) Vue3(Vite) Vue2(Webpack) Vue2 (Webpack and Vite) Vue3(Vite) 当初の想定 実際 1 2 3 1 2 3 5

課題 Vue2(Webpack) Vue2(Vite) Vue3(Vite) Vue2(Webpack) Vue2 (Webpack and Vite) Vue3(Vite) 当初の想定 実際 1 2 3 1 2 3 6

課題 ViteとWebpack両方のビルド環境を用意し、 どちらでも正常に動作するようにコンポーネント整 理する必要がある 7

Q. みなさんならどうしますか？ 8

A. npm workspace機能を使って、WebpackとViteの環境を分離 9

課題 src/ packages/ vite/ package.json webpack/ package.json package.json package.json Vite package.json Webpack 10

npm workspace機能による課題 š Swiperで利用されているscssのimport関連でビルドが通らない š Viteでは変数を含んだimportの場合、~などのエイリアスが効かない。 11

npm workspace機能による課題 š Swiperで利用されているscssのimport関連でビルドが通らない š Viteでは変数を含んだimportの場合、~などのエイリアスが効かない。 12

Swiperで利用されているscssのimport関連でビルドが通らない š 当初swiper6系を利用していた。 š Swiper6系はproduction build時にpagination componentのscssが抜け落ちて しまう事象が解決されていない š https://github.com/nolimits4web/swiper/issues/3777 š HACK対応でrequireを使えばうまく動作するが、Vite環境でrequireが使えない。 Swiper7系でその事象が解決されているため、Vue3対応時には取り急ぎv7までバー ジョンアップ š https://github.com/nolimits4web/swiper/projects/2 13

Swiperで利用されているscssのimport関連でビルドが通らない swiper7系はESM非対応のimportとESM対応の両方ともでスタイルを引っ 張ってくる方法を提供している。 14 https://swiperjs.com/react#usage-with-create-react-app https://v7.swiperjs.com/migration-guide#styles-imports

Swiperで利用されているscssのimport関連でビルドが通らない swiper7系はESM非対応のimportとESM対応の両方ともでスタイルを引っ 張ってくるやり方を提供している。 š Webpack側はESM対応のimportでスタイルを持ってこようとするとエラー、 š 一方Vite側でESM非対応用に用意されたものはInternal server Errorに落ちる 15

Q. みなさんならどうしますか？ 16

webpack/vite example.vue 自前でconfigファイルにaliasを設定することで解決 17

npm workspace機能による課題 š Swiperで利用されているscssのimport関連でビルドが通らない š Viteでは変数を含んだimportの場合、~などのエイリアスが効かな い。 18

viteでは変数を含んだimportを行う場合、~などのエイリアス が効かない これはrollupの制約であり、相対パスで設定しなければならない 19 https://github.com/rollup/plugins/tree/master/packages/ dynamic-import-vars#imports-must-start-with--or-

viteでは変数を含んだimportを行う場合、~などのエイリアス が効かない 例えば、svgファイルを動的に取得する際に問題が生じる 20 webpack vite

Q. みなさんならどうしますか？ 21

A. Vue.prototypeでそれぞれのsvg取得関数を流し込むことで解決 22

viteでは変数を含んだimportを行う場合、~などのエイリアス が効かない webpack Vite 23

viteでは変数を含んだimportを行う場合、~などのエイリアス が効かない これにより、コンポーネント側（利用側）ではvite/webpackの依存なく 同名関数を利用しており、アプリ起動時に処理が決定するのでそれぞれ正 常に動作することができる。 24

学び 2つの解決策に共通することは、実装の詳細を外 部からは見えないようにしてること。 オブジェクト思考の原則は、こういったケースで も役立つんだなと思いました。 25

まとめ š 同じコンポーネントに対してwebpack4とvite4の2つでビルドできる ような構成にしなければならない。 š npmのworkspace機能でVite用とWebpack用の両方を提供できるようなモノレポ 構成に変更した。 šSwiperで利用されているscssのimport関連でビルドが通らない š自前でconfigファイルにaliasを設定することで解決 šViteでは変数を含んだimportの場合、~などのエイリアスが効かない。 šVue.prototypeでそれぞれのsvg取得関数を流し込むことで解決 26

ご清聴ありがとうございました！ 27