Frontendライブラリの アップデートで苦労した話

Transcript

1. 〜 UI 系ライブラリメジャーアップデートの TIPS 〜 Vuetifyのメジャーアップデート で苦労した話 Akihiko Sato
2. 自己紹介 Akihiko Sato 株式会社ラクス / Lead Engineer / Mobile Team SaaS 開発 (Backend, Frontend) / Mobile 開発 (iOS, Android) 読書 / コーヒー / HHKB / 機械式時計
3. 今日伝えたいこと プロジェクトで影響力が大きい ライブラリのアップデートのTIPS
4. Vuetify ってどんなライブラリ Vue.js 上に構築された UI フレームワークで、表現力豊かな Material Design に基づいて設 計されたコンポーネントが特徴です。 学習コストが低いことも特徴で、少ないコードで Frontend デザインを構築することができま す。 参考：https://vuetifyjs.com/ja/introduction/why-vuetify
5. 直前に迫ったELO（サポート終了） Vuetify は発展途上のライブラリでリリースも頻繁に行われているため、 使う側は、ライブラリのリリース状況をウォッチして行く必要があります。 一方、機能開発が中心のチームでは、ライブラリのアップデートに掛けるコストもあ まりない状況で、ついに v1 系の EOL が迫ってきました。 （ 現在の主流は v2 系 ）
6. アップデートを担当することに 影響範囲 ・Vuetify のアップデート & 関連する依存ライブラリ ・100 位の vue ファイル（ Vuetify で実装されている component ） ・Unit Test 対応期間 ・2 週間程度（テスト込み）
7. 着手前の作業イメージ ・Vuetify のアップデート & package.json の依存関係を修正 ・.vue ファイルの error, warning を修正 ・全機能テスト この手順で行けば期間に余裕でしょう！
8. いざ着手！ 0.5 d で完了 👍 0.5 d で完了 👍 http://localhost:8080 にアクセスしてみると・・・ ① package.json の依存関係解消 ② build error の解消
9. 破壊的な UI 崩れが発生
10. 当時の状況 ・ほぼ全ての画面で UI 崩れ（ Vuetify 2 系の componet の変更 ） 　　・真っ白な画面 〜 部品の数 px のズレ ・.vue での多数の error, warning ・Unit Test が期待通りに動かない 結局のところ仕切り直しになった
11. 失敗要因 ① 影響調査（技術調査）が甘かった ・実際の影響範囲を把握できていなかった ・見積もりの正確さが欠けていた
12. 方針変更 この失敗を巻き返すべく、チームとして方針を変更することに 1.　vue ファイルリストを作成して、状況を整理 2.　対応方針、修正工数、優先度を各 vue ファイルごとに検討 3.　Unit Test の優先度は低めに設定 2 の優先度「高」から修正を開始
13. 大変だったこと 修正方針を決めて、チームで合意を取る点に一番のパワーを使うことになった ・各パーツの数 px のズレ → 直す・直さない？ ・微妙に変わった色調 → 戻す・戻さない？ ・フォント変更による印象の変化 → 直す・直さない？ 最終的な協議結果 component に閉じた CSS の対応はしない方針になった
14. 失敗要因 ② 事前に対応方針をチーム合意していなかった ・メジャーアップデートによりUIの印象がかなり変わる ・場合によって、ステークホルダーとの調整（コスト）も必要
15. 結果として 何とかリリース延期は避けることができたが ・対応に 3 週間かかってしまった（残業含めて） ・一部の component で局所的な対応になった ・Unit Test の一部の warning は対応を見送ることに
16. まとめ UI 系のライブラリのメジャーアップデートはとても影響度が大きいです １. 事前に各画面の具体的な影響範囲を調査しておくこと ２. 修正方針をチームで FIX させておくこと（調整しておくこと） ３. 片手間でやらないこと（アップデートは計画的に）