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
580
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
26
19k
DTD_TerraformによるLLMチャットボット用Google Cloudインフラ構築
brainpadpr
0
120
DTD_AWSでGPUを利用するML処理の実行環境の選び方
brainpadpr
0
83
白金鉱業Meetup_Vol.20 効果検証ことはじめ / Introduction to Impact Evaluation
brainpadpr
1
1.2k
DTD_アジャイル開発組織立ち上げのためのモブプログラミング
brainpadpr
0
130
DTD_生成AIに負けないために新卒一年目は_品質_にオールインしました
brainpadpr
0
310
【OptimizationNight】数理最適化のラストワンマイルとしてのUIUX
brainpadpr
2
840
【新卒研修資料】数理最適化 / Mathematical Optimization
brainpadpr
30
16k
Other Decks in Programming
See All in Programming
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
410
CSC305 Lecture 10
javiergs
PRO
0
220
CSC509 Lecture 07
javiergs
PRO
0
240
contribution to astral-sh/uv
shunsock
0
460
Devoxx BE - Local Development in the AI Era
kdubois
0
130
Catch Up: Go Style Guide Update
andpad
0
240
Webサーバーサイド言語としてのRustについて
kouyuume
1
4.2k
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
150
Leading Effective Engineering Teams in the AI Era
addyosmani
7
570
Introduce Hono CLI
yusukebe
6
3k
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
4
150
品質ワークショップをやってみた
nealle
0
610
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1371
200k
Statistics for Hackers
jakevdp
799
220k
Gamification - CAS2011
davidbonilla
81
5.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Designing Experiences People Love
moore
142
24k
We Have a Design System, Now What?
morganepeng
53
7.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Balancing Empowerment & Direction
lara
5
700
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
A better future with KSS
kneath
239
18k
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+のリファクタリング内容・計画について お話させていただきました •
現在は、フロントエンドのベース部分を絶賛実装中です • 引き続き、開発生産性向上のためリファクタリングを進 めていきたいと思います