Nuxt3マイグレーションについて / nuxt_migration

Transcript

1. © 2019-2024 OPTiM Corp. All rights reserved. Nuxt3マイグレーションについて 株式会社オプティム 技術統括本部 プラットフォームサービス開発部 高橋 2024/10/17
2. © 2019-2024 OPTiM Corp. All rights reserved. 2 こんなアイコンでRimlという名前で活動してます(Zennなど) 基本情報 自己紹介  名前: 高橋(Takahashi)  所属: 技術統括本部 プラットフォームサービス開発部  役職: フロントエンド リードエンジニア  入社: 2022年新卒  好き ◼ フロントエンド技術散策/イベント参加 ◼ VTuber(ホロライブ)  やってること ◼ 製品: OPTiM Asset、OPTiMサスマネの開発 ◼ デザインシステム作成(デザイントークンの仕組み誠意作成中) ◼ 社内フロントエンド相談会立ち上げ ◼ 技術標準化(デザイン設計・実装)
3. © 2019-2024 OPTiM Corp. All rights reserved. 3 話すこと  マイグレーションの流れ ◼ マイグレーション前段階にしたこと ◼ 移行手順の線引 ◼ 工夫したこと ◼ Tips  良かった点/辛かった点  まとめ
4. © 2019-2024 OPTiM Corp. All rights reserved. 4 マイグレーションの流れ
5. © 2019-2024 OPTiM Corp. All rights reserved. 5 影響のある箇所の分離などをリファクタリングを込みで行っていった  Nuxt Bridgeを導入(一部利用) ◼ Nuxt Bridgeをいれることで、移行に必要な場所がエラーやワーニングを出してくれる ◼ 最初はfalse運用で修正し徐々にフラグをtrueにしていく流れ ◼ ただし当時のバージョンではライブラリ依存等でNuxt Bridgeでの移行がうまく出来ずあく までリファクタリングのみの利用に  Nuxt3に向けた対応ライブラリの移行 ◼ なるべくVue公式推奨のものに合わせることで移行をしやすくする対応 ◼ Nuxt/Vuetifyから素のVuetify2に移行対応することでNuxtの依存を剥がしVuetify3に移行 しやすい体制作り ◼ Viteに移行  Nuxt2の依存を剥がす対応(割と重要かもしれない) ◼ Vue2/Nuxt2に依存するような処理を書いていたので削除し別の対応 ◼ Contextに依存していたPiniaの記述修正対応 NuxtBridge: https://nuxt.com/docs/bridge/overview Vite: https://ja.vite.dev/ Pinia: https://pinia.vuejs.org/ Vuetify3: https://vuetifyjs.com/ マイグレーション前段階にしたこと NuxtBridge 導入PR 推奨移行PR 依存剥がしのPR
6. © 2019-2024 OPTiM Corp. All rights reserved. 6 移行手順の線引 移行にまず慣れるため大き な変更がない エラー画面を移行 機能の多い主要画面の 移行 vue.draggableなどUIライ ブラリ依存が発生する 設定画面の移行 画面総数が多い画 面の移行 移行ロードマップを切り出し 移行手順 1. 依存が無い共通コンポー ネント群の移行 2. 認証等新規ラ イブラリ等の検 証、導入(PoC込) 3. データfetchを キャッシュしている Piniaの移行 4. Layoutコン ポーネントの移 行 5. ページレベル での移行 別プロダクトで動きつつで2人体制で移行を行った vue.draggable : https://github.com/SortableJS/vue.draggable.next Sidebase-nuxt-auth: https://auth.sidebase.io/
7. © 2019-2024 OPTiM Corp. All rights reserved. 7 リグレッションテスト、移行後のバグ修正  リグレッションテスト実施 (マネージャー参画) ◼ マネージャーも加わりリグレッションテストを実施 ◼ 致命的なバグは出ず、出たバグそれぞれに着手優先順を付与し対応  バグ修正 ◼ 優先順に3人でバグ修正対応 ◼ 細々なバグが複数件出ていた  再リグレッションテスト実施 ◼ バグ修正後も大きな問題は出ずリリース！ 移行手順の線引
8. © 2019-2024 OPTiM Corp. All rights reserved. 8  コンポーネント設計をAtomic DesignからPackage By Featureに ◼ コンポーネントの依存関係が複雑化していた問題を一気に解消しコンポーネント見 通しが改善された ◼ 機能ベースになり混雑しがちなMolecules、Organisms問題の解消 ◼ Atoms単位は依存がないので機能の外の共通componentsディレクトリに移行 ◼ Storybookで描画、play functionでテスト、reg-suitでVRT  リファクタリングを行う ◼ Options記法、Composition API記法のからScript Setupへ全て移行 ◼ Scoped SCSSを外しScoped CSSに全て移行 ◼ 全社デザイン適用のためにデザインシステムのトークン取り込み ⚫ 足りない仕組みはデザインシステム側にもコミット Storybook play function: https://storybook.js.org/docs/writing-stories/play-function Reg-suit: https://reg-viz.github.io/reg-suit/ 工夫したこと ページレベルの組み立て 機能ごとの組み立てになり手戻りしにくい！
9. © 2019-2024 OPTiM Corp. All rights reserved. 9  2つのAI Chatを活用 ◼ 会社で用意している Bedrock Claude Chat (クロード) ◼ Perplexity.ai (パープレキシティ)  Bedrock Claude Chat ◼ PropsなどVue3自体のマイグレーションに活用 ◼ 社内に立っているので多少な情報(コメントなど)が乗った状態のまま会話が可能 ◼ ClaudeはGithub Copilot AlternativeであるVSCode拡張 Continueに活用も可能 ✓ definePropsやdefineEmitなどの置き換えはほとんど投げるだけで完了した  Perplexity.ai ◼ Vuetify3、VeeValidate v4の情報検索に活用 ◼ 社外のものなので情報精査は必須 ◼ エンジニアリング向けAIなのもあり最新情報検索結果+柔軟な回答が得意 ⚫ 感覚ChatGPT Plusの回答よりも圧倒的に精度が良い気がする ✓ マイグレーションで置き換えたい部分の情報取得は大体解消してくれた bedrock-claude-chat: https://github.com/aws-samples/bedrock-claude-chat Perplexity.ai: https://www.perplexity.ai/ Vuetify3: https://vuetifyjs.com/ VeeValidate: https://vee-validate.logaretm.com/v4/ Continue: https://marketplace.visualstudio.com/items?itemName=Continue.continue Tips: AI活用 Bedrock Claude Chat Perplexity
10. © 2019-2024 OPTiM Corp. All rights reserved. 10 良かった点/辛かった点
11. © 2019-2024 OPTiM Corp. All rights reserved. 11  事前に依存を剥がせるだけ剥がしたのがよかった ◼ 基本的な移行はコンポーネントに集中でき、ライブラリ依存が影響する箇所はちょっと待つなど区切りがつけやすかった  構成変更により機能の追加削除/バグの発見がしやすくなった ◼ Package By Featureの良いところである機能単位のディレクトリ構成になり移行漏れなどの実装が楽になった ◼ それぞれを辿りつつ、他の引用場所での差異が無いように修正をしたりテストをしないといけなかったのが機能を見るだけで良くなりバ グの発見、修正がしやすくなった  Nuxt Devtoolsが利用できるようになった ◼ マイグレーションでのパス情報確認やAuto Importのファイル名確認などに役立った  AI活用により少数精鋭でも回しやすかった ◼ 単純な置き換えはほとんど投げるだけで完了する！！ ◼ ドキュメント検索や仕様変更の検索が直感的にでき検索作業時間を大幅に削ることができた ◼ 社内ChatBotがあるおかげでgit diffなどの差分レビューも一部任せることができた Nuxt Devtools: https://devtools.nuxt.com/ defineModel: https://ja.vuejs.org/guide/components/v-model 良かった点
12. © 2019-2024 OPTiM Corp. All rights reserved. 12  Nuxt本体またはunjs双方が更新に追従できず最新リリースバージョンでバグがあったりする ◼ 例) Nuxt最新リリースバージョンにTypeScript 5.5.xが必要だが内包されているvite-plugin-checkerがTypeScript 5.5.xに未対応 ⚫ 一時的にpnpm overridesでvite-plugin-checkerの最新のバージョンを上書くことで対処。 ⚫ 後にNuxt 3.13.3へのアップデートによりvite-plugin-checkerの最新が適用された  Vue3のエラー内容が一部つらい ◼ Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core .(要約すると「おそらくVueの内部エラーです」とだけ出る) ⚫ Atomsで末端になっていたコンポーネントで@update:model-valueが前の記法である@inputになっていたのが原因だった  想定はしていたもののVuetify2->3がつらい ◼ V-data-tableが3分身している(v-data-table, v-data-table-server, v-data-table-virtual) ◼ TabやStepperがタブと要素で分断され、内部でループをする構造になっていた ◼ V-list周辺のコンポーネントが消えたり増えたりしている  ESLint FlatConfigに対応していないルールの整備 ◼ eslint-plugin-vuetify がcompatでもwarningが出てしまいissueにある例を元にパッチを当てるなどをして動くようにした  VeeValidate v4への移行が公式も諦めてる ◼ 公式が「APIが完全に異なるため直接アップグレードするルートはなく、Vue 2もサポートされていません」と言っている ◼ ドキュメントに関しても今後載せる予定はあるとは言っているものの「適切と思われる方法でドキュメントに自由に貢献してください」 と記述あり 辛かった点
13. © 2019-2024 OPTiM Corp. All rights reserved. 13  Nuxt Bridgeの導入の打診 ◼ Bridge: trueが難しくても各フラグで一部だけでも段階的に移行できるので導入オススメです！  Nuxt2の依存を剥がす対応 ◼ 依存しきった処理をしてしまっているとBridgeなど他ライブラリも含め移行が難しくなりがちな箇所が多いので抽象化する、事前に 置き換えるのは大事だと感じました！  周辺ライブラリが現状まだ未発達そう ◼ 認証ライブラリなどNuxt/~系のライブラリ含めまだ未対応のものが多い印象。。  事前のロードマップ引きの大事さ ◼ 移行も含め新しいものを触れる上で慣れることが大事。まずは移行しやすいもので慣れてから重めのものをやるという段階的なロー ドマップが大きなバグを産まずに済んだ成功体験でした。  移行の課題を解消する ◼ Vuetifyの要因もありそうですが、Atomic Designのmolecules、organismsなどの子コンポーネント依存がある中の移行がかなり 大変で移行のボトルネックになっていたので思い切ってPackage by featureすることでスムーズに移行しやすくなった。 ◼ 個人的にVue特有だと感じている記法ズレ問題であるOptions記法、Composition API記法、Script Setupに関してはScript Setup に統一化作業もし保守コストを下げられた。  AIツールの活躍 ◼ 今回の移行に関してはAIツールの功績がすごく大きかった。単純作業を置き換えたりググラビティ（Googlability)の圧倒的改善で移 行コストも下げることができた。 まとめ
14. © 2019-2024 OPTiM Corp. All rights reserved. 14 ご清聴ありがとうございました！
15. © 2019-2024 OPTiM Corp. All rights reserved. 15