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
Wayama
June 30, 2021
Programming
0
560
頑張らずに始める!フロントエンド単体テストの歩み
https://spacemarket.connpass.com/event/216510/
登壇時の発表資料です
Wayama
June 30, 2021
Tweet
Share
More Decks by Wayama
See All by Wayama
なぜ我々は使われない機能開発に時間をかけ てしまったのか
disneyladysango
1
170
タスクを小さくしたら チームの生産性が上がったお話
disneyladysango
0
380
Other Decks in Programming
See All in Programming
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
900
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
770
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
87
29k
PipeCDのプラグイン化で目指すところ
warashi
1
280
Hack Claude Code with Claude Code
choplin
4
2.1k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
9
5.2k
ニーリーにおけるプロダクトエンジニア
nealle
0
840
ふつうの技術スタックでアート作品を作ってみる
akira888
1
850
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
Designing Experiences People Love
moore
142
24k
Producing Creativity
orderedlist
PRO
346
40k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Scaling GitHub
holman
460
140k
Transcript
頑張らずに始める! フロントエンド単体テストの歩み 2021/06/30 和山 祐也
2 自己紹介 ゲームセンターの店長からエンジニアへ転職 エンジニアとしてのキャリアを3年ほど経て 2020年7月にスペースマーケットへ JOIN Javaからプログラミングを知った影響か 静的型付け言語が好き あとディズニーも好き
3 本日お話すること
4 本日お話しすること 1. 単体テストに関する2つの取り組み 2. 「頑張らないで始める」ために頑張らなければいけないこと 2.1. UTハンズオン 2.2. なぜテストコードが必要なのかを言語化
2.3. 評価制度への組み込み 3. さいごに
5 単体テストに力を入れて半年が経ちました
6 単体テストに関する2つの取り組み ⭐ 気軽な情報共有や相談ができる場を設ける チーム定例の場を使う → ツールの導入をした際に使い方を共有 → 不明点があれば議題としてあげる Slackでテスト専用チャンネルを作る
→ テストに絞った話題が参照できる ⭐ 現状のカバレッジをSlackで通知する仕組み 毎週金曜日の夜に各リポジトリのカバレッジを通知 → 週単位でアクションできたかどうかが一目瞭然
7 「頑張らないで始める」ために 頑張らなければいけないこと
8 「頑張らないで始める」ために頑張らなければいけないこと ある日突然上司に テストコードを実装できるように環境を整えました これからは必ず実装時にテストコードを書いてください と言われたらあなたはできますか?
9 「頑張らないで始める」ために頑張らなければいけないこと ある日突然上司に テストコードを実装できるように環境を整えました これからは必ず実装時にテストコードを書いてください と言われたらあなたはできますか? テストコードを書いたことがなければ実施のハードルが高い
10 「頑張らないで始める」ために頑張らなければいけないこと なぜできないのか? 問題点 やったこと 書き方が分からない UTハンズオンの実施 必要性が理解できていない なぜテストコードが必要なのかを言語化 負担の増加
評価制度への組み込み
11 「頑張らないで始める」ために頑張らなければいけないこと • やったこと • 進め方 UTハンズオン 非同期処理を行う コンポーネント イベント処理の
扱い方 フロントエンド 単体テスト入門 単体テスト入門 課題が完了したら PRを提出しレビュー 課題を用意 チュートリアルの コードに沿って説明
12 「頑張らないで始める」ために頑張らなければいけないこと チーム内で話し合う • バグを防いだり、既存コードへの影響を把握する • 手で確認するより自動テストのコードを実行する方が早いので楽ができる • コーディング時の思考内容を明確化・単純化するため •
ゴールが決まるので、コーディングが過程を合わせるだけの作業になる etc…. なぜテストコードが必要なのかを言語化 各メンバーがどのように考えているか、チーム内で認識を合わせる
13 「頑張らないで始める」ために頑張らなければいけないこと 人を動かす原則 原則3:人の立場に身を置く 人に何かをしてほしいなら、その人が何を欲しているかを考え ること。相手の利益と自分の利益を一致させる 。 評価制度への組み込み コードの保守性も上がり、 テストコードを書くことで評価も上がる状態に
14 さいごに
15 さいごに • 積極的にテストコードを実装するようになった ◦ 軽微なバグ修正から新規開発までテストコードを全員書くようになりました ◦ 特に既存コードはClassコンポーネント+Fatコントローラ化しているので、コードをファイル単 位で分割しそこにテストを実装するといった取り組みができています •
バグ修正でのデグレが減った ◦ 開発時にQAなどで上がったバグに対して修正 → テストが落ちる → 想定外の変更が加 わったという発見が早くなりデグレが減りました。
16 さいごに • 積極的にテストコードを実装するようになった ◦ 軽微なバグ修正から新規開発までテストコードを全員書くようになりました ◦ 特に既存コードはClassコンポーネント+Fatコントローラ化しているので、コードをファイル単 位で分割しそこにテストを実装するといった取り組みができています •
バグ修正でのデグレが減った ◦ 開発時にQAなどで上がったバグに対して修正 → テストが落ちる → 想定外の変更が加 わったという発見が早くなりデグレが減りました。 是非皆さんのチームでも素敵なテストライフを!
None