日報2022-05-31
Vue1→Vue2→Vue3化した
https://gyazo.com/da1a56e1de0df022113c555407f80450
社のプロダクトのVue3化作業をしていたのだけれど、ようやく全コード正常に動くようになったのでマージが行われた
まず今年の2月くらいにプロダクトの開発体験の悪さに辟易してwebpackからViteに移行させてくれと話して、そのときは一ヶ月くらい作業・確認したところ無事成功した
@miyaoka: vite化でdev server立ち上げまで18秒かかってたのが0.2秒になった https://pbs.twimg.com/media/FL31B_qaUAkOrCL.pnghttps://pbs.twimg.com/media/FL31NKjaMAAIzvR.png
Vite化の恩恵は大きく、開発体験が向上し、心身が充実し、やる気に満ち溢れ、だいぶやった甲斐があった
ついでにVue3化もやらせてくれと話して引き続き移行作業をやっていた
vue2のままだと使えないライブラリ(headlessUI、VueUseの一部など)が出てくるようになってつらい日々を送っていた
vue2でもcompositonAPIを使うようになっていたが、routerやstoreのライブラリをアップグレードしないとuseRouterやuseStoreが使えず完全にcomposition化できていなかった
長年開発してて謎にパフォーマンスが落ちてる部分を消し去りたい
結果としてvue3化の過程で書き直したり不要なものを消していったらかなりパフォーマンス向上した部分も出てきた
昨今の開発環境に比べて開発効率がかなり下がってしまっていた
根本的にはReactにしてしまったほうが様々な問題が解決しそうな感じはある
エディタのパフォーマンスの面などでSFCを使うのがしんどい。ts/tsxだけで開発したさが強い
ただコアライブラリ自体を変えるのはさすがに蛮勇すぎる。コストに見合わないし不確実性がかなり高い
それよりはvue3化のほうが移行コストは低い
今後のさまざまな機能開発を見据えると、とにかくvue2のままでは戦っていけないという危機感があった
開発を止めるわけにはいかないので自分一人で別ブランチでやっていた
移行作業はVite化よりだいぶ険しく、Breaking Changesが思ったより多かった
vue3用のlintで直るものもあれば、警告のみで手作業で直さなきゃいけないものもあるし、そもそも全部手作業で見つけ出して置き換えていくところもある
パターンマッチでいけるところは正規表現を書いてガッと数百ファイル書き換えて動作チェックみたいなことをしてた
特に移行ツールなどがなく、プロジェクト規模によっては作業コストがバカでかい
vue3の機能がvue2用にbackportされたりしてるので、積極的に戦っていく必要がなければvue2のままでいいと思う
特にv-modelがv-bind.syncと統合されたような扱いになったので、modelValueとemitの値を両方直す必要があっていろいろ直した
コンポーネントroot要素のイベントは.nativeをつけずともemitされるようになった
これにより誤動作するところがちらほらあって、見つけるのに手間がかかった
ライブラリを全てvue2用のものからvue3用のものに変える必要があった
主要なライブラリはvue3用のものも用意されているけど、使い方が変わっているものなどの対応が大変だった
代替えが無いものは自作するなどした
vue2環境では機能していた(許されていた?)使い方が、vue3で厳密になって死んでる部分などがあった
provide/injectを同一コンポーネントでやっているところがあってそれがvue2だとOKだったけどvue3では階層を分けないとだめっぽかった
そもそも同一階層でprovideとinjectをするのがおかしいので良くない書き方がされていた
ゆるい書き方ができてしまう環境は良くない
だいたいできたと思ったら開発の機能リリースタイミングによりマージできなかったりした
機能リリースが追加されるたびに開発が進んだブランチにマージするためにめちゃでかいコンフリクトを解決する必要が出てきて死んだ
終盤にはみんなで確認してもらって仕上げていった
https://gyazo.com/79934b6ca3c20a53bf0a5ba4a516439f
Initial Commitが6年前でVue1だったので、昭和→平成→令和、あるいは win3.1→win95→winXP→win11みたいなつぎはぎアップグレードをしてきた感ある