Vue2からVue3へのアップデートをどのように行っていったかの話

Transcript

1. Vue2からVue3へのアップデートを どのように⾏っていったかの話 SODA Dev Talk #2
 #SODADev
2. 株式会社SODA
 • 2023年12月~ Webフロントエンドエンジニア 
 • 入社してしばらくは、 Webスマホ版の検索改善をやっていました 
 青木 健

4. Agenda
 • Vue2からVue3へのアップデートを行うまでの意思決定
 • 開発構成、移行フローの説明
 • バーンダウンチャートを見ながら振り返る
 • いくつかの工夫を紹介

5. Vue2からVue3へのアップデートを ⾏うまでの意思決定
6. • Vue2は2023/12/31にEOL ⌛
 • 当初はReactに移行予定だったが、 想定以上に時間がかかる見込み 🐢
 • NESを併用検討をするも、
 コストに見合うか悩ましい 💸
 Vue2からVue3へのアップデートを行うまでの意思決定 

7. Vue2からVue3へのアップデートを行うまでの意思決定 
 • 改めて、Vue3への移行を試算
 • 1ケース移行作業を実施
 • QAを除けば、2, 3ヶ月で移行作業は 完了できそうな見込み
 Vue3移行に方針変更！
8. 開発構成、移⾏フローの説明
9. 開発構成（ Vue2）
 • webpack
 • Vue2 + JavaScript or TypeScript
 • npm workspacesでReactと分離
 • いわゆるMPA（エントリーポイントが200近くある）
 • Go Templateから必要なjsを読み込む形式
 • FrontendのUIに関する単体テストなどはほとんどない

10. 開発構成（ Vue3）
 • Vite
 • Vue3 + JavaScript or TypeScript
 • npm workspacesでReact, Vue2と分離
 • いわゆるMPA（エントリーポイントが200近くある）
 • Go Templateから必要なjsを読み込む形式
 • FrontendのUIに関する単体テストなどはほとんどない

11. 移行フロー 
 1. 移行するエントリーポイントを決める
 2. エントリーポイントの設定、関連するファイル、ライブラリを移行
 3. Vue3向けにコードをアップデート
 a. 破壊的変更に対応
 b. 依存ライブラリのアップデート、代替ライブラリに切り替え 
 4. QAの動作確認で問題なければリリース

12. バーンダウンチャートを⾒ながら 振り返る
13. バーンダウンチャートを見ながら振り返る 
 • 青が目標値
 • 赤がQA依頼までの進捗
 • 緑が移行完了の進捗

14. バーンダウンチャートを見ながら振り返る（序盤） 
 • 専属2名体制
 • npm workspacesで異なるバージョ ンのVueを扱えるように
 • ViteでCSS-in-JSが動かず苦戦
 • 他の開発と衝突しないように若干慎 重気味
 • エントリーポイントに関連するファイル を移行していくのが無視できないくら い面倒
 設定周りなどで詰まり 思うように進捗が出ない
15. バーンダウンチャートを見ながら振り返る（中盤） 
 • 2名から4名体制に
 • いくつかの工夫を行う
 • 移行ナレッジが徐々に溜まってきた
 設定や工夫がハマり、 大幅に進捗しはじめた
16. バーンダウンチャートを見ながら振り返る（終盤） 
 • 4名から2名体制に
 • 開発完了までは12スプリントで終わら せる目標だったが、結果13スプリント までかかった
 • とはいえ、大幅に後ろにずれることな く一旦終わって嬉しい🎉
 2人体制に戻るも 進捗は維持
17. いくつかの⼯夫を紹介💡
18. いくつかの工夫を紹介 
 • cookieを使ってVue2からVue3へ切替可能に
 • Vue2環境からVue3環境への移行支援scriptを作成
 • レビュー支援ツールを作成
 • Vue2, Vue3のワークスペース間で差分が出ていないか検知する仕組みを導入

19. • https://snkrdunk.com/?vue3=trueのようなクエリパラメータでcookieを
 有効にし、状態に応じて読み込むjsをVue2, Vue3に切り替えられるように
 • 結果、workspaceごと分けている事もあって、ユーザーに影響が出ない形でVue3 対応したコードをベースブランチに取り込むことができた
 cookieを使ってVue2からVue3へ切替可能に 

20. Vue2環境からVue3環境への移行支援 scriptを作成
 • 一つ一つファイルを移行していくのが地味に大変だったため作成
 • 結果、大幅な時間短縮に繋がった
 • Vue3移行の本質的な作業に集中できた

21. レビュー支援ツールを作成 
 • Vue2とVue3の環境を作った手前、GitHubのPRの差分が新規ファイルとなりレ ビューしづらかった
 • Vue2側のコードとのdiffを取り、差分が発生したものだけをツールで可視化し、レ ビュー支援に役立てた
 vue2, vue3で差分を生成
22. Vue2, Vue3のワークスペース間で差分が出ていない か検知する仕組みを導入 
 • 元々は、特定の範囲だけ徐々に移行していくなどしていたが、更新取りこぼしなど が発生しうる状況だった
 • 導入した結果、どの範囲を移行しているかを気にする必要がなくなった

23. 質問は Xに #SODADev のハッシュタグをつけてポストをお願いします
 質疑応答
24. ご清聴ありがとうございました