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
半年開発してわかった自動テストの価値
Search
teamLab
PRO
January 22, 2025
Programming
0
100
半年開発してわかった自動テストの価値
teamLab
PRO
January 22, 2025
Tweet
Share
More Decks by teamLab
See All by teamLab
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
1
51
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
480
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
720
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
540
推論された型の移植性エラーTS2742に挑む
teamlab
PRO
0
330
ぴよぴよFlutterエンジニアから見た 会社の楽しいところをありったけ
teamlab
PRO
0
180
社内のFlutterテンプレートをリニューアルした話
teamlab
PRO
0
140
"ほどよい自動化"はあなたの開発を豊かにする
teamlab
PRO
0
170
History APIの魅力と危険性
teamlab
PRO
0
160
Other Decks in Programming
See All in Programming
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
100
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
410
複雑なドメインに挑む.pdf
yukisakai1225
5
1.1k
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
830
ソフトウェアテスト徹底指南書の紹介
goyoki
1
150
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
100
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
460
rage against annotate_predecessor
junk0612
0
160
旅行プランAIエージェント開発の裏側
ippo012
2
890
Namespace and Its Future
tagomoris
6
700
Featured
See All Featured
How to Ace a Technical Interview
jacobian
279
23k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
What's in a price? How to price your products and services
michaelherold
246
12k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
A better future with KSS
kneath
239
17k
Automating Front-end Workflow
addyosmani
1370
200k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Fireside Chat
paigeccino
39
3.6k
Transcript
半年開発してわかった⾃動テストの価値 【学⽣向け勉強会】teamLab×DMM tech meetup ~frontend~ 宇根 昇汰
© teamLab Inc ⾃⼰紹介 宇根 昇汰 Une Shota 2024年 新卒⼊社
パッケージチーム フロントエンド班 和歌⼭⾼専 専攻科卒業
© teamLab Inc ⾃動テストについてどう思いますか
© teamLab Inc 良くない?笑
© teamLab Inc ⾃動テストって 俺は「開発」がしたいんだ! ちまちま細かくて楽しくなさそう めんどくさそう 「品質保証」をラクにするやつね...俺はいいかな
© teamLab Inc ⾃動テストは開発をラクにしてくれる
© teamLab Inc Case 1:新規実装 実装時にログ出⼒などで動作確認する const func = (arg:
string) => { if(arg === '') { return 'empty' }; return arg; } - console.log(func('lab')) > lab - console.log(func('')) > empty 全て消した状態でPR作成 レビュワーも動作確認するかも 無駄じゃない?
© teamLab Inc Case 2:改修 既存の共通処理を修正する デグレードを引き起こしていないか確認 • 共通処理が使⽤されている画⾯を探す •
ローカルでサーバーを⽴ち上げる • 該当画⾯のさまざまな機能を⼿動で確認 めんどくさい...
© teamLab Inc 動作確認の証跡を残したままPR作成 & ⾃分の改修による他機能への影響を検知したいナ〜...
© teamLab Inc ⾃動テスト‧‧‧やりたくね?
© teamLab Inc デバッグの減少 テストコードによってコードの機能が保証される バグもテストコードによって検出される 変更への信頼の増⼤ リファクタリングなどによる変更が既存機能に影響 を与えたかを検知可能 ドキュメンテーションの改善
テストコードがコードの挙動を明確に⽰してくれる ドキュメントが古くなっているということもない レビューの単純化 レビュワーは、コードが適切に機能していることを テストが通っている事実だけで判断可能 思慮に富む設計 テストコードを書きやすいように設計することは適 切にモジュール化し、密結合を避けることに繋がる ⾼速で⾼品質なリリース ⼿動テストの⼯数を減らし、新機能だけでなく既存 機能に対しても何回でもテスト可能 Pros Googleのソフトウェアエンジニアリング p249-250
© teamLab Inc Case 1:新規実装 実装時にテストコードを書いて動作確認 const func = (arg:
string) => { if(arg === '') { return 'empty' }; return arg; } test('普通の文字列の場合', () => { expect(func('lab')).toBe('lab') }) test('空文字の場合', () => { expect(func('')).toBe('empty') }) テストコードもコミットしてPR作成 レビュワーはテスト結果で動作を確認 Happy… デバッグの減少 レビューの単純化
© teamLab Inc Case 2:改修 変更への信頼の増⼤ 既存の共通処理を修正する デグレードを引き起こしていないか確認 • 既存のテストが通っているかを確認
Wonderful…
© teamLab Inc 品質保証の⽂脈だけでなく 開発者体験を⾼める⾯でも⾃動テストは良い!
おわり teamLab×DMM tech meetup ~frontend~ 宇根 昇汰