一休. com/Yahoo!トラベルのNuxt3移行における開発プロセス

Transcript

1. 一休.com / Yahoo!トラベル の Nuxt3 移行における開発プロセス

2. 杉田 隆紀 ヤフーから去年出向 趣味 おえかき / 自然・散歩・アウトドア 主に一休・ヤフー フロントエンド周り

3. 今日話すこと 1. 一休・ヤフートラベルとNuxtについて 2. なぜアップデートするのか 3. v2とv3のざっくりとした変更点 4. 移行プロセスと戦略

4. みんなが知りたいかなと思ったこと 1. 一休・ヤフートラベルとNuxtについて 2. なぜアップデートするのか 3. v2とv3のざっくりとした変更点 4. 移行プロセスと戦略

5. 1. 一休・ヤフートラベルと Nuxtについて

6. 一休.comとヤフートラベル - 両サイトを一休が運営 - 2021年9月よりシステム 統合 - 同じコードベースを見るよ うに -

   環境変数によって内部ロジッ ク、UIをスイッチ

7. - レガシーコードをNuxtに移行中 - トップページ 〜 施設ページ の導線 まではNuxtに置き換え完了済み Nuxt への移行プロジェクト

8. 2. なぜアップデート するのか

9. フロントエンドの課題 フロントエンドの整備 ＜ 施策 ① ファイル数、サイズ肥大化などによりビルド時間の鈍化 ② 設計指針も曖昧で定まったものが存在せず、カオス化 - 次のリニューアルするページは、良い状態管理や設計が求められる　　予約

   入力画面がターゲット...

10. - Composition APIや強い型推論による設計の再考の準備 - 状態管理も選択肢が増える。( useState, Pinia など) Nuxt3 にすることで...

    ① ファイル数、サイズ肥大化などによりビルド時間の鈍化 ② 設計指針も曖昧で定まったものが存在せず、カオス化 - 開発ビルドの高速化（Vite）

11. - vue-apollo v4がalpha版 - いつbetaになるのか不明 上げるにあたってブロッカーとなること - Stroybook Moduleが Nuxt3未対応

    - IE未対応 IEサポート終了！ - Nuxt3のリリースが未定 - リリースがどんどん伸びている。 Summer(9/23) → Autumn に 😇 待ちつつ、検証と移 行を進める！

12. 3. Nuxt3での ざっくり変更点

13. Vue3 化 - Composition API を 利用可能 - Volar(vue-tsc)と組み合わせてテンプレート内で型が　　　効くよ うに

14. 開発ビルドの爆速化 Vite 依存解決の最低限の bundleのみ (esbuild) Webpack4 アプリ起動前に全走査して ソースを出力

15. その他 - zero configでTypeScript対応 - 新サーバーエンジン Nitro の導入 - 最大75倍の軽量化

    / 高速化 - レンダリングの選択肢増加 ( ISG 搭載予定)

16. 4. 移行プロセスと戦略

17. その前に、 前提としての移行指針 💪 移行リリース時のリスクを少しでも抑えるため ... 最低限の差分、時間で移行をさせる！

18. ① 前段階: Nuxt Bridge を使用せず進める - Nuxt2 の状態で Nuxt3 の機能を使える前方互換性をもつバージョン

    ② 移行の流れ: Nuxt2 の段階で、できるだけ　 Nuxt3との差分をなくして移行 - Vue3, Nuxt3に向けて、現行で書き換え可能な箇所の調査と修正 - 周辺ライブラリのアップデート ③ 移行戦略: sandboxでの検証 - ボイラープレート リポジトリ での検証 - 同一リポジトリでのsandboxブランチによる検証

19. ① Nuxt Bridge を使用せず進める

20. Nuxt Bridge Nuxt2の状態でNuxt3の機能を使える前方互換性をもつNuxtのバージョン

21. Nuxt Bridge 👍 - 徐々に移行できる - Nuxt3リリース時に マージするコード量が 大幅に減る

