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