Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

4. 移行プロセスと戦略

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

① Nuxt Bridge を使用せず進める

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

③ sandboxでの検証

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

まとめ

Slide 38

Slide 38 text

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