メドピアのサービスにおけるテスト戦略の過去と未来 〜かかりつけ化薬局⽀援サービス kakari 〜

Vue Fes Japan Online 2022 Sponsor Session
メドピアのサービスにおけるテスト戦略の過去と未来 〜かかりつけ化薬局⽀援サービス kakari 〜

1. 20 2 2 / 10 / 1 6 (Sun)                                            ⼩林和弘 メドピアのサービスにおける テスト戦略の過去と未来 〜かかりつけ化薬局⽀援サービス kakari 〜 Vue Fes Japan Online 2 022 スポンサーセッション 
2. ⾃⼰紹介 Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc. 
3. メドピアグループの紹介 https://medpeer.co.jp/recruit/ 
4. 
5. 
6. 
7. 
8. 開発を⽀援する取り組み 輪読会やモブプロ • 輪読会 • Vue 3 migration guide • TypeScript Handbook • JS Primer Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc. 
9. 開発を⽀援する取り組み 輪読会やモブプロ • モブプロ会 • Vue 3 のドキュメント翻訳 • Nuxt bridge の migration • esbuild-loader の導⼊ https://tech.medpeer.co.jp/entry/ 2 022 / 04 / 0 1 / 1 1 4 5 0 0 Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc. 
10. 開発を⽀援する取り組み スポンサー • Vue Fes 2 019 , 202 2 のプラチナスポンサー • v-tokyo# 1 3 スポンサー Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc. 
11. 詳細を知りたい⽅は、カジュアル⾯談へ 会社紹介はここまで（ノルマ達成） https://hrmos.co/pages/medpeer/jobs/ 00 000 2 7 
12. kakari のテスト戦略の過去と未来 
13. ⽬次 kakari のテスト戦略の過去と未来 • kakari というサービスについて • ユニットテスト • Storybook の導⼊と破棄 • E 2 E テスト • まとめ Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc. 
14. 
15. kakari の構成 Rails の MPA と Vue の SPA Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc. 
16. ユニットテスト（初期） ⼩林が参画したタイミング • Jest で書かれたユニットテスト • coverage は 50% を切る程度 • コンポーネント数は 82 Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc. 
17. ユニットテスト（現在） • coverage は 60% を切る程度 • Vue ファイル数は 197 Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc. 
18. Storybookの導⼊ コンポーネント開発 • Storybook上でコンポーネント開発 • Rails View にマウントしながらコンポーネントを確認するのがつらい • ビジュアルリグレッションテスト導⼊ • Storybook + reg-suit https://tech.medpeer.co.jp/entry/ 2 020 / 04 / 1 0 / 1 6 0 0 0 0 Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc. 
19. Storybookの導⼊ ビジュアルリグレッションテスト • reg-suit • 画像の差分検知を⾏い、レポートを作成してくれる • storycap • Storybook のキャプチャを作成する Addon Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc. 
20. Storybookの破棄 ⽌まらない腐敗 • 新規コンポーネント追加時に Storybook への追加が⾏われない • 既存コンポーネントを Storybook に追加しきれていない • Vueファイル数: 145 • Story 数: 92（約 63.4% のコンポーネント） • 運⽤で更新された props や API 変更のモック反映が漏れる • Storybook のバージョンアップが滞っている Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc. 
21. 🙏 R.I.P. Storybook 🙏 Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc. 
22. Storybookの破棄 反省点 • ゴール設定が不明確 • API 通信を⾏う organisms コンポーネントは対象外とするなど • 新規コンポーネント追加時に Story 追加を強制する仕組みが不⾜ Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc. 
23. 反省を活かしたStorybook運⽤ 素晴らしきコンポーネント開発 • 姉妹サービスの kakari for Clinic では新規開発時から Storybook を導⼊ • モックデータ、モック API を事前に設計 • CI ツールを使って PR 上で Story ファイル追加を強制 Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc. 
24. 直近の課題 class ベースコンポーネント Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc. 
25. Playwright の導⼊ E 2 E • Vue が使われているページの正常系のテスト網羅 • Vue 2 → 3 のマイグレーション時の動作保証 • vue-property-decorator → composition-api • ユニットテストでモックされがちなライブラリの動作保証 • vuex 3 → 5 (pinia 🍍) • vue-router 3 → 4 Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc. 
26. まとめ • テストツールを導⼊するときはゴールと⽬的をはっきりさせておく • それを設定できないツールは導⼊不要の可能性が⾼い • それを説明できないツールは導⼊しても頓挫する可能性が⾼い • Vue 2 の LTS は 2023 年 12 ⽉なので Vue 3 アップデートやっていきましょう Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc. 
27. ご清聴ありがとうございました We are hiring !! https://hrmos.co/pages/medpeer/jobs/ 00 000 2 7 フロントエンドエンジニア求⼈ https://medpeer.co.jp/recruit/ https://tech.medpeer.co.jp/ 採⽤情報 メドピア開発者ブログ Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc.