Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Takanori Sugita

October 01, 2022
Tweet

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 一休.comとヤフートラベル
    - 両サイトを一休が運営
    - 2021年9月よりシステム
    統合
    - 同じコードベースを見るよ
    うに
    - 環境変数によって内部ロジッ
    ク、UIをスイッチ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. - Composition APIや強い型推論による設計の再考の準備
    - 状態管理も選択肢が増える。( useState, Pinia など)
    Nuxt3 にすることで...
    ① ファイル数、サイズ肥大化などによりビルド時間の鈍化
    ② 設計指針も曖昧で定まったものが存在せず、カオス化
    - 開発ビルドの高速化(Vite)

    View full-size slide

  11. - vue-apollo v4がalpha版
    - いつbetaになるのか不明
    上げるにあたってブロッカーとなること
    - Stroybook Moduleが
    Nuxt3未対応
    - IE未対応 IEサポート終了!
    - Nuxt3のリリースが未定
    - リリースがどんどん伸びている。
    Summer(9/23) → Autumn に 😇
    待ちつつ、検証と移
    行を進める!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. その他
    - zero configでTypeScript対応
    - 新サーバーエンジン Nitro の導入
    - 最大75倍の軽量化 / 高速化
    - レンダリングの選択肢増加 ( ISG 搭載予定)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. ① 前段階: Nuxt Bridge を使用せず進める
    - Nuxt2 の状態で Nuxt3 の機能を使える前方互換性をもつバージョン
    ② 移行の流れ: Nuxt2 の段階で、できるだけ 
    Nuxt3との差分をなくして移行
    - Vue3, Nuxt3に向けて、現行で書き換え可能な箇所の調査と修正
    - 周辺ライブラリのアップデート
    ③ 移行戦略: sandboxでの検証
    - ボイラープレート リポジトリ での検証
    - 同一リポジトリでのsandboxブランチによる検証

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. ここが一番不安
    - 二度手間のモジュール対応の恐れ
    - 対応工数も読みづらい
    Nuxt Bridge
    👎
    - Bridge対応していないnuxt moduleが多い
    - Bridgeを経由するので2度、動作テストを行う必要
    - Nuxt2 → Nuxt Bridge → Nuxt3

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. 2. Nuxt2 の段階でできることを分類 🤔
    ① Vue3, Nuxt3 の破壊的変更部分(Vue2 / Nuxt2 APIで書き換え可能)
    ② 未対応モジュールからの脱却
    ③ Nuxt3に対応できるバージョンまでアップデート
    ④ 破壊的変更に関わる、いらないコードの断捨離
    👈 重要

    View full-size slide

  30. 3. Nuxt3 移行ブランチでしかできないことを定義 🤔
    ① Vue3, Nuxt3 の破壊的変更部分(Vue2 / Nuxt2 APIで書き換え不可能)
    - 相当に事前タスクに回せ
    る!
    - 移行リスク低下
    全タスク (灰色は事前対応タスク )

    View full-size slide

  31. Nuxt3移行ブランチ
    施策A
    施策B
    master
    事前準備
    事前準備
    4. 事前タスクを実施
    - 事前タスクは完
    了済み
    (2022/09現在)

    View full-size slide

  32. 5. Nuxt3移行ブランチ作成
    - Vue3の破壊的変更 → 移行ガイド + vue3用のlintの警告に従って修正
    - Nuxt3の破壊的変更 → 移行ガイドに従って修正
    - 都度、masterを取り込む
    Nuxt3移行ブランチ
    施策A
    施策B
    master
    事前準備
    事前準備
    ※ まだ対応前です 󰢛

    View full-size slide

  33. 6. Nuxt3移行ブランチ ~ リリース
    リリース準備が整ったら以下の手順で公開を行う
    - ① 10%のユーザーに公開
    - ② 問題がなければ100%のユーザーに公開
    ※ まだ対応前です 󰢛

    View full-size slide

  34. ③ sandboxでの検証

    View full-size slide

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

    View full-size slide

  36. ph2 プロダクションリポジトリでsandboxブラン
    チを切って検証
    - プロダクションコードが Nuxt3 でビルドし動作できるような、最
    低限の設定を sandbox ブランチを切って検証
    - Nuxt config (vite, router, loader, runtimeConfig …)
    - Nuxt プラグイン
    - Nuxt モジュール
    - Nuxt ミドルウェア
    移行ブランチ 作成後はその検証コードを適用するだけに!

    View full-size slide

  37. Tips
    リスク軽減、移行時間の最小化のため...
    ① 不確定要素の早めの排除(今回でいうと Nuxt Bridge)
    ② 移行前に「できること」「できないこと」の切り分け
    - 事前に書き換え可能な破壊的変更
    - 周辺ライブラリアップデート
    - Sandboxでの事前検証
    ③ いらない実装はそういうタイミングで断捨離する

    View full-size slide