Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue2からVue3へのアップデートをどのように行っていったかの話
Search
aoki ken
July 21, 2024
1
170
Vue2からVue3へのアップデートをどのように行っていったかの話
aoki ken
July 21, 2024
Tweet
Share
More Decks by aoki ken
See All by aoki ken
Web開発を補助する目的でPlaywrightを使っている話
aokiken
0
620
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
RailsConf 2023
tenderlove
29
900
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
The Pragmatic Product Professional
lauravandoore
31
6.3k
How to Ace a Technical Interview
jacobian
276
23k
Ruby is Unlike a Banana
tanoku
97
11k
Embracing the Ebb and Flow
colly
84
4.5k
Why Our Code Smells
bkeepers
PRO
334
57k
Thoughts on Productivity
jonyablonski
67
4.3k
A designer walks into a library…
pauljervisheath
203
24k
The World Runs on Bad Software
bkeepers
PRO
65
11k
GitHub's CSS Performance
jonrohan
1030
460k
Transcript
Vue2からVue3へのアップデートを どのように⾏っていったかの話 SODA Dev Talk #2 #SODADev
株式会社SODA • 2023年12月~ Webフロントエンドエンジニア • 入社してしばらくは、 Webスマホ版の検索改善をやっていました 青木
健
None
Agenda • Vue2からVue3へのアップデートを行うまでの意思決定 • 開発構成、移行フローの説明 • バーンダウンチャートを見ながら振り返る • いくつかの工夫を紹介
Vue2からVue3へのアップデートを ⾏うまでの意思決定
• Vue2は2023/12/31にEOL ⌛ • 当初はReactに移行予定だったが、 想定以上に時間がかかる見込み 🐢 • NESを併用検討をするも、 コストに見合うか悩ましい
💸 Vue2からVue3へのアップデートを行うまでの意思決定
Vue2からVue3へのアップデートを行うまでの意思決定 • 改めて、Vue3への移行を試算 • 1ケース移行作業を実施 • QAを除けば、2, 3ヶ月で移行作業は 完了できそうな見込み
Vue3移行に方針変更!
開発構成、移⾏フローの説明
開発構成( Vue2) • webpack • Vue2 + JavaScript or TypeScript
• npm workspacesでReactと分離 • いわゆるMPA(エントリーポイントが200近くある) • Go Templateから必要なjsを読み込む形式 • FrontendのUIに関する単体テストなどはほとんどない
開発構成( Vue3) • Vite • Vue3 + JavaScript or TypeScript
• npm workspacesでReact, Vue2と分離 • いわゆるMPA(エントリーポイントが200近くある) • Go Templateから必要なjsを読み込む形式 • FrontendのUIに関する単体テストなどはほとんどない
移行フロー 1. 移行するエントリーポイントを決める 2. エントリーポイントの設定、関連するファイル、ライブラリを移行 3. Vue3向けにコードをアップデート a. 破壊的変更に対応
b. 依存ライブラリのアップデート、代替ライブラリに切り替え 4. QAの動作確認で問題なければリリース
バーンダウンチャートを⾒ながら 振り返る
バーンダウンチャートを見ながら振り返る • 青が目標値 • 赤がQA依頼までの進捗 • 緑が移行完了の進捗
バーンダウンチャートを見ながら振り返る(序盤) • 専属2名体制 • npm workspacesで異なるバージョ ンのVueを扱えるように • ViteでCSS-in-JSが動かず苦戦
• 他の開発と衝突しないように若干慎 重気味 • エントリーポイントに関連するファイル を移行していくのが無視できないくら い面倒 設定周りなどで詰まり 思うように進捗が出ない
バーンダウンチャートを見ながら振り返る(中盤) • 2名から4名体制に • いくつかの工夫を行う • 移行ナレッジが徐々に溜まってきた 設定や工夫がハマり、 大幅に進捗しはじめた
バーンダウンチャートを見ながら振り返る(終盤) • 4名から2名体制に • 開発完了までは12スプリントで終わら せる目標だったが、結果13スプリント までかかった • とはいえ、大幅に後ろにずれることな
く一旦終わって嬉しい🎉 2人体制に戻るも 進捗は維持
いくつかの⼯夫を紹介💡
いくつかの工夫を紹介 • cookieを使ってVue2からVue3へ切替可能に • Vue2環境からVue3環境への移行支援scriptを作成 • レビュー支援ツールを作成 • Vue2,
Vue3のワークスペース間で差分が出ていないか検知する仕組みを導入
• https://snkrdunk.com/?vue3=trueのようなクエリパラメータでcookieを 有効にし、状態に応じて読み込むjsをVue2, Vue3に切り替えられるように • 結果、workspaceごと分けている事もあって、ユーザーに影響が出ない形でVue3 対応したコードをベースブランチに取り込むことができた cookieを使ってVue2からVue3へ切替可能に
Vue2環境からVue3環境への移行支援 scriptを作成 • 一つ一つファイルを移行していくのが地味に大変だったため作成 • 結果、大幅な時間短縮に繋がった • Vue3移行の本質的な作業に集中できた
レビュー支援ツールを作成 • Vue2とVue3の環境を作った手前、GitHubのPRの差分が新規ファイルとなりレ ビューしづらかった • Vue2側のコードとのdiffを取り、差分が発生したものだけをツールで可視化し、レ ビュー支援に役立てた vue2, vue3で差分を生成
Vue2, Vue3のワークスペース間で差分が出ていない か検知する仕組みを導入 • 元々は、特定の範囲だけ徐々に移行していくなどしていたが、更新取りこぼしなど が発生しうる状況だった • 導入した結果、どの範囲を移行しているかを気にする必要がなくなった
質問は Xに #SODADev のハッシュタグをつけてポストをお願いします 質疑応答
ご清聴ありがとうございました