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
メドピアのサービスにおけるテスト戦略の過去と未来 〜かかりつけ化薬局⽀援サービス kakari 〜
Search
Kobayashi Kazuhiro
October 16, 2022
Programming
0
70
メドピアのサービスにおけるテスト戦略の過去と未来 〜かかりつけ化薬局⽀援サービス kakari 〜
Vue Fes Japan Online 2022 Sponsor Session
メドピアのサービスにおけるテスト戦略の過去と未来 〜かかりつけ化薬局⽀援サービス kakari 〜
Kobayashi Kazuhiro
October 16, 2022
Tweet
Share
More Decks by Kobayashi Kazuhiro
See All by Kobayashi Kazuhiro
OpenAPI と型 | Mita.ts #1
kzhrk
0
1.2k
Vue 2 の EOL まで 2 ヶ月ですが進捗どうですか?
kzhrk
1
12k
Other Decks in Programming
See All in Programming
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
Team operations that are not burdened by SRE
kazatohiei
1
310
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
280
Deep Dive into ~/.claude/projects
hiragram
12
2.4k
ニーリーにおけるプロダクトエンジニア
nealle
0
780
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
720
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
910
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
0
4.3k
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
980
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Adopting Sorbet at Scale
ufuk
77
9.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
We Have a Design System, Now What?
morganepeng
53
7.7k
Writing Fast Ruby
sferik
628
62k
Navigating Team Friction
lara
187
15k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
260
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
20 2 2 / 10 / 1 6 (Sun) ⼩林和弘
メドピアのサービスにおける テスト戦略の過去と未来 〜かかりつけ化薬局⽀援サービス kakari 〜 Vue Fes Japan Online 2 022 スポンサーセッション
⾃⼰紹介 Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer,
Inc.
メドピアグループの紹介 https://medpeer.co.jp/recruit/
開発を⽀援する取り組み 輪読会やモブプロ • 輪読会 • Vue 3 migration guide •
TypeScript Handbook • JS Primer Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc.
開発を⽀援する取り組み 輪読会やモブプロ • モブプロ会 • 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.
開発を⽀援する取り組み スポンサー • Vue Fes 2 019 , 202 2
のプラチナスポンサー • v-tokyo# 1 3 スポンサー Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc.
詳細を知りたい⽅は、カジュアル⾯談へ 会社紹介はここまで(ノルマ達成) https://hrmos.co/pages/medpeer/jobs/ 00 000 2 7
kakari のテスト戦略の過去と未来
⽬次 kakari のテスト戦略の過去と未来 • kakari というサービスについて • ユニットテスト • Storybook
の導⼊と破棄 • E 2 E テスト • まとめ Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc.
kakari の構成 Rails の MPA と Vue の SPA Copyright(C)
2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc.
ユニットテスト(初期) ⼩林が参画したタイミング • Jest で書かれたユニットテスト • coverage は 50% を切る程度
• コンポーネント数は 82 Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc.
ユニットテスト(現在) • coverage は 60% を切る程度 • Vue ファイル数は 197
Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc.
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.
Storybookの導⼊ ビジュアルリグレッションテスト • reg-suit • 画像の差分検知を⾏い、レポートを作成してくれる • storycap • Storybook
のキャプチャを作成する Addon Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc.
Storybookの破棄 ⽌まらない腐敗 • 新規コンポーネント追加時に Storybook への追加が⾏われない • 既存コンポーネントを Storybook に追加しきれていない
• Vueファイル数: 145 • Story 数: 92(約 63.4% のコンポーネント) • 運⽤で更新された props や API 変更のモック反映が漏れる • Storybook のバージョンアップが滞っている Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc.
🙏 R.I.P. Storybook 🙏 Copyright(C) 2 0 2 2 ALL
RIGHTS RESERVED, MedPeer, Inc.
Storybookの破棄 反省点 • ゴール設定が不明確 • API 通信を⾏う organisms コンポーネントは対象外とするなど •
新規コンポーネント追加時に Story 追加を強制する仕組みが不⾜ Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc.
反省を活かしたStorybook運⽤ 素晴らしきコンポーネント開発 • 姉妹サービスの kakari for Clinic では新規開発時から Storybook を導⼊
• モックデータ、モック API を事前に設計 • CI ツールを使って PR 上で Story ファイル追加を強制 Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc.
直近の課題 class ベースコンポーネント Copyright(C) 2 0 2 2 ALL RIGHTS
RESERVED, MedPeer, Inc.
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.
まとめ • テストツールを導⼊するときはゴールと⽬的をはっきりさせておく • それを設定できないツールは導⼊不要の可能性が⾼い • それを説明できないツールは導⼊しても頓挫する可能性が⾼い • Vue 2
の LTS は 2023 年 12 ⽉なので Vue 3 アップデートやっていきましょう Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc.
ご清聴ありがとうございました 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.