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
0
65
Vue2からVue3へのアップデートをどのように行っていったかの話
aoki ken
July 21, 2024
Tweet
Share
More Decks by aoki ken
See All by aoki ken
Web開発を補助する目的でPlaywrightを使っている話
aokiken
0
580
Featured
See All Featured
Web development in the modern age
philhawksworth
204
10k
[RailsConf 2023] Rails as a piece of cake
palkan
44
4.6k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Mobile First: as difficult as doing things right
swwweet
220
8.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
How to train your dragon (web standard)
notwaldorf
85
5.6k
Rails Girls Zürich Keynote
gr2m
93
13k
Designing for humans not robots
tammielis
248
25k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.2k
Why Our Code Smells
bkeepers
PRO
333
56k
The World Runs on Bad Software
bkeepers
PRO
64
11k
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 のハッシュタグをつけてポストをお願いします 質疑応答
ご清聴ありがとうございました