Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
普通のエンジニアが頑張って30万行のNuxt3移行した話 / Vue Fes Japan 20...
Search
konkarin
October 18, 2024
4
2.1k
普通のエンジニアが頑張って30万行のNuxt3移行した話 / Vue Fes Japan 2024 Nuxt3 version up
konkarin
October 18, 2024
Tweet
Share
More Decks by konkarin
See All by konkarin
Radix UIとArk UIを併用したマルチフレームワーク対応デザインシステムの道はあるか / multi-framework-designsystem-with-arkui-and-radixui
konkarin
1
74
30万行を超えるCMSのNuxt3移行戦略 / Yappli tech conference 2023 Frontend
konkarin
0
30
Featured
See All Featured
Designing for Performance
lara
604
68k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Measuring & Analyzing Core Web Vitals
bluesmoon
1
40
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Automating Front-end Workflow
addyosmani
1365
200k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
GraphQLとの向き合い方2022年版
quramy
43
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Documentation Writing (for coders)
carmenintech
65
4.4k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Transcript
普通のエンジニアが頑張って 30万⾏のNuxt3バージョンアップ した話 VueFes 2024 2024.10.19
Nuxt3 への旅路: 30万⾏のバージョンアップで 学んだこと VueFes 2024 2024.10.19
アジェンダ 1. はじめに 2. Nuxt3アップデートについて 3. 技術的な⼯夫と解決策 4. バージョンアップを終えて
Introduction はじめに
Speaker 株式会社ヤプリ エンジニアリングマネージャー こん てぃらの という 猫と暮らしています。
• 私は外部イベントの登壇が初めてです。 • 私は無名のエンジニアです。 • 私はOSSコントリビュート経験がほぼありません。 ◦ (今後もっとやりたい。) ⾃⼰紹介 01
はじめに
• メンターや教わる⼈がいないVue/Nuxt初級者〜中級者くらいの⽅へ ◦ VueやNuxtを使ってなんとか開発できるけど、中⾝はあまりわからない ◦ 独学、教わる⼈がいない、どうやってレベルアップすればいいか わからない • 1年前の不安だった⾃分へ このセッションのターゲット
01 はじめに
1. 事象やコードを理解するための⼿段 2. OSSのコードから得られるものは多いこと このセッションで伝えたいこと 01 はじめに
• 調べてもわからない事象に⽴ち向かえるようになるかもしれない。 • 「OSSのコード読んでみよう!」と思えるかもしれない。 • 「Vueコミュニティってすごい!」と思えるかもしれない。 • ⽣存者バイアス、n=1の話なので何の役にも⽴たないかもしれない😇 このセッションを聞いたらどうなるか 01
はじめに
Nuxt3 Upgrade Nuxt3バージョンアップについて
の前に、Yappliについて 02 Nuxt3バージョンアップについて
None
None
Yappliのフロントエンドについて • コード⾏数:約 33 万⾏ • コンポーネント数:約 1,400 コンポーネント •
ページ数:約 100 ページ • フロントエンド6名と⼀部のバックエンド数名で⽀えています 02 Nuxt3バージョンアップについて
アップデート劇的ビフォーアフター 02 Nuxt3バージョンアップについて Before • Nuxt 2.15 • Vue 2.6
• Webpack 4
アップデート劇的ビフォーアフター 02 Nuxt3バージョンアップについて • Nuxt 3.13 • Vue 3.5 •
Vite 5 After Before • Nuxt 2.15 • Vue 2.6 • Webpack 4
どうやって移⾏したか? 02 Nuxt3バージョンアップについて
移⾏⽅針 02 Nuxt3バージョンアップについて 1. やらないことを決める 2. ビッグバンリリースを避ける 3. できるだけ⾃動化 4.
あとは気合🔥
移⾏⽅針 ~やらないことを決める~ 1 02 Nuxt3バージョンアップについて リファクタリングは最低限にして、最短最速でNuxt3を⽬指した! • Composition API化 ◦
7割位はOptions APIのまま。 • Vuex→Pinia ◦ Vuexのモジュールが100個くらいある😇 • etc.
移⾏⽅針 ~ビッグバンリリースを避ける~ 2 02 Nuxt3バージョンアップについて Vue2.7とNuxt Bridgeをフル活⽤し、Vue2でできることは予めやっておいた。 最後のNuxt3のリリースを⼩さくして、ビジネスリスクを最⼩化した。
移⾏⽅針 ~できるだけ⾃動化~ 3 02 Nuxt3バージョンアップについて 1⃣VueコンポーネントをAST(抽象構⽂⽊)に変換、2⃣ASTをいじる、 3⃣Vueコンポーネントに戻す、のようなリファクタリングを⾃動化した。 <template>と<style>の変換にはESLint、<script>はTS Compiler APIが使える。
playwrightを使ってE2Eテスト‧Visual Regression Test(VRT)を実装した。 これで⼤半の画⾯のデグレチェックを⾃動でできるようにした 移⾏⽅針 ~できるだけ⾃動化~ 3 02 Nuxt3バージョンアップについて
詳しくはYappli Tech Conference2023 で話しています👍 02 Nuxt3バージョンアップについて https://speakerdeck.com/konkarin/yappli-tech-conference-2023-frontend
• VueとNuxtのマイグレーションガイドをひたすら消化する。 • 移⾏中に襲いかかるエラー‧警告とひたすら格闘する。 移⾏⽅針 ~あとは気合🔥~ 4 02 Nuxt3バージョンアップについて 私
今⽇話すのは、この気合🔥の部分です。 02 Nuxt3バージョンアップについて
Solution 技術的な工夫と解決策
私が遭遇した印象的な事象を中⼼に お話します! 03 技術的な⼯夫と解決策
事象:500エラーが表⽰される 03 技術的な⼯夫と解決策 • Nuxt3移⾏作業が終わり、リリースに向けた QA中に検知。 • UncaughtなErrorのたびに毎回500エラー 画⾯が出る🫠 •
開発環境では起きず、ステージング環境だけ 起きる🤔
ググっても、NuxtのIssueを⾒ても、 それっぽいのがない😇 03 技術的な⼯夫と解決策
⾃⼒で⽴ち向かう💪 03 技術的な⼯夫と解決策
調査範囲を限定する 03 技術的な⼯夫と解決策 • まずは⼤胆に設定を削ってあたりをつける。 ◦ Nuxtのplugins/pagesディレクトリを全部消したり ◦ nuxt.config.tsの設定を限界まで削ったり ◦
何が影響してるかわからないときに有効👍 • 関係してそうなコード‧設定だけにして、 調査範囲を限定しよう!
Nuxtのpluginsを 全部消したら起きなくなった。 怪しい‧‧‧😒 03 技術的な⼯夫と解決策
pluginsを絞るとSentry/Vueが怪しい😒 03 技術的な⼯夫と解決策 • 当時Sentry/Nuxtはまだ無かったので pluginsでSentry/Vueを使っていた。 • 本番とステージングだけSentryを 有効にしていた。 •
開発環境でもSentryを有効にしたら 500エラー画⾯が表⽰された🙌
原因特定のためにSentry/Vueを調べる 03 技術的な⼯夫と解決策
Sentryだけの⼩さな再現環境を作る 03 技術的な⼯夫と解決策 状況を切り分けるために、余計なコードを削ぎ落とすとより純粋に事象と 向き合いやすいです。
ひたすらエラー‧警告‧処理を追う 03 技術的な⼯夫と解決策 コールスタックから何が起きているか正確に理解する。 怪しそうなところにブレークポイントを仕込む。
コールスタックの⾒⽅やChrome DevToolsの 使い⽅は現代の JavaScript チュートリアル が参考になります。 ひたすらエラー‧警告‧処理を追う 03 技術的な⼯夫と解決策 https://ja.javascript.info/debugging-chrome
⾒つけた!😽 03 技術的な⼯夫と解決策 NuxtとSentry/Vueが複合した問題だった! 詳しくは弊社テックブログでも解説しています! https://tech.yappli.io/entry/nuxt-sentry
03 技術的な⼯夫と解決策 Nuxtの初期化コードの⼀部で、 Vueの createApp() をする あたりのコード
03 技術的な⼯夫と解決策 ①500エラーを表⽰する関数
03 技術的な⼯夫と解決策 ①500エラーを表⽰する関数 ②Nuxtの初期化中は app.config.errorHandler に ①の500エラー表⽰の関数が⼊る
03 技術的な⼯夫と解決策 ①500エラーを表⽰する関数 ③初期化後 app.config.errorHandler が 上書きされてなかったら空っぽにする (今回ここは通らない) ②Nuxtの初期化中は app.config.errorHandler
に ①の500エラー表⽰の関数が⼊る
03 技術的な⼯夫と解決策 ①500エラーを表⽰する関数 ③初期化後 app.config.errorHandler が 上書きされてなかったら空っぽにする (今回ここは通らない) ②Nuxtの初期化中は app.config.errorHandler
に ①の500エラー表⽰の関数が⼊る メモ✍ handlerVueError は本来、初期化中にしか呼ばれない!
03 技術的な⼯夫と解決策 Sentry/VueがVueの app.config.errorHandler にエラー送信の 関数をアタッチするあたりの処理 =Sentryがエラー監視の準備をする処理
03 技術的な⼯夫と解決策 ①すでにセットされているVueの app.config.errorHandler を保持(今回の中⾝はNuxtの500エラー表⽰する関数)
03 技術的な⼯夫と解決策 ②app.config.errorHandler を Sentry⽤の関数で上書きする ①すでにセットされているVueの app.config.errorHandler を保持(今回の中⾝はNuxtの500エラー表⽰する関数)
03 技術的な⼯夫と解決策 ③保持しておいた関数を実⾏ (ここで500エラー画⾯が表⽰される) ②app.config.errorHandler を Sentry⽤の関数で上書きする ①すでにセットされているVueの app.config.errorHandler を保持(今回の中⾝はNuxtの500エラー表⽰する関数)
つまり‧‧‧ 03 技術的な⼯夫と解決策 1. Nuxtの初期化中は app.config.errorHandler = handleVueError をする 2.
Sentryは handleVueError を保持して app.config.errorHandler を上書きする 3. 2で上書きされたのでNuxtは app.config.errorHandler = undefined をしない 4. エラーが起きると Sentryが handleVueError を実行しちゃう 😱
処理を追うとOSSの理解が深まる 03 技術的な⼯夫と解決策 「ここってこういう⾵に処理されてるんだ!」「え?こんな書き⽅あったの?」 など、発⾒が多くて楽しいし、学びがとても多い。 独学でやっていた私にとっては宝の⼭でした。
事象を完全に理解したら~OSS編~ 03 技術的な⼯夫と解決策 1. IssueがなかったらIssueを⽴てよう! ◦ すでにIssueがあれば2へ。たまに回避策が提供されていたりするので参考に! ◦ 再現環境はURLで共有できるstackblitzやCodeSandoboxなどがおすすめ。 (だいたい各リポジトリでこんな感じ↓のテンプレが⽤意されてる)
2. ドキドキしながら待つ。直せるなら直すのもアリ👍
今回の事象はSentry/Nuxt 8.32.0以降を使えば回避できます👍 ちなみに‧‧‧① 03 技術的な⼯夫と解決策
この修正PRも学びになりました。(⾃分では直せなかった😭 ちなみに‧‧‧② 03 技術的な⼯夫と解決策 https://github.com/getsentry/sentry-javascript/pull/13748
⾃社側‧よくわからん事象の場合 03 技術的な⼯夫と解決策 • なんとかして直す‧回避策を考える。 • 奥の⼿:仕様を変える。 ◦ 今回は奥の⼿を使わずに済んだ😌
これの繰り返し 03 技術的な⼯夫と解決策 マイグレーションガイドにはないような、「Vue × 何か」「Nuxt × 何か」の 組み合わせで起きる問題が多かった。 問題のたびに同じことをひたすら繰り返す‧‧‧。
時間の制約もあるので、忍耐⼒と精神⼒も問われる。
わからない‧詰まったときにやったこと 03 技術的な⼯夫と解決策 • 諦めずに何度も向き合う。 ◦ 何度もいろんな⾓度から⾒るようにすると、そのうち点と点が線でつな がる(多分 • 諦めて⾵呂に⼊る。
◦ 結構おすすめ。意外と仕事以外の時間で閃く事が多い。 ◦ これわかる⼈結構いませんか?
Post-Upgrade バージョンアップを終えて
バージョンアップを終えて 1. ⾃分が成⻑できたポイント 2. プロダクトにもたらされたもの 04 バージョンアップを終えて
バージョンアップを終えて 1. ⾃分が成⻑できたポイント 2. プロダクトにもたらされたもの 04 バージョンアップを終えて
成⻑できたポイント 04 バージョンアップを終えて Before 1. Vue/Nuxtを雰囲気で使える 2. 検索でわからないエラーは詰む 3. コードの⾃動変換とかASTとか
わからん
成⻑できたポイント 04 バージョンアップを終えて After Before 1. Vue/Nuxtを雰囲気で使える 2. 検索でわからないエラーは詰む 3.
コードの⾃動変換とかASTとか わからん 1. Vue/Nuxtがどうやって動くか ちょっとわかった上で使える 2. エラーをスタックトレースから 追える‧解決できる 3. あれこれ⾃動化できる
成⻑できたポイント①VueとNuxtの理解 04 バージョンアップを終えて ref() refの裏側、実装
成⻑できたポイント①VueとNuxtの理解 04 バージョンアップを終えて ref() refの裏側、実装 この辺くらいまでわかった
問題解決の過程でVueやNuxtのコードを読む必要があり、学びが多かった。 • ⽬的を持って読む機会になったのが良かった。 • 先⼈たちの素晴らしいコードを⾒て、⾃分が書くコードも変わった。 • どうやって動いてるか概要がわかって、当たりがつけられるようになった。 成⻑できたポイント①VueとNuxtの理解 04 バージョンアップを終えて
動きを理解できたら、 次は直せそうな気がしませんか? 04 バージョンアップを終えて
Vueコミュニティのおかげで、理解の助けになるコンテンツが多い。 • 毎年のようにVue Fes Japanが開催されているのもとても刺激になる。 • ZennのVue‧Nuxtの情報が集まる広場や、chibivueで理解を すごく深められる。 成⻑できたポイント①VueとNuxtの理解 04
バージョンアップを終えて
エラーや警告はもちろん、数年前のプロダクトコードやOSSの⼀部を 理解する⼒が付いた。 • そこにあるコードを理解しないと詰む状況だった。 ◦ 必要に迫られると意外と頑張れる。 • 追ってもなかなか解決しないときもあった。忍耐⼒も養われた。 成⻑できたポイント②対応⼒ 04
バージョンアップを終えて
成⻑できたポイント③⾃動化 04 バージョンアップを終えて 詳しくはYappli Tech Conference2023で話しています👍(2回⽬ https://speakerdeck.com/konkarin/yappli-tech-conference-2023-frontend
解除した実績 04 バージョンアップを終えて 1. nuxt/nuxtとnuxt/bridgeにissueを出す! 2. nuxt/bridgeにPRを出す! 3. Sentry社の⽅に褒められる!
その他得られたもの 04 バージョンアップを終えて 1. ある程度の⾃信 2. この登壇経験 3. 富‧名声‧⼒
バージョンアップを終えて 1. ⾃分が成⻑できたポイント 2. プロダクトにもたらされたもの 04 バージョンアップを終えて
放置された⾮推奨コードが減った。 • 強制的に書き換える機会になった。 ◦ こういう機会がないと改善されにくい。 • 新しく⽣まれにくい仕組みもできた。 ◦ 気づかないうちに増えるので⾃動で消そう! プロダクトにもたらされたもの
04 バージョンアップを終えて
各種パッケージの最新バージョンに追従しやすくなった。 • Vue3対応したパッケージのリリースが出てdependabotのPRが⽴つたびに 泣きながら⾒送っていた😭 ◦ この状態が続くと、だんだん「もういいや」ってなる。 ◦ 気づいたら⼤きな負債になる。 プロダクトにもたらされたもの 04
バージョンアップを終えて
最新バージョンに追従できると、 パッケージの恩恵を得やすい! 特に開発者体験への寄与がすごい! 04 バージョンアップを終えて
今後のプロダクトの課題 より安全でスピーディなプロダクト開発のために‧‧‧ • 画⾯に⼀つずつVuexモジュールがあるので状態管理を整理したい。 • コンポーネントテストを拡充したい。 • etc. 04 バージョンアップを終えて
宣伝:10/29(⽕) After Talkやります! https://yappli.connpass.com/event/330660/
ご清聴ありがとうございました