30万行を超えるCMSのNuxt 3 移行戦略 / Nuxt 3 Migration Strategy for CMS with over 300,000 lines

by Yappli Developers

Slide 1

Slide 1 text

30万行を超えるCMSの Nuxt 3 移行戦略

Slide 2

Slide 2 text

Speaker プロダクト開発本部開発2部フロントエンドグループフロントエンドエンジニア小林洋介 2021年12 月からヤプリで働くフロントエンド5年生。Yappliの管理画面とデザインシステムの開発をしている。写真📸コーヒー☕キャンプ🏕 @k0n_karin

Slide 3

Slide 3 text

01 02 03 04 Yappliのフロントエンドについて🛁 アップデート計画🤔 アップデート前準備💪 得られた学び📚

Slide 4

Slide 4 text

01 Yappliのフロントエンドについて🛁

Slide 5

Slide 5 text

0 1 Yappliのフロントエンドについて Yappliのフロントエンド業務 Yappliの主なフロントエンド領域はアプリを作る管理画面です。例えば… • 既存機能の運用や保守 • 新機能の提案や開発 • Storybookを用いたデザインシステムの構築 • etc.

Slide 6

Slide 6 text

Slide 7

Slide 7 text

プロダクトの規模 • コード行数：約 33 万行 • コンポーネント数：約 1,400 コンポーネント • ページ数：約 100 ページフロントエンド5 人と一部のバックエンド数人で支えている 0 1 Yappliのフロントエンドについて

Slide 8

Slide 8 text

使ってる技術 • 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のフロントエンドについて

Slide 9

Slide 9 text

02 アップデート計画採用しているNuxt 2 について 2023年末でサポートが終了😭 年内にNuxt 3 にアップデートする必要がある。

Slide 10

Slide 10 text

02 アップデート計画🤔

Slide 11

Slide 11 text

02 アップデート計画取り組むこと 1 . アップデート前の準備 2 . Nuxt 2 . 1 7 へのアップデート 3 . Nuxt Bridgeの導入 4 . Bridgeの段階導入 5 . Nuxt 3 へのアップデート

Slide 12

Slide 12 text

アップデート前の準備 Nuxt, Vue 共に破壊的変更が結構ある。プロダクト規模も前述の通りのため、入念に事前調査しながら、アップデート前に対応できる変更や依存関係の整理から取り組む。 02 アップデート計画

Slide 13

Slide 13 text

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 アップデート計画

Slide 14

Slide 14 text

Nuxt Bridgeの利用プロダクト規模もそれなりのため、アップデート作業には工数がかかる上に相応のビジネスリスクも伴うため、切り戻しやすいように段階的に進めたい。 Bridgeがあれば、途中で3直行もできるため選択肢が多くなる🥰 02 アップデート計画

Slide 15

Slide 15 text

Nuxt Bridgeの利用 Bridgeのリリース当初は不安定で、ドキュメントや事例など情報不足だったが、メンテナの方々の尽力でかなり安定してきた。近々、RC版も出る🎉 02 アップデート計画

Slide 16

Slide 16 text

Nuxt 3 へのアップデートビッグバンリリースを避けるために段階的にリリースしたいが、 2→3はどうしても大きなリリースになるのは不可避… ➡カナリアリリースなどの公開範囲を絞るリリースを検討。 02 アップデート計画

Slide 17

Slide 17 text

02 アップデート計画取り組むこと 1 . アップデート前の準備 2 . Nuxt 2 . 1 7 へのアップデート 3 . Nuxt Bridgeの導入（👈イマココ） 4 . Bridgeの段階導入 5 . Nuxt 3 へのアップデート

Slide 18

Slide 18 text

03 アップデート前準備💪

Slide 19

Slide 19 text

アップデートの前に… • 計画時点で対応事項が 100 個ぐらいあった。 • これらを長期的に安全にアップデートをしていく必要がある。 • リソース都合で一時的に1 人でやらないといけない😇 03 アップデート前準備

Slide 20

Slide 20 text

アップデートの前に… • 計画時点で対応事項が 100 個ぐらいあった。 • これらを長期的に安全にアップデートをしていく必要がある。 • リソース都合で一時的に1 人でやらないといけない😇 ➡ 大量の対応を少ないリソースで品質を担保しながら進める必要がある🤔 03 アップデート前準備

