普通のエンジニアが頑張って30万行のNuxt3移行した話 / Vue Fes Japan 2024 Nuxt3 version up

Transcript

1. 普通のエンジニアが頑張って 30万⾏のNuxt3バージョンアップ した話 VueFes 2024 2024.10.19
2. Nuxt3 への旅路： 30万⾏のバージョンアップで 学んだこと VueFes 2024 2024.10.19
3. アジェンダ 1. はじめに 2. Nuxt3アップデートについて 3. 技術的な⼯夫と解決策 4. バージョンアップを終えて
4. Introduction はじめに
5. Speaker 株式会社ヤプリ エンジニアリングマネージャー こん てぃらの という 猫と暮らしています。
6. • 私は外部イベントの登壇が初めてです。 • 私は無名のエンジニアです。 • 私はOSSコントリビュート経験がほぼありません。 ◦ （今後もっとやりたい。） ⾃⼰紹介 01 はじめに
7. • メンターや教わる⼈がいないVue/Nuxt初級者〜中級者くらいの⽅へ ◦ VueやNuxtを使ってなんとか開発できるけど、中⾝はあまりわからない ◦ 独学、教わる⼈がいない、どうやってレベルアップすればいいか わからない • 1年前の不安だった⾃分へ このセッションのターゲット 01 はじめに
8. 1. 事象やコードを理解するための⼿段 2. OSSのコードから得られるものは多いこと このセッションで伝えたいこと 01 はじめに
9. • 調べてもわからない事象に⽴ち向かえるようになるかもしれない。 • 「OSSのコード読んでみよう！」と思えるかもしれない。 • 「Vueコミュニティってすごい！」と思えるかもしれない。 • ⽣存者バイアス、n=1の話なので何の役にも⽴たないかもしれない😇 このセッションを聞いたらどうなるか 01 はじめに
10. Nuxt3 Upgrade Nuxt3バージョンアップについて
11. の前に、Yappliについて 02 Nuxt3バージョンアップについて
14. Yappliのフロントエンドについて • コード⾏数：約 33 万⾏ • コンポーネント数：約 1,400 コンポーネント • ページ数：約 100 ページ • フロントエンド6名と⼀部のバックエンド数名で⽀えています 02 Nuxt3バージョンアップについて
15. アップデート劇的ビフォーアフター 02 Nuxt3バージョンアップについて Before • Nuxt 2.15 • Vue 2.6 • Webpack 4
16. アップデート劇的ビフォーアフター 02 Nuxt3バージョンアップについて • Nuxt 3.13 • Vue 3.5 • Vite 5 After Before • Nuxt 2.15 • Vue 2.6 • Webpack 4
17. どうやって移⾏したか？ 02 Nuxt3バージョンアップについて
18. 移⾏⽅針 02 Nuxt3バージョンアップについて 1. やらないことを決める 2. ビッグバンリリースを避ける 3. できるだけ⾃動化 4. あとは気合🔥
19. 移⾏⽅針 ~やらないことを決める~ 1 02 Nuxt3バージョンアップについて リファクタリングは最低限にして、最短最速でNuxt3を⽬指した！ • Composition API化 ◦ 7割位はOptions APIのまま。 • Vuex→Pinia ◦ Vuexのモジュールが100個くらいある😇 • etc.
20. 移⾏⽅針 ~ビッグバンリリースを避ける~ 2 02 Nuxt3バージョンアップについて Vue2.7とNuxt Bridgeをフル活⽤し、Vue2でできることは予めやっておいた。 最後のNuxt3のリリースを⼩さくして、ビジネスリスクを最⼩化した。
21. 移⾏⽅針 ~できるだけ⾃動化~ 3 02 Nuxt3バージョンアップについて 1⃣VueコンポーネントをAST（抽象構⽂⽊）に変換、2⃣ASTをいじる、 3⃣Vueコンポーネントに戻す、のようなリファクタリングを⾃動化した。 <template>と<style>の変換にはESLint、<script>はTS Compiler APIが使える。
22. playwrightを使ってE2Eテスト‧Visual Regression Test(VRT)を実装した。 これで⼤半の画⾯のデグレチェックを⾃動でできるようにした  移⾏⽅針 ~できるだけ⾃動化~ 3 02 Nuxt3バージョンアップについて
23. 詳しくはYappli Tech Conference2023 で話しています👍 02 Nuxt3バージョンアップについて https://speakerdeck.com/konkarin/yappli-tech-conference-2023-frontend
24. • VueとNuxtのマイグレーションガイドをひたすら消化する。 • 移⾏中に襲いかかるエラー‧警告とひたすら格闘する。 移⾏⽅針 ~あとは気合🔥~ 4 02 Nuxt3バージョンアップについて 私
25. 今⽇話すのは、この気合🔥の部分です。 02 Nuxt3バージョンアップについて
26. Solution 技術的な工夫と解決策
27. 私が遭遇した印象的な事象を中⼼に お話します！ 03 技術的な⼯夫と解決策
28. 事象：500エラーが表⽰される 03 技術的な⼯夫と解決策 • Nuxt3移⾏作業が終わり、リリースに向けた QA中に検知。 • UncaughtなErrorのたびに毎回500エラー 画⾯が出る🫠 • 開発環境では起きず、ステージング環境だけ 起きる🤔
29. ググっても、NuxtのIssueを⾒ても、 それっぽいのがない😇 03 技術的な⼯夫と解決策
30. ⾃⼒で⽴ち向かう💪 03 技術的な⼯夫と解決策
31. 調査範囲を限定する 03 技術的な⼯夫と解決策 • まずは⼤胆に設定を削ってあたりをつける。 ◦ Nuxtのplugins/pagesディレクトリを全部消したり ◦ nuxt.config.tsの設定を限界まで削ったり ◦ 何が影響してるかわからないときに有効👍 • 関係してそうなコード‧設定だけにして、 調査範囲を限定しよう！
32. Nuxtのpluginsを 全部消したら起きなくなった。 怪しい‧‧‧😒 03 技術的な⼯夫と解決策
33. pluginsを絞るとSentry/Vueが怪しい😒 03 技術的な⼯夫と解決策 • 当時Sentry/Nuxtはまだ無かったので pluginsでSentry/Vueを使っていた。 • 本番とステージングだけSentryを 有効にしていた。 • 開発環境でもSentryを有効にしたら 500エラー画⾯が表⽰された🙌
34. 原因特定のためにSentry/Vueを調べる 03 技術的な⼯夫と解決策
35. Sentryだけの⼩さな再現環境を作る 03 技術的な⼯夫と解決策 状況を切り分けるために、余計なコードを削ぎ落とすとより純粋に事象と 向き合いやすいです。
36. ひたすらエラー‧警告‧処理を追う 03 技術的な⼯夫と解決策 コールスタックから何が起きているか正確に理解する。 怪しそうなところにブレークポイントを仕込む。
37. コールスタックの⾒⽅やChrome DevToolsの 使い⽅は現代の JavaScript チュートリアル が参考になります。 ひたすらエラー‧警告‧処理を追う 03 技術的な⼯夫と解決策 https://ja.javascript.info/debugging-chrome
38. ⾒つけた！😽 03 技術的な⼯夫と解決策 NuxtとSentry/Vueが複合した問題だった！ 詳しくは弊社テックブログでも解説しています！ https://tech.yappli.io/entry/nuxt-sentry
39. 03 技術的な⼯夫と解決策 Nuxtの初期化コードの⼀部で、 Vueの createApp() をする あたりのコード
40. 03 技術的な⼯夫と解決策 ①500エラーを表⽰する関数
41. 03 技術的な⼯夫と解決策 ①500エラーを表⽰する関数 ②Nuxtの初期化中は app.config.errorHandler に ①の500エラー表⽰の関数が⼊る
42. 03 技術的な⼯夫と解決策 ①500エラーを表⽰する関数 ③初期化後 app.config.errorHandler が 上書きされてなかったら空っぽにする （今回ここは通らない） ②Nuxtの初期化中は app.config.errorHandler に ①の500エラー表⽰の関数が⼊る
43. 03 技術的な⼯夫と解決策 ①500エラーを表⽰する関数 ③初期化後 app.config.errorHandler が 上書きされてなかったら空っぽにする （今回ここは通らない） ②Nuxtの初期化中は app.config.errorHandler に ①の500エラー表⽰の関数が⼊る メモ✍ handlerVueError は本来、初期化中にしか呼ばれない！
44. 03 技術的な⼯夫と解決策 Sentry/VueがVueの app.config.errorHandler にエラー送信の 関数をアタッチするあたりの処理 ＝Sentryがエラー監視の準備をする処理
45. 03 技術的な⼯夫と解決策 ①すでにセットされているVueの app.config.errorHandler を保持（今回の中⾝はNuxtの500エラー表⽰する関数）
46. 03 技術的な⼯夫と解決策 ②app.config.errorHandler を Sentry⽤の関数で上書きする ①すでにセットされているVueの app.config.errorHandler を保持（今回の中⾝はNuxtの500エラー表⽰する関数）
47. 03 技術的な⼯夫と解決策 ③保持しておいた関数を実⾏ （ここで500エラー画⾯が表⽰される） ②app.config.errorHandler を Sentry⽤の関数で上書きする ①すでにセットされているVueの app.config.errorHandler を保持（今回の中⾝はNuxtの500エラー表⽰する関数）
48. つまり‧‧‧ 03 技術的な⼯夫と解決策 1. Nuxtの初期化中は app.config.errorHandler = handleVueError をする 2. Sentryは handleVueError を保持して app.config.errorHandler を上書きする 3. 2で上書きされたのでNuxtは app.config.errorHandler = undefined をしない 4. エラーが起きると Sentryが handleVueError を実行しちゃう 😱
49. 処理を追うとOSSの理解が深まる 03 技術的な⼯夫と解決策 「ここってこういう⾵に処理されてるんだ！」「え？こんな書き⽅あったの？」 など、発⾒が多くて楽しいし、学びがとても多い。 独学でやっていた私にとっては宝の⼭でした。
50. 事象を完全に理解したら~OSS編~ 03 技術的な⼯夫と解決策 1. IssueがなかったらIssueを⽴てよう！ ◦ すでにIssueがあれば2へ。たまに回避策が提供されていたりするので参考に！ ◦ 再現環境はURLで共有できるstackblitzやCodeSandoboxなどがおすすめ。 （だいたい各リポジトリでこんな感じ↓のテンプレが⽤意されてる） 2. ドキドキしながら待つ。直せるなら直すのもアリ👍
51. 今回の事象はSentry/Nuxt 8.32.0以降を使えば回避できます👍 ちなみに‧‧‧① 03 技術的な⼯夫と解決策
52. この修正PRも学びになりました。（⾃分では直せなかった😭 ちなみに‧‧‧② 03 技術的な⼯夫と解決策 https://github.com/getsentry/sentry-javascript/pull/13748
53. ⾃社側‧よくわからん事象の場合 03 技術的な⼯夫と解決策 • なんとかして直す‧回避策を考える。 • 奥の⼿：仕様を変える。 ◦ 今回は奥の⼿を使わずに済んだ😌
54. これの繰り返し 03 技術的な⼯夫と解決策 マイグレーションガイドにはないような、「Vue × 何か」「Nuxt × 何か」の 組み合わせで起きる問題が多かった。 問題のたびに同じことをひたすら繰り返す‧‧‧。 時間の制約もあるので、忍耐⼒と精神⼒も問われる。
55. わからない‧詰まったときにやったこと 03 技術的な⼯夫と解決策 • 諦めずに何度も向き合う。 ◦ 何度もいろんな⾓度から⾒るようにすると、そのうち点と点が線でつな がる（多分 • 諦めて⾵呂に⼊る。 ◦ 結構おすすめ。意外と仕事以外の時間で閃く事が多い。 ◦ これわかる⼈結構いませんか？
56. Post-Upgrade バージョンアップを終えて
57. バージョンアップを終えて 1. ⾃分が成⻑できたポイント 2. プロダクトにもたらされたもの 04 バージョンアップを終えて
58. バージョンアップを終えて 1. ⾃分が成⻑できたポイント 2. プロダクトにもたらされたもの 04 バージョンアップを終えて
59. 成⻑できたポイント 04 バージョンアップを終えて Before 1. Vue/Nuxtを雰囲気で使える 2. 検索でわからないエラーは詰む 3. コードの⾃動変換とかASTとか わからん
60. 成⻑できたポイント 04 バージョンアップを終えて After Before 1. Vue/Nuxtを雰囲気で使える 2. 検索でわからないエラーは詰む 3. コードの⾃動変換とかASTとか わからん 1. Vue/Nuxtがどうやって動くか ちょっとわかった上で使える 2. エラーをスタックトレースから 追える‧解決できる 3. あれこれ⾃動化できる
61. 成⻑できたポイント①VueとNuxtの理解 04 バージョンアップを終えて ref() refの裏側、実装
62. 成⻑できたポイント①VueとNuxtの理解 04 バージョンアップを終えて ref() refの裏側、実装 この辺くらいまでわかった
63. 問題解決の過程でVueやNuxtのコードを読む必要があり、学びが多かった。 • ⽬的を持って読む機会になったのが良かった。 • 先⼈たちの素晴らしいコードを⾒て、⾃分が書くコードも変わった。 • どうやって動いてるか概要がわかって、当たりがつけられるようになった。 成⻑できたポイント①VueとNuxtの理解 04 バージョンアップを終えて
64. 動きを理解できたら、 次は直せそうな気がしませんか？ 04 バージョンアップを終えて
65. Vueコミュニティのおかげで、理解の助けになるコンテンツが多い。 • 毎年のようにVue Fes Japanが開催されているのもとても刺激になる。 • ZennのVue‧Nuxtの情報が集まる広場や、chibivueで理解を すごく深められる。 成⻑できたポイント①VueとNuxtの理解 04 バージョンアップを終えて
66. エラーや警告はもちろん、数年前のプロダクトコードやOSSの⼀部を 理解する⼒が付いた。 • そこにあるコードを理解しないと詰む状況だった。 ◦ 必要に迫られると意外と頑張れる。 • 追ってもなかなか解決しないときもあった。忍耐⼒も養われた。 成⻑できたポイント②対応⼒ 04 バージョンアップを終えて
67. 成⻑できたポイント③⾃動化 04 バージョンアップを終えて 詳しくはYappli Tech Conference2023で話しています👍（2回⽬ https://speakerdeck.com/konkarin/yappli-tech-conference-2023-frontend
68. 解除した実績 04 バージョンアップを終えて 1. nuxt/nuxtとnuxt/bridgeにissueを出す！ 2. nuxt/bridgeにPRを出す！ 3. Sentry社の⽅に褒められる！
69. その他得られたもの 04 バージョンアップを終えて 1. ある程度の⾃信 2. この登壇経験 3. 富‧名声‧⼒
70. バージョンアップを終えて 1. ⾃分が成⻑できたポイント 2. プロダクトにもたらされたもの 04 バージョンアップを終えて
71. 放置された⾮推奨コードが減った。 • 強制的に書き換える機会になった。 ◦ こういう機会がないと改善されにくい。 • 新しく⽣まれにくい仕組みもできた。 ◦ 気づかないうちに増えるので⾃動で消そう！ プロダクトにもたらされたもの 04 バージョンアップを終えて
72. 各種パッケージの最新バージョンに追従しやすくなった。 • Vue3対応したパッケージのリリースが出てdependabotのPRが⽴つたびに 泣きながら⾒送っていた😭 ◦ この状態が続くと、だんだん「もういいや」ってなる。 ◦ 気づいたら⼤きな負債になる。 プロダクトにもたらされたもの 04 バージョンアップを終えて
73. 最新バージョンに追従できると、 パッケージの恩恵を得やすい！ 特に開発者体験への寄与がすごい！ 04 バージョンアップを終えて
74. 今後のプロダクトの課題 より安全でスピーディなプロダクト開発のために‧‧‧ • 画⾯に⼀つずつVuexモジュールがあるので状態管理を整理したい。 • コンポーネントテストを拡充したい。 • etc. 04 バージョンアップを終えて
75. 宣伝：10/29(⽕) After Talkやります！ https://yappli.connpass.com/event/330660/
76. ご清聴ありがとうございました