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
Vue2 → Vue3移行・リファクタリング戦略
Search
BrainPad
March 10, 2022
Programming
0
1.3k
Vue2 → Vue3移行・リファクタリング戦略
2022年2月9日開催したMeetUP「BrainPad エンジニアトーク #1」資料 (Rtoaster reach+ 開発エンジニア資料)
BrainPad
March 10, 2022
Tweet
Share
More Decks by BrainPad
See All by BrainPad
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
520
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
25
18k
DTD_TerraformによるLLMチャットボット用Google Cloudインフラ構築
brainpadpr
0
100
DTD_AWSでGPUを利用するML処理の実行環境の選び方
brainpadpr
0
69
白金鉱業Meetup_Vol.20 効果検証ことはじめ / Introduction to Impact Evaluation
brainpadpr
1
1.1k
DTD_アジャイル開発組織立ち上げのためのモブプログラミング
brainpadpr
0
130
DTD_生成AIに負けないために新卒一年目は_品質_にオールインしました
brainpadpr
0
290
【OptimizationNight】数理最適化のラストワンマイルとしてのUIUX
brainpadpr
2
810
【新卒研修資料】数理最適化 / Mathematical Optimization
brainpadpr
30
16k
Other Decks in Programming
See All in Programming
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
850
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
160
Le côté obscur des IA génératives
pascallemerrer
0
150
CSC509 Lecture 06
javiergs
PRO
0
260
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
130
Devoxx BE - Local Development in the AI Era
kdubois
0
130
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.3k
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
410
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
170
CSC305 Lecture 06
javiergs
PRO
0
230
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
Featured
See All Featured
Embracing the Ebb and Flow
colly
88
4.8k
Agile that works and the tools we love
rasmusluckow
331
21k
Being A Developer After 40
akosma
91
590k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Become a Pro
speakerdeck
PRO
29
5.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
20
1.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Designing for Performance
lara
610
69k
Transcript
株式会社ブレインパッド 荒井 悠 2022年2月9日 Vue2 → Vue3移行・リファクタリング戦略
©2022 BrainPad Inc. -2- 自己紹介 名前 • 荒井 悠
所属 • 株式会社ブレインパッド プロダクトビジネス本部 開発部 趣味 • ウイスキー • ゲーム(マリオカート8DX、スプラトゥーン2等)
©2022 BrainPad Inc. -3- 話すこと • Rtoaster reach+において、フロントエンド、バックエンド のリファクタリングを計画して います
• 本日は、フロントエンドのリファクタリング 内容、計画についてご紹介したいと思います
©2022 BrainPad Inc. -4- アジェンダ • きっかけ • 何をリファクタリングするのか •
なぜリファクタリングするのか • どうやってリファクタリングするのか • いつリファクタリングするのか • まとめ
©2022 BrainPad Inc. -5- きっかけ
©2022 BrainPad Inc. -6- 背景 • Rtoaster reach+は、最初スピード重視で試作に近い形 で開発された →拡張性や可読性はあまり考慮されていなかった
• 本格的に機能拡張を行う段階になり、さまざまな 課題が発覚した • 課題を解決せずに機能拡張を行っていくと開発の 生産性が低下していき、少しの改修でも膨大な 工数がかかる状態になることが予想されるため、 リファクタリングを行うことに決定した
©2022 BrainPad Inc. -7- 何をリファクタリングするのか
©2022 BrainPad Inc. -8- Rtoaster reach+とは • LINE配信やアプリプッシュ通知を通じて、 顧客とパーソナルにつながり続けるマルチチャネルメッ セージングサービス
• 顧客に寄り添った”最適なチャネル“で、”最適な コンテンツ”を、”最適なタイミング”で、簡単に 配信する機能を保有
©2022 BrainPad Inc. -9- Rtoaster reach+とは • GUIでプレビューを見ながら配信内容を設定
©2022 BrainPad Inc. -10- 技術スタック カテゴリー 技術スタック インフラ • GCP
◦ App Engine ◦ BigQuery ◦ Firestore ◦ Dataflow ◦ Pub/Sub ◦ ほか 言語、ライブラリ • フロントエンド ◦ JavaScript ◦ Vue2 ◦ Vuex • バックエンド ◦ Python3 ◦ Flask 管理画面をGAEで運 用しています
©2022 BrainPad Inc. -11- フロントエンドの現状 • Vue2+Vuexを利用 • mixinを利用 •
TypeScript未導入 • Atomic Designを仮導入済み
©2022 BrainPad Inc. -12- なぜリファクタリングするのか
©2022 BrainPad Inc. -13- フロントエンドの課題 • 下記要因による保守性/可読性の低下 ◦ モーダルの独自実装 ◦
Vuexの不適切な使い方 ◦ mixinの不適切な使い方 ◦ 静的な型付けがない ◦ Atomic Designを曖昧なルールで導入したため一 貫性がない (詳細は後ほど説明させていただきます)
©2022 BrainPad Inc. -14- どうやってリファクタリングするのか
©2022 BrainPad Inc. -15- 課題の解決方法 • モーダルの独自実装 👉Vue2からVue3へ移行 👉Vue3のTeleportに置き換える •
Vuexの不適切な使い方 👉原則Vuexを使用しないようにする • mixinの不適切な使い方 👉原則mixinを使用しないようにする • 静的な型付けがない 👉TypeScriptを導入する • Atomic Designを曖昧なルールで導入したため 一貫性がない 👉ルールを設けて再設計
©2022 BrainPad Inc. -16- Vue2からVue3へ移行 移行理由 • 現在はVue2を使用しているが、今後はVue3が主流とな りいずれ移行が必要になると考えられるため、このタイ ミングでVue3に移行した方が無駄がないと判断
• Composition APIを利用できる ◦ 分散していた処理を適切にまとめて見通しを 良くできる • Teleportを利用できる ◦ 後述のモーダル改善に利用 • TypeScriptと相性が良い
©2022 BrainPad Inc. -17- モーダルの独自実装をVue3のTeleportに置き換える リファクタリング前 • モーダル表示用コンポーネントを定義 ◦ Vuexで管理されるstateにmodalitemsを定義
◦ modalitemsにコンポーネントがpushされたらモーダ ルを表示、popされたら非表示になる 仕組みになっている • モーダルを表示したい各コンポーネントにて、 表示・非表示したいタイミングでpush/popを行う
©2022 BrainPad Inc. -18- モーダルの独自実装をVue3のTeleportに置き換える リファクタリング後 • Vue3のTeleportを利用する 参考:https://v3.ja.vuejs.org/guide/teleport.html#vue-コンポーネントと使う
©2022 BrainPad Inc. -19- 原則Vuexを使用しないようにする • 現状、Vuexをただのグローバル変数的に利用している ◦ 本来複数の兄弟コンポーネント間で状態を管理す る際に煩雑な値のやり取りを簡単にできる
メリットがあるが、特にルールが決まって いないため何でもかんでも管理してしまい無駄 が多く、可読性が下がっている • reach+管理画面の機能規模の小ささを考えると、Vuex を使用せずシンプルなVueでSFCの恩恵を 最大化した方が効率が良いと判断した
©2022 BrainPad Inc. -20- mixinの不適切な利用箇所を改める • 現状、デザインパターンのTemplate Methodパターンの イメージで、メソッドをオーバーライドのような形で実装 する前提となっている箇所がある
◦ 挙動が読み解きにくく、実際、不要なAPI呼び出し が複数回実行されたりしていた • 内容に応じて、ComposableまたはProvide/Inject等を 使って共通化する
©2022 BrainPad Inc. -21- TypeScriptの導入 • 現状、型付けがないことによる可読性の低下や バグのリスクといった課題が挙がっている • Vue3への移行に合わせてTypeScriptを導入し、
堅牢性を上げたいと考えている
©2022 BrainPad Inc. -22- Atomic Designをベースにしたコンポーネントの再設計 • 現状は、もともとAtomic Designベースではなかったコン ポーネントを無理やりAtomic
Designに振り分けた状態 のため、一貫性・合理性が低い状態になっている • atoms、molecules、organisms、pages、layoutsの依存関 係や役割を明文化し、 コンポーネントを再構築する ◦ 例えば、特定の文脈に依存するコンテンツはpages やorganismsに実装し、atomsとmoleculesは文脈に 依存しない部品として実装するルールとした
©2022 BrainPad Inc. -23- いつリファクタリングするのか
©2022 BrainPad Inc. -24- リファクタリングの進め方 • ビジネス側からの要望もあり、プロダクトの新規機能開 発はできるだけ止めたくない • しかし、Vue2
→ Vue3 移行など、新規機能開発とリファ クタリングを並行で進めるとマージ作業が大きな負担と なる • そこで、フロントエンドの開発の無い期間を作り、集中し てリファクタリングを行い、完了させることにした ◦ バックエンド側の新規機能開発はリファクタリング 中も行う
©2022 BrainPad Inc. -25- リファクタリング計画の共有 • 新規機能開発の人的リソースをリファクタリング側に割 く必要があるので、事前にPdM(プロダクトマネー ジャー)や部長陣にリファクタリングの必要性や進め方 を共有し、承認をもらった
◦ ↑開発の優先度決定は、開発チームが主体となっ て関連する部署・人の承認を得ながら決定する体 制になっている
©2022 BrainPad Inc. -26- まとめ
©2022 BrainPad Inc. -27- まとめ • Rtoaster reach+のリファクタリング内容・計画について お話させていただきました •
現在は、フロントエンドのベース部分を絶賛実装中です • 引き続き、開発生産性向上のためリファクタリングを進 めていきたいと思います