Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

akkie76
January 31, 2022
53

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

akkie76

January 31, 2022
Tweet

Transcript

  1. 自己紹介 Akihiko Sato 株式会社ラクス / Lead Engineer / Mobile Team

    SaaS 開発 (Backend, Frontend) / Mobile 開発 (iOS, Android) 読書 / コーヒー / HHKB / 機械式時計
  2. Vuetify ってどんなライブラリ Vue.js 上に構築された UI フレームワークで、表現力豊かな Material Design に基づいて設 計されたコンポーネントが特徴です。

    学習コストが低いことも特徴で、少ないコードで Frontend デザインを構築することができま す。 参考:https://vuetifyjs.com/ja/introduction/why-vuetify
  3. アップデートを担当することに 影響範囲 ・Vuetify のアップデート & 関連する依存ライブラリ ・100 位の vue ファイル(

    Vuetify で実装されている component ) ・Unit Test 対応期間 ・2 週間程度(テスト込み)
  4. いざ着手! 0.5 d で完了 👍 0.5 d で完了 👍 http://localhost:8080

    にアクセスしてみると・・・ ① package.json の依存関係解消 ② build error の解消
  5. 当時の状況 ・ほぼ全ての画面で UI 崩れ( Vuetify 2 系の componet の変更 )

      ・真っ白な画面 〜 部品の数 px のズレ ・.vue での多数の error, warning ・Unit Test が期待通りに動かない 結局のところ仕切り直しになった
  6. 大変だったこと 修正方針を決めて、チームで合意を取る点に一番のパワーを使うことになった ・各パーツの数 px のズレ → 直す・直さない? ・微妙に変わった色調 → 戻す・戻さない?

    ・フォント変更による印象の変化 → 直す・直さない? 最終的な協議結果 component に閉じた CSS の対応はしない方針になった