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.2k
Vue2 → Vue3移行・リファクタリング戦略
2022年2月9日開催したMeetUP「BrainPad エンジニアトーク #1」資料 (Rtoaster reach+ 開発エンジニア資料)
BrainPad
March 10, 2022
Tweet
Share
More Decks by BrainPad
See All by BrainPad
白金鉱業Meetup Vol.17_あるデータサイエンティストのデータマネジメントとの向き合い方
brainpadpr
7
950
「ビジネス現場でのデータ分析者」 東京大学 GCI 2024 Winter
brainpadpr
2
1.5k
白金鉱業Meetup Vol.16_数理最適化案件のはじめかた・すすめかた
brainpadpr
3
1.4k
白金鉱業Meetup Vol.16_【初学者向け発表】 数理最適化のはじめの一歩 〜身近な問題で学ぶ最適化の面白さ〜
brainpadpr
10
2k
BrainPad_AC_202411
brainpadpr
2
9.5k
BrainPad_Company_20241105
brainpadpr
1
240k
ブレインパッドXaaSユニット紹介資料(キャリア採用向けweb公開版 )
brainpadpr
0
15k
エンジニア応募者様向け_会社説明資料_202410
brainpadpr
0
1.9k
Pythonを活用したLLMによる構造的データ生成の手法と実践
brainpadpr
6
990
Other Decks in Programming
See All in Programming
CloudNativePGを布教したい
nnaka2992
0
100
SwiftUI Viewの責務分離
elmetal
PRO
2
260
Software Architecture
hschwentner
6
2.1k
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
180
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
210
ML.NETで始める機械学習
ymd65536
0
210
Unity Android XR入門
sakutama_11
0
170
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
230
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
280
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
220
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
6
2.1k
Formの複雑さに立ち向かう
bmthd
1
900
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
91
5.9k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Making Projects Easy
brettharned
116
6k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
GraphQLとの向き合い方2022年版
quramy
44
13k
Writing Fast Ruby
sferik
628
61k
Practical Orchestrator
shlominoach
186
10k
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+のリファクタリング内容・計画について お話させていただきました •
現在は、フロントエンドのベース部分を絶賛実装中です • 引き続き、開発生産性向上のためリファクタリングを進 めていきたいと思います