$30 off During Our Annual Pro Sale. View Details »

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

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

Takanori Sugita

October 01, 2022
Tweet

Other Decks in Technology

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を経由するので2度、動作テストを行う必要 - Nuxt2 → Nuxt

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

    moduleが多い - Bridgeを経由するので2度、動作テストを行う必要 - 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での事前検証 ③ いらない実装はそういうタイミングで断捨離する