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
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
私の後悔をAWS DMSで解決した話
hiramax
4
210
Cache Me If You Can
ryunen344
2
700
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
390
AIコーディングAgentとの向き合い方
eycjur
0
270
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
300
Testing Trophyは叫ばない
toms74209200
0
870
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
270
速いWebフレームワークを作る
yusukebe
5
1.7k
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
4k
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
140
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Language of Interfaces
destraynor
161
25k
A designer walks into a library…
pauljervisheath
207
24k
Producing Creativity
orderedlist
PRO
347
40k
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.