Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
一休. com/Yahoo!トラベルのNuxt3移行における開発プロセス
Search
Takanori Sugita
October 01, 2022
Technology
4
6.2k
一休. com/Yahoo!トラベルのNuxt3移行における開発プロセス
Takanori Sugita
October 01, 2022
Tweet
Share
Other Decks in Technology
See All in Technology
どっちの API SHOW?SharePoint 開発における SharePoint REST API Microsoft Graph API の違い / Which API show? Differences between Microsoft Graph API and SharePoint REST API
karamem0
0
110
ルートユーザーの活用と管理を徹底的に深掘る
yuobayashi
6
720
Compose MultiplatformにおけるiOSネイティブ実装のベストプラクティス
enomotok
1
210
お問い合わせ対応の改善取り組みとその進め方
masartz
1
370
アプリケーション固有の「ロジックの脆弱性」を防ぐ開発者のためのセキュリティ観点
flatt_security
28
10k
初めてのPostgreSQLメジャーバージョンアップ
kkato1
0
410
一人QA時代が終わり、 QAチームが立ち上がった話
ma_cho29
0
290
ISUCONにPHPで挑み続けてできるようになっ(てき)たこと / phperkaigi2025
blue_goheimochi
0
140
PostgreSQL Unconference #52 pg_tde
nori_shinoda
1
200
RAGの基礎から実践運用まで:AWS BedrockとLangfuseで実現する構築・監視・評価
sonoda_mj
0
440
モジュラーモノリスでスケーラブルなシステムを作る - BASE のリアーキテクチャのいま
panda_program
7
2k
Tirez profit de Messenger pour améliorer votre architecture
tucksaun
1
140
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
28
1.6k
Facilitating Awesome Meetings
lara
53
6.3k
Music & Morning Musume
bryan
46
6.4k
Building an army of robots
kneath
304
45k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
30
1.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
How to Think Like a Performance Engineer
csswizardry
22
1.5k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.7k
Navigating Team Friction
lara
184
15k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
For a Future-Friendly Web
brad_frost
176
9.6k
Transcript
一休.com / Yahoo!トラベル の Nuxt3 移行における開発プロセス
杉田 隆紀 ヤフーから去年出向 趣味 おえかき / 自然・散歩・アウトドア 主に一休・ヤフー フロントエンド周り
今日話すこと 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 Bridge Nuxt2の状態でNuxt3の機能を使える前方互換性をもつNuxtのバージョン
Nuxt Bridge 👍 - 徐々に移行できる - Nuxt3リリース時に マージするコード量が 大幅に減る
👎 - Bridge対応していないnuxt moduleが多い - Bridgeを経由するので2度、動作テストを行う必要 - Nuxt2 → Nuxt
Bridge → Nuxt3 Nuxt Bridge
ここが一番不安 - 二度手間のモジュール対応の恐れ - 対応工数も読みづらい Nuxt Bridge 👎 - Bridge対応していないnuxt
moduleが多い - Bridgeを経由するので2度、動作テストを行う必要 - Nuxt2 → Nuxt Bridge → Nuxt3
v2 → Bridge → v3 一気に v2 → v3 !
移行の確実性を求め、Nuxt Bridgeを使わずに直 接 Nuxt3 への移行を選択 Nuxt Bridge VS Nuxt3 - モジュール対応の不確定 要素がある - 最悪開発が止まったりリ リースできなくなる可能性 あり - 移行ブランチの存続期間 は長いが、確実に移行は できる
② Nuxt2 の段階で、 できるだけ Nuxt3 との 差分をなくす
移行ブランチ戦略 - 可能な限りビッグバンリリースにならないよう、Nuxt2ででき る事前準備を進める Nuxt3移行ブランチ 施策A 施策B master 事前準備 事前準備
- 最低限のコストで移行する
対応タイミングでタスクを切り分け
1. やらないことを定義 - Composition API などに より良い書き方が出来る が、既存の動くものは書き 換えない アップデート完了後に設
計見直し
2. Nuxt2 の段階でできることを分類 🤔 ① Vue3, Nuxt3 の破壊的変更部分(Vue2 / Nuxt2
APIで書き換え可能) ② 未対応モジュールからの脱却 ③ Nuxt3に対応できるバージョンまでアップデート ④ 破壊的変更に関わる、いらないコードの断捨離 👈 重要
3. Nuxt3 移行ブランチでしかできないことを定義 🤔 ① Vue3, Nuxt3 の破壊的変更部分(Vue2 / Nuxt2
APIで書き換え不可能) - 相当に事前タスクに回せ る! - 移行リスク低下 全タスク (灰色は事前対応タスク )
Nuxt3移行ブランチ 施策A 施策B master 事前準備 事前準備 4. 事前タスクを実施 - 事前タスクは完
了済み (2022/09現在)
5. Nuxt3移行ブランチ作成 - Vue3の破壊的変更 → 移行ガイド + vue3用のlintの警告に従って修正 - Nuxt3の破壊的変更
→ 移行ガイドに従って修正 - 都度、masterを取り込む Nuxt3移行ブランチ 施策A 施策B master 事前準備 事前準備 ※ まだ対応前です
6. Nuxt3移行ブランチ ~ リリース リリース準備が整ったら以下の手順で公開を行う - ① 10%のユーザーに公開 - ②
問題がなければ100%のユーザーに公開 ※ まだ対応前です
③ sandboxでの検証
ph1 ボイラープレートレベルでの検証 ① 各検証用にNuxt3サンプルリポジトリを作成 ② プロダクションコードに依存しないため、 問題の 切り分けが容易
ph2 プロダクションリポジトリでsandboxブラン チを切って検証 - プロダクションコードが Nuxt3 でビルドし動作できるような、最 低限の設定を sandbox ブランチを切って検証
- Nuxt config (vite, router, loader, runtimeConfig …) - Nuxt プラグイン - Nuxt モジュール - Nuxt ミドルウェア 移行ブランチ 作成後はその検証コードを適用するだけに!
まとめ
Tips リスク軽減、移行時間の最小化のため... ① 不確定要素の早めの排除(今回でいうと Nuxt Bridge) ② 移行前に「できること」「できないこと」の切り分け - 事前に書き換え可能な破壊的変更
- 周辺ライブラリアップデート - Sandboxでの事前検証 ③ いらない実装はそういうタイミングで断捨離する