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
レガシーでウォーターフォールなVue.jsでの大規模開発に捧げるテスト駆動フロントエンド開発の...
Search
Yuji Yamaguchi
July 25, 2019
Programming
13
6.3k
レガシーでウォーターフォールなVue.jsでの大規模開発に捧げるテスト駆動フロントエンド開発の話 / v-tokyo10
大規模ウォーターフォール開発の中で実施している、vue-testing-libraryを利用したテスト駆動開発の紹介です。
Yuji Yamaguchi
July 25, 2019
Tweet
Share
More Decks by Yuji Yamaguchi
See All by Yuji Yamaguchi
メンバーの成長速度にバフをかける1on1ミーティング / 2024-12-06
yug1224
20
11k
強みを伸ばすキャリアデザイン
yug1224
3
440
インターンと盛り上げる全社員参加型Advent Calendarの作り方 / 2024-02-22-QiitaNight
yug1224
1
97
2022ランキング圏外から2023ランキング入りを実現したテックブログ運営について / 2023-07-28-QiitaEngineerFesta
yug1224
0
120
Qiitaいいね数をGASで計測している話 / 2023-07-24-HRBrainFlyHigh
yug1224
1
880
HRBrainの生態系を支えるフロントエンドチームの取り組み / 2023-06-22-AwEngineerMeetup
yug1224
0
61
明日使えるかもしれないGitテクニック / Gunma.web#47
yug1224
0
270
React+TypeScriptで拡張機能が開発できるRaycastのススメ / 20221027_Raycast
yug1224
1
870
DX向上委員会 / 20220922_dxhacklt
yug1224
1
200
Other Decks in Programming
See All in Programming
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
570
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
970
Writing documentation can be fun with plugin system
okuramasafumi
0
120
color-scheme: light dark; を完全に理解する
uhyo
6
440
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
39
15k
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
140
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
150
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
CI改善もDatadogとともに
taumu
0
120
Lottieアニメーションをカスタマイズしてみた
tahia910
0
130
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
930
Featured
See All Featured
Practical Orchestrator
shlominoach
186
10k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
For a Future-Friendly Web
brad_frost
176
9.5k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Unsuck your backbone
ammeep
669
57k
Navigating Team Friction
lara
183
15k
How GitHub (no longer) Works
holman
314
140k
Statistics for Hackers
jakevdp
797
220k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
970
How to train your dragon (web standard)
notwaldorf
91
5.8k
Transcript
レガシーでウォーターフォールな Vue.jsでの大規模開発 に捧げるテスト駆動フロン トエンド開発の話 2019/07/25 Vue.js v-tokyo Meetup #10 Yuji
Yamaguchi
自己紹介 2 ▸ 名前 ▸ ヤマグチ ユウジ ▸ 職種 ▸
フロントエンドエンジニア ▸ 経歴 ▸ 2011年04月 通信系企業 ▸ IoTやWebコンテンツサービスの開発運用 ▸ 2016年01月 ネット広告系企業 ▸ 広告配信管理システムの開発運用 ▸ 2016年10月 株式会社リクルートライフスタイル ▸ 飲食店向け予約台帳システムの開発
3 今日話すこと
飲食店向け予約台帳アプリ:レストランボード 4
None
None
元々は独自フレームワークだった ▸ jQuery製で、2014年末頃にfirst commit ▸ BabelifyでES2015にトランスパイル、 MorphDOMで差分レンダリングを実現 ▸ TemplateにModelを渡すとレンダリングし、
SelectorとFunctionを渡すとバインドするMVVMフレームワーク 7 Reactなどが話題になり始めた頃なので 実は少し影響を受けている
入力値を表示する場合 8
9 完成度は高いが 今後の継続性は
Vue.js導入はまずは足元を整えてから 10 2014/12 2016/10 2017/10 2018/10 2015/4 独自FW誕生 レストランボード 開発開始
脱Browserify 脱Grunt ESLint Jest Prettier Promise Vue.js async / await 案件開発をしながら、 二年かけて小さくリファクタリング
Vue.js導入時に心掛けたこと ▸ 小さく移行する ▸ Drasticに変えない ▸ 画面毎や部品毎、MoleculesやAtomsから導入 ▸ 案件で触る部分だけ、リファクタリングの粒度にとどめる ▸
レガシーコードのロジックは資産、できるだけそのまま使う 11 導入による大きなインシデントはなし!
現状の導入比率 12 45% 55% 62画面中34画面で導入済み
13 単体テストは完璧なのに 手戻りや結合バグが 多くなりがち
手戻りや結合バグを減らすには ▸ コンポーネント単位のテストだけでは、 実際のユースケースを確認できず不十分なことが多い ▸ バグの原因を辿ると要件定義漏れだったということも多く、 そもそもステークホルダーと要件を握りきれていなかったことも ▸ 最終成果物が不明瞭なので、 何を作ればいいのか何を作ってはいけないのかもわからない
14 これから作るものについての 合意形成がかなり重要
15 vue-testing- library
vue-testing-libraryとは ▸ dom-testing-libraryのVue用軽量アダプター ▸ Vueコンポーネントの実装に依存せず、 レンダリングされる実際のDOMノードを使ってテストを行う ▸ OSやブラウザ環境をブラックボックスにし、 実際のユーザー操作をシミュレートするテストを書くことができる 16
コンポーネント同士が結合された状態で より現実に近いテストを実施できる
カウンターアプリで考える 17
結合テストファースト 18 成果物イメージの合意形成のために テストケースの作成から始める
vue-testing-libraryの導入で良かったこと ▸ 要件を固めてから開発を進めるプロジェクトと相性が良かった ▸ これから作るものが明確になり、 開発工程でのQ&Aや手戻りを少なくすることができた ▸ 結合工程以降で検知されるバグ内容をOSやブラウザなどの 環境依存やデータパターンによるものに限定することができた 19
ToDoリストのようなテストケースがあることで 全体像の把握が容易になった
vue-testing-libraryの導入で難しかったこと ▸ テストケースの粒度の設定が難しい ▸ Mock/Stub/Spyを多用すると、テストコードの作成とメンテにコストがかか る上に、プロダクションコード実行時の状況とかけ離れてしまう場合がある ▸ テストコードを書く部分は自分たちが実装した部分だけ、 フレームワークやブラウザの処理までテストするテストコードは書かない 20
単体テストと結合テストの バランス調整が難しい
21 まとめ
まとめ 実コンポーネントに依存するテストは腐りやすい。 vue-testing-libraryを使うと、 コンポーネントが結合された実態に近い状態で 機能をテストすることができる。 単体テストでは拾えない結合バグや、 要件定義漏れによる手戻りの防止には、 製造する前のテストケース作成がオススメ。 22
23 EOF