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
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
300
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
220
Goで作る、開発・CI環境
sin392
0
260
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
生成AI時代のコンポーネントライブラリの作り方
touyou
1
290
NEWT Backend Evolution
xpromx
1
140
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
500
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
250
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
540
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Navigating Team Friction
lara
187
15k
Designing for Performance
lara
610
69k
Optimizing for Happiness
mojombo
379
70k
Gamification - CAS2011
davidbonilla
81
5.4k
4 Signs Your Business is Dying
shpigford
184
22k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Being A Developer After 40
akosma
90
590k
KATA
mclloyd
30
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
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.