22. 👎 - Bridge対応していないnuxt moduleが多い - Bridgeを経由するので２度、動作テストを行う必要 - Nuxt2 → Nuxt

    Bridge → Nuxt3 Nuxt Bridge

23. ここが一番不安 - 二度手間のモジュール対応の恐れ - 対応工数も読みづらい Nuxt Bridge 👎 - Bridge対応していないnuxt

    moduleが多い - Bridgeを経由するので２度、動作テストを行う必要 - Nuxt2 → Nuxt Bridge → Nuxt3

24. v2 → Bridge → v3 一気に v2 → v3 !

    移行の確実性を求め、Nuxt Bridgeを使わずに直 接 Nuxt3 への移行を選択 Nuxt Bridge VS Nuxt3 - モジュール対応の不確定 要素がある - 最悪開発が止まったりリ リースできなくなる可能性 あり - 移行ブランチの存続期間 は長いが、確実に移行は できる

25. ② Nuxt2 の段階で、 できるだけ Nuxt3 との 差分をなくす

26. 移行ブランチ戦略 - 可能な限りビッグバンリリースにならないよう、Nuxt2ででき る事前準備を進める Nuxt3移行ブランチ 施策A 施策B master 事前準備 事前準備

    - 最低限のコストで移行する

27. 対応タイミングでタスクを切り分け

28. 1. やらないことを定義 - Composition API などに より良い書き方が出来る が、既存の動くものは書き 換えない アップデート完了後に設

    計見直し

29. 2. Nuxt2 の段階でできることを分類 🤔 ① Vue3, Nuxt3 の破壊的変更部分（Vue2 / Nuxt2

    APIで書き換え可能） ② 未対応モジュールからの脱却 ③ Nuxt3に対応できるバージョンまでアップデート ④ 破壊的変更に関わる、いらないコードの断捨離 👈 重要

30. 3. Nuxt3 移行ブランチでしかできないことを定義 🤔 ① Vue3, Nuxt3 の破壊的変更部分（Vue2 / Nuxt2

    APIで書き換え不可能） - 相当に事前タスクに回せ る！ - 移行リスク低下 全タスク (灰色は事前対応タスク )

31. Nuxt3移行ブランチ 施策A 施策B master 事前準備 事前準備 4. 事前タスクを実施 - 事前タスクは完

    了済み (2022/09現在)

32. 5. Nuxt3移行ブランチ作成 - Vue3の破壊的変更 → 移行ガイド + vue3用のlintの警告に従って修正 - Nuxt3の破壊的変更

    → 移行ガイドに従って修正 - 都度、masterを取り込む Nuxt3移行ブランチ 施策A 施策B master 事前準備 事前準備 ※ まだ対応前です 󰢛

33. 6. Nuxt3移行ブランチ ~ リリース リリース準備が整ったら以下の手順で公開を行う - ① 10%のユーザーに公開 - ②

    問題がなければ100%のユーザーに公開 ※ まだ対応前です 󰢛

34. ③ sandboxでの検証

35. ph1 ボイラープレートレベルでの検証 ① 各検証用にNuxt3サンプルリポジトリを作成 ② プロダクションコードに依存しないため、　　　　問題の 切り分けが容易

36. ph2 プロダクションリポジトリでsandboxブラン チを切って検証 - プロダクションコードが Nuxt3 でビルドし動作できるような、最 低限の設定を sandbox ブランチを切って検証

    - Nuxt config (vite, router, loader, runtimeConfig …) - Nuxt プラグイン - Nuxt モジュール - Nuxt ミドルウェア 移行ブランチ 作成後はその検証コードを適用するだけに！

37. まとめ

38. Tips リスク軽減、移行時間の最小化のため... ① 不確定要素の早めの排除（今回でいうと Nuxt Bridge） ② 移行前に「できること」「できないこと」の切り分け - 事前に書き換え可能な破壊的変更

    - 周辺ライブラリアップデート - Sandboxでの事前検証 ③ いらない実装はそういうタイミングで断捨離する