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.4k
レガシーでウォーターフォールな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
23
12k
強みを伸ばすキャリアデザイン
yug1224
3
490
インターンと盛り上げる全社員参加型Advent Calendarの作り方 / 2024-02-22-QiitaNight
yug1224
1
120
2022ランキング圏外から2023ランキング入りを実現したテックブログ運営について / 2023-07-28-QiitaEngineerFesta
yug1224
1
140
Qiitaいいね数をGASで計測している話 / 2023-07-24-HRBrainFlyHigh
yug1224
1
970
HRBrainの生態系を支えるフロントエンドチームの取り組み / 2023-06-22-AwEngineerMeetup
yug1224
0
97
明日使えるかもしれないGitテクニック / Gunma.web#47
yug1224
0
300
React+TypeScriptで拡張機能が開発できるRaycastのススメ / 20221027_Raycast
yug1224
1
930
DX向上委員会 / 20220922_dxhacklt
yug1224
1
220
Other Decks in Programming
See All in Programming
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
210
階層化自動テストで開発に機動力を
ickx
1
410
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
690
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
250
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
290
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.2k
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
730
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
180
PHPカンファレンス関西2025 基調講演
sugimotokei
5
920
slogパッケージの深掘り
integral0515
0
120
AIのメモリー
watany
11
910
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)
risatube
PRO
1
480
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
370
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Why Our Code Smells
bkeepers
PRO
337
57k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
RailsConf 2023
tenderlove
30
1.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
A Modern Web Designer's Workflow
chriscoyier
695
190k
BBQ
matthewcrist
89
9.7k
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