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

30万行を超えるCMSのNuxt3移行戦略 / Yappli tech conference ...

konkarin
October 14, 2024
33

30万行を超えるCMSのNuxt3移行戦略 / Yappli tech conference 2023 Frontend

konkarin

October 14, 2024
Tweet

Transcript

  1. プロダクトの規模 • コード 行 数:約 33 万 行 • コンポーネント数:約

    1,400 コンポーネント • ページ数:約 100 ページ フロントエンド5 人 と 一 部のバックエンド数 人 で 支 えている 0 1 Yappliのフロントエンドについて
  2. 使ってる技術 • Nuxt 2 . 1 5 . 8 •

    Vue 2 . 6 . 1 4 • @nuxtjs/composition-api 0 . 3 2 . 0 • TypeScript 4 . 2 . 4 ※2023-09-15時点 0 1 Yappliのフロントエンドについて
  3. 02 アップデート計画 取り組むこと 1 . アップデート前の準備 2 . Nuxt 2

    . 1 7 へのアップデート 3 . Nuxt Bridgeの導 入 4 . Bridgeの段階導 入 5 . Nuxt 3 へのアップデート
  4. Nuxt 2 . 1 7 へのアップデート 2023年頭にNuxt 2 . 1

    6 がリリースされ、続いて2.17もリリースされ た。後続のNuxt Bridgeに向けアップデートが必要。他にも • Vue 2 . 7 (script setup, Composition API) • Node.js 2 0 +をサポート など、年内をNuxt 2 で戦うための重要なアップデート。 02 アップデート計画
  5. 02 アップデート計画 取り組むこと 1 . アップデート前の準備 2 . Nuxt 2

    . 1 7 へのアップデート 3 . Nuxt Bridgeの導 入 (👈イマココ) 4 . Bridgeの段階導 入 5 . Nuxt 3 へのアップデート
  6. アップデートの前に… • 計画時点で対応事項が 100 個ぐらいあった。 • これらを 長 期的に安全にアップデートをしていく必要がある。 •

    リソース都合で 一 時的に1 人 でやらないといけない😇 ➡ 大 量の対応を少ないリソースで品質を担保しながら進める必要 がある🤔 03 アップデート前準備
  7. 自 動化 1 . ESLint のカスタムルールを使う 2 . VRT (Visual

    Regression Testing) をする 03 アップデート前準備
  8. 自 動化 1 . ESLint のカスタムルールを使う 2 . VRT (Visual

    Regression Testing) をする 03 アップデート前準備
  9. ESLint のカスタムルールを使う💪 Vue 公式の eslint-plugin-vue で破壊的変 更の多くを対応できる。 …が、プロダクトには放置された 非 推奨

    コードが多く、pluginだけでカバーできな い形式のものが結構あった(数百件🫠 03 アップデート前準備 - 自 動化
  10. Vue の SFC の書き換え (SFC→AST→SFC) は vue-eslint-parser とESLintのカスタムルールでできるので 自 作する✍

    ESLint のカスタムルールを使う💪 ➡ ➡ ➡ ✨ ✨ 03 アップデート前準備 - 自 動化
  11. 自 動化 1 . ESLint のカスタムルールを使う 2 . VRT (Visual

    Regression Testing) をする 03 アップデート前準備
  12. なんで VRT?🤔 1 . Yappliの開発フローとの相性 2 . テストのためのコスト 3 .

    バージョンアップとの相性 03 アップデート前準備 - 自 動化
  13. 実装 コード レビュー 個別QA 週次QA リリース かといって週次QAを待つと 手 戻りが多くなる可能性🙀 03

    アップデート前準備 - なんでVRT?🤔 1 . Yappliの開発フローとの相性
  14. なんでPlaywright? • VRTも普通のE 2 Eもどちらもできる • 並列実 行 が最 高

    • Auto-waitのおかげで、多少の不安定さを 吸収してくれる • 使うのが初めてでも、直感的に書ける! 03 アップデート前準備 - なんでVRT?🤔
  15. 1 2 ”仕組み”でプロダクトを維持すること 自 動化の偉 大 さ • 非 推奨なコードや依存関係は意識しないと放置されがち。

    • 日 頃から妥協せず、早めに摘む。(「後で直す」は 大 体直さない🫠) • 維持する仕組みを作ろう!(静的解析、CI、啓蒙活動など) • 定期的に 見 直す 文 化を作ることでも、チームにも維持する意識が芽 生 える。 • プロダクトが 大 きくなるほど、 人力 だけで対処できなくなる。 • 自 動化のメリットはプロダクトが 大 きくなるほど、時間が経つほどに増 大 する。 04 得られた学び📚