Slide 21

Slide 21 text

自動化だ！🦾🤖🦾 03 アップデート前準備

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ESLint のカスタムルールを使う💪 Vue 公式の eslint-plugin-vue で破壊的変更の多くを対応できる。 …が、プロダクトには放置された非推奨コードが多く、pluginだけでカバーできない形式のものが結構あった（数百件🫠 03 アップデート前準備 - 自動化

Slide 25

Slide 25 text

Vue の SFC の書き換え (SFC→AST→SFC) は vue-eslint-parser とESLintのカスタムルールでできるので自作する✍ ESLint のカスタムルールを使う💪 ➡ ➡ ➡ ✨ ✨ 03 アップデート前準備 - 自動化

Slide 26

Slide 26 text

🎉

Slide 27

Slide 27 text

Linterで防げれば非推奨コードも早期& 自動で排除できる👍 03 アップデート前準備 - 自動化

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

なんで VRT？🤔 1 . Yappliの開発フローとの相性 2 . テストのためのコスト 3 . バージョンアップとの相性 03 アップデート前準備 - 自動化

Slide 30

Slide 30 text

1 . Yappliの開発フローとの相性 03 アップデート前準備 - なんでVRT？🤔 実装コードレビュー個別QA 週次QA リリース週次QAとリリースは週に1回

Slide 31

Slide 31 text

実装コードレビュー個別QA 週次QA リリースバージョンアップでは影響範囲が広いので通常の個別QAは困難😿 03 アップデート前準備 - なんでVRT？🤔 1 . Yappliの開発フローとの相性

Slide 32

Slide 32 text

実装コードレビュー個別QA 週次QA リリースかといって週次QAを待つと手戻りが多くなる可能性🙀 03 アップデート前準備 - なんでVRT？🤔 1 . Yappliの開発フローとの相性

Slide 33

Slide 33 text

実装コードレビュー個別QA 週次QA リリース実装段階で早めに広範囲の動作確認を低コストに実施したい → 自動テストが有効そう✅ 03 アップデート前準備 - なんでVRT？🤔 1 . Yappliの開発フローとの相性

Slide 34

Slide 34 text

2. テストのためのコスト元々コンポーネントのテストが不十分（StoreとUtilしかない）かつコンポーネントはStoreにめちゃくちゃ依存している🙀 単体・結合レベルのテストをするには、まずコンポーネント自体のテスタビリティを向上する必要がありそう… 03 アップデート前準備 - なんでVRT？🤔

Slide 35

Slide 35 text

https://autify.com/ja/blog/refactoring-or-testing-ja 2. テストのためのコスト 03 アップデート前準備 - なんでVRT？🤔

Slide 36

Slide 36 text

https://autify.com/ja/blog/refactoring-or-testing-ja 2. テストのためのコスト 03 アップデート前準備 - なんでVRT？🤔

Slide 37

Slide 37 text

https://autify.com/ja/blog/refactoring-or-testing-ja 2. テストのためのコスト 03 アップデート前準備 - なんでVRT？🤔 E 2 Eが合いそう✅

Slide 38

Slide 38 text

3. バージョンアップとの相性バージョンアップで確認したいことは、バージョンアップ後の環境と本番環境が同じ動作であること。 🤝 本番検証 03 アップデート前準備 - なんでVRT？🤔

Slide 39

Slide 39 text

E 2 Eの中でもVRTが良さそう💡 03 アップデート前準備 - なんでVRT？🤔

Slide 40

Slide 40 text

VRTするぞ！ 03 アップデート前準備 - なんでVRT？🤔

Slide 41

Slide 41 text

https://playwright.dev/

Slide 42

Slide 42 text

なんでPlaywright？ • VRTも普通のE 2 Eもどちらもできる • 並列実行が最高 • Auto-waitのおかげで、多少の不安定さを吸収してくれる • 使うのが初めてでも、直感的に書ける！ 03 アップデート前準備 - なんでVRT？🤔

Slide 43

Slide 43 text

🎉

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

僅かな差分も検知できる✅ 03 アップデート前準備

Slide 50

Slide 50 text

これで万全のバージョンアップ体制ができた🥳 03 アップデート前準備

Slide 51

Slide 51 text

04 得られた学び📚

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

VERSION UP VOYAGEはまだ始まったばかり…👨🚀