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.1k
一休. com/Yahoo!トラベルのNuxt3移行における開発プロセス
Takanori Sugita
October 01, 2022
Tweet
Share
Other Decks in Technology
See All in Technology
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
570
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
170
AWSコンテナ本出版から3年経った今、もし改めて執筆し直すなら / If I revise our container book
iselegant
15
3.9k
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.6k
とあるユーザー企業におけるリスクベースで考えるセキュリティ業務のお話し
4su_para
3
320
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
9
120k
AIを駆使したゲーム開発戦略: 新設AI組織の取り組み / sge-ai-strategy
cyberagentdevelopers
PRO
1
130
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
410
Autify Company Deck
autifyhq
1
39k
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
100
サイバーエージェントにおける生成AIのリスキリング施策の取り組み / cyber-ai-reskilling
cyberagentdevelopers
PRO
2
180
使えそうで使われないCloudHSM
maikamibayashi
0
160
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
222
8.9k
How GitHub (no longer) Works
holman
311
140k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Building Adaptive Systems
keathley
38
2.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Side Projects
sachag
452
42k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
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での事前検証 ③ いらない実装はそういうタイミングで断捨離する