UIコンポーネント Vue3マイグレーション体験記

PayPayカード株式会社ではVue.js/Nuxt.jsを使ったプロダクト開発が中心です。昨年2023年12月末にvue2.xがEOLを迎えたため、セキュリティの観点からVue3へマイグレーションを行う必要がありました、今回はPayPayカード内で利用しているUIコンポーネントのマイグレーションを行う中で、苦労した点やどう解決したかについてお話します。

Transcript

1. UIコンポーネント Vue3マイグレーション体験記 ~npm workspace機能を使ったモノレポ構成編~
2. 自己紹介 1 爲本 雄亮 Tamemoto Yusuke 2022年にWebデザイナーとしてヤフー 株式会社に新卒入社。 2023年7月からPayPayカード株式会社 に主務出向し、デザインエンジニアと してPayPayカードのWeb/アプリにお ける実装、運用、改善業務に携わる。
3. 背景 š Vueの2系が2023年の12月末にEOLになる。 š PayPayカード内ではvue2系を使ったサービスが多いため、セキュリ ティ関連で3系にマイグレーションしなければいけない。 š もちろんパッケージとして配信されている共通のUIコンポーネント群 もサービス内で利用されており、3系にマイグレーションする必要が ある。 2
4. 背景 š フロントエンドバリデーションライブラリ vee-validateをv3からv4にしなければ ならないこと š 移行スケジュールとの兼ね合いでvite4とwebpack4の両環境で動作するよう資材を配 布しなければならないこと UIコンポーネントをVue3にマイグレーションする上での大きな2つの壁 3
5. 背景 š フロントエンドバリデーションライブラリ vee-validateをv3からv4にしなければな らないこと š 移行スケジュールとの兼ね合いでvite4とwebpack4の両環境で動作するよう資材を配 布しなければならないこと š → 今回はここの話 UIコンポーネントをVue3にマイグレーションする上での大きな2つの壁 4
6. 課題 Vue2(Webpack) Vue2(Vite) Vue3(Vite) Vue2(Webpack) Vue2 (Webpack and Vite) Vue3(Vite) 当初の想定 実際 1 2 3 1 2 3 5
7. 課題 Vue2(Webpack) Vue2(Vite) Vue3(Vite) Vue2(Webpack) Vue2 (Webpack and Vite) Vue3(Vite) 当初の想定 実際 1 2 3 1 2 3 6
8. 課題 ViteとWebpack両方のビルド環境を用意し、 どちらでも正常に動作するようにコンポーネント整 理する必要がある 7
9. Q. みなさんならどうしますか？ 8
10. A. npm workspace機能を使って、WebpackとViteの環境を分離 9
11. 課題 src/ packages/ vite/ package.json webpack/ package.json package.json package.json Vite package.json Webpack 10
12. npm workspace機能による課題 š Swiperで利用されているscssのimport関連でビルドが通らない š Viteでは変数を含んだimportの場合、~などのエイリアスが効かない。 11
13. npm workspace機能による課題 š Swiperで利用されているscssのimport関連でビルドが通らない š Viteでは変数を含んだimportの場合、~などのエイリアスが効かない。 12
14. 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
15. 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
16. Swiperで利用されているscssのimport関連でビルドが通らない swiper7系はESM非対応のimportとESM対応の両方ともでスタイルを引っ 張ってくるやり方を提供している。 š Webpack側はESM対応のimportでスタイルを持ってこようとするとエラー、 š 一方Vite側でESM非対応用に用意されたものはInternal server Errorに落ちる 15
17. Q. みなさんならどうしますか？ 16
18. webpack/vite example.vue 自前でconfigファイルにaliasを設定することで解決 17
19. npm workspace機能による課題 š Swiperで利用されているscssのimport関連でビルドが通らない š Viteでは変数を含んだimportの場合、~などのエイリアスが効かな い。 18
20. viteでは変数を含んだimportを行う場合、~などのエイリアス が効かない これはrollupの制約であり、相対パスで設定しなければならない 19 https://github.com/rollup/plugins/tree/master/packages/ dynamic-import-vars#imports-must-start-with--or-
21. viteでは変数を含んだimportを行う場合、~などのエイリアス が効かない 例えば、svgファイルを動的に取得する際に問題が生じる 20 webpack vite
22. Q. みなさんならどうしますか？ 21
23. A. Vue.prototypeでそれぞれのsvg取得関数を流し込むことで解決 22
24. viteでは変数を含んだimportを行う場合、~などのエイリアス が効かない webpack Vite 23
25. viteでは変数を含んだimportを行う場合、~などのエイリアス が効かない これにより、コンポーネント側（利用側）ではvite/webpackの依存なく 同名関数を利用しており、アプリ起動時に処理が決定するのでそれぞれ正 常に動作することができる。 24
26. 学び 2つの解決策に共通することは、実装の詳細を外 部からは見えないようにしてること。 オブジェクト思考の原則は、こういったケースで も役立つんだなと思いました。 25
27. まとめ š 同じコンポーネントに対してwebpack4とvite4の2つでビルドできる ような構成にしなければならない。 š npmのworkspace機能でVite用とWebpack用の両方を提供できるようなモノレポ 構成に変更した。 šSwiperで利用されているscssのimport関連でビルドが通らない š自前でconfigファイルにaliasを設定することで解決 šViteでは変数を含んだimportの場合、~などのエイリアスが効かない。 šVue.prototypeでそれぞれのsvg取得関数を流し込むことで解決 26
28. ご清聴ありがとうございました！ 27