一休.com / Yahoo!トラベルの Nuxt3 移行における開発プロセス
View Slide
杉田 隆紀ヤフーから去年出向趣味おえかき / 自然・散歩・アウトドア主に一休・ヤフー フロントエンド周り
今日話すこと1. 一休・ヤフートラベルとNuxtについて2. なぜアップデートするのか3. v2とv3のざっくりとした変更点4. 移行プロセスと戦略
みんなが知りたいかなと思ったこと1. 一休・ヤフートラベルとNuxtについて2. なぜアップデートするのか3. v2とv3のざっくりとした変更点4. 移行プロセスと戦略
1. 一休・ヤフートラベルとNuxtについて
一休.comとヤフートラベル- 両サイトを一休が運営- 2021年9月よりシステム統合- 同じコードベースを見るように- 環境変数によって内部ロジック、UIをスイッチ
- レガシーコードをNuxtに移行中- トップページ 〜 施設ページ の導線まではNuxtに置き換え完了済みNuxt への移行プロジェクト
2. なぜアップデートするのか
フロントエンドの課題フロントエンドの整備 ＜ 施策① ファイル数、サイズ肥大化などによりビルド時間の鈍化② 設計指針も曖昧で定まったものが存在せず、カオス化- 次のリニューアルするページは、良い状態管理や設計が求められる 予約入力画面がターゲット...
- Composition APIや強い型推論による設計の再考の準備- 状態管理も選択肢が増える。( useState, Pinia など)Nuxt3 にすることで...① ファイル数、サイズ肥大化などによりビルド時間の鈍化② 設計指針も曖昧で定まったものが存在せず、カオス化- 開発ビルドの高速化（Vite）
- vue-apollo v4がalpha版- いつbetaになるのか不明上げるにあたってブロッカーとなること- Stroybook ModuleがNuxt3未対応- IE未対応 IEサポート終了！- Nuxt3のリリースが未定- リリースがどんどん伸びている。Summer(9/23) → Autumn に 😇待ちつつ、検証と移行を進める！
3. Nuxt3でのざっくり変更点
Vue3 化- Composition API を 利用可能- Volar(vue-tsc)と組み合わせてテンプレート内で型が 効くように
開発ビルドの爆速化Vite依存解決の最低限のbundleのみ (esbuild)Webpack4アプリ起動前に全走査してソースを出力
その他- zero configでTypeScript対応- 新サーバーエンジン Nitro の導入- 最大75倍の軽量化 / 高速化- レンダリングの選択肢増加 ( ISG 搭載予定)
4. 移行プロセスと戦略
その前に、前提としての移行指針 💪移行リリース時のリスクを少しでも抑えるため...最低限の差分、時間で移行をさせる！
① 前段階: Nuxt Bridge を使用せず進める- Nuxt2 の状態で Nuxt3 の機能を使える前方互換性をもつバージョン② 移行の流れ: Nuxt2 の段階で、できるだけ Nuxt3との差分をなくして移行- Vue3, Nuxt3に向けて、現行で書き換え可能な箇所の調査と修正- 周辺ライブラリのアップデート③ 移行戦略: sandboxでの検証- ボイラープレート リポジトリ での検証- 同一リポジトリでのsandboxブランチによる検証
① Nuxt Bridgeを使用せず進める
Nuxt BridgeNuxt2の状態でNuxt3の機能を使える前方互換性をもつNuxtのバージョン
Nuxt Bridge👍- 徐々に移行できる- Nuxt3リリース時にマージするコード量が大幅に減る
👎- Bridge対応していないnuxt moduleが多い- Bridgeを経由するので２度、動作テストを行う必要- Nuxt2 → Nuxt Bridge → Nuxt3Nuxt Bridge
ここが一番不安- 二度手間のモジュール対応の恐れ- 対応工数も読みづらいNuxt Bridge👎- Bridge対応していないnuxt moduleが多い- Bridgeを経由するので２度、動作テストを行う必要- Nuxt2 → Nuxt Bridge → Nuxt3
v2 → Bridge → v3 一気に v2 → v3 !移行の確実性を求め、Nuxt Bridgeを使わずに直接 Nuxt3 への移行を選択Nuxt Bridge VS Nuxt3- モジュール対応の不確定要素がある- 最悪開発が止まったりリリースできなくなる可能性あり- 移行ブランチの存続期間は長いが、確実に移行はできる
② Nuxt2 の段階で、できるだけ Nuxt3 との差分をなくす
移行ブランチ戦略- 可能な限りビッグバンリリースにならないよう、Nuxt2でできる事前準備を進めるNuxt3移行ブランチ施策A施策Bmaster事前準備事前準備- 最低限のコストで移行する
対応タイミングでタスクを切り分け
1. やらないことを定義- Composition API などにより良い書き方が出来るが、既存の動くものは書き換えないアップデート完了後に設計見直し
2. Nuxt2 の段階でできることを分類 🤔① Vue3, Nuxt3 の破壊的変更部分（Vue2 / Nuxt2 APIで書き換え可能）② 未対応モジュールからの脱却③ Nuxt3に対応できるバージョンまでアップデート④ 破壊的変更に関わる、いらないコードの断捨離👈 重要
3. Nuxt3 移行ブランチでしかできないことを定義 🤔① Vue3, Nuxt3 の破壊的変更部分（Vue2 / Nuxt2 APIで書き換え不可能）- 相当に事前タスクに回せる！- 移行リスク低下全タスク (灰色は事前対応タスク )
Nuxt3移行ブランチ施策A施策Bmaster事前準備事前準備4. 事前タスクを実施- 事前タスクは完了済み(2022/09現在)
5. Nuxt3移行ブランチ作成- Vue3の破壊的変更 → 移行ガイド + vue3用のlintの警告に従って修正- Nuxt3の破壊的変更 → 移行ガイドに従って修正- 都度、masterを取り込むNuxt3移行ブランチ施策A施策Bmaster事前準備事前準備※ まだ対応前です
6. Nuxt3移行ブランチ ~ リリースリリース準備が整ったら以下の手順で公開を行う- ① 10%のユーザーに公開- ② 問題がなければ100%のユーザーに公開※ まだ対応前です
③ sandboxでの検証
ph1 ボイラープレートレベルでの検証① 各検証用にNuxt3サンプルリポジトリを作成② プロダクションコードに依存しないため、 問題の切り分けが容易
ph2 プロダクションリポジトリでsandboxブランチを切って検証- プロダクションコードが Nuxt3 でビルドし動作できるような、最低限の設定を sandbox ブランチを切って検証- Nuxt config (vite, router, loader, runtimeConfig …)- Nuxt プラグイン- Nuxt モジュール- Nuxt ミドルウェア移行ブランチ 作成後はその検証コードを適用するだけに！
まとめ
Tipsリスク軽減、移行時間の最小化のため...① 不確定要素の早めの排除（今回でいうと Nuxt Bridge）② 移行前に「できること」「できないこと」の切り分け- 事前に書き換え可能な破壊的変更- 周辺ライブラリアップデート- Sandboxでの事前検証③ いらない実装はそういうタイミングで断捨離する
miyake
junkifurukawa
shohata
microcms
skrb
oracle4engineer
inesmontani
hikiroku
x_ttyszk
non97
line_developers
onlinesalon
3n
thoeni
lara
sferik
jponch
scottboms
chrisshort
paulrobertlloyd
quramy
lauravandoore
hursman
keathley