頑張らずに始める！フロントエンド単体テストの歩み

https://spacemarket.connpass.com/event/216510/

登壇時の発表資料です

Transcript

1. 頑張らずに始める！ フロントエンド単体テストの歩み 2021/06/30 和山 祐也
2. 2 自己紹介 ゲームセンターの店長からエンジニアへ転職 エンジニアとしてのキャリアを３年ほど経て 2020年7月にスペースマーケットへ JOIN Javaからプログラミングを知った影響か 静的型付け言語が好き あとディズニーも好き
3. 3 本日お話すること
4. 4 本日お話しすること 1. 単体テストに関する２つの取り組み 2. 「頑張らないで始める」ために頑張らなければいけないこと 2.1. UTハンズオン 2.2. なぜテストコードが必要なのかを言語化 2.3. 評価制度への組み込み 3. さいごに
5. 5 単体テストに力を入れて半年が経ちました
6. 6 単体テストに関する２つの取り組み ⭐ 気軽な情報共有や相談ができる場を設ける チーム定例の場を使う → ツールの導入をした際に使い方を共有 → 不明点があれば議題としてあげる Slackでテスト専用チャンネルを作る → テストに絞った話題が参照できる ⭐ 現状のカバレッジをSlackで通知する仕組み 毎週金曜日の夜に各リポジトリのカバレッジを通知 → 週単位でアクションできたかどうかが一目瞭然
7. 7 「頑張らないで始める」ために 頑張らなければいけないこと
8. 8 「頑張らないで始める」ために頑張らなければいけないこと ある日突然上司に テストコードを実装できるように環境を整えました これからは必ず実装時にテストコードを書いてください と言われたらあなたはできますか？
9. 9 「頑張らないで始める」ために頑張らなければいけないこと ある日突然上司に テストコードを実装できるように環境を整えました これからは必ず実装時にテストコードを書いてください と言われたらあなたはできますか？ テストコードを書いたことがなければ実施のハードルが高い
10. 10 「頑張らないで始める」ために頑張らなければいけないこと なぜできないのか？ 問題点 やったこと 書き方が分からない UTハンズオンの実施 必要性が理解できていない なぜテストコードが必要なのかを言語化 負担の増加 評価制度への組み込み
11. 11 「頑張らないで始める」ために頑張らなければいけないこと • やったこと • 進め方 UTハンズオン 　非同期処理を行う 　コンポーネント 　イベント処理の 　扱い方 　フロントエンド 　単体テスト入門 単体テスト入門 　課題が完了したら 　PRを提出しレビュー 　課題を用意 チュートリアルの コードに沿って説明
12. 12 「頑張らないで始める」ために頑張らなければいけないこと チーム内で話し合う • バグを防いだり、既存コードへの影響を把握する • 手で確認するより自動テストのコードを実行する方が早いので楽ができる • コーディング時の思考内容を明確化・単純化するため • ゴールが決まるので、コーディングが過程を合わせるだけの作業になる etc…. なぜテストコードが必要なのかを言語化 各メンバーがどのように考えているか、チーム内で認識を合わせる
13. 13 「頑張らないで始める」ために頑張らなければいけないこと 人を動かす原則 原則３：人の立場に身を置く 人に何かをしてほしいなら、その人が何を欲しているかを考え ること。相手の利益と自分の利益を一致させる 。 評価制度への組み込み コードの保守性も上がり、 テストコードを書くことで評価も上がる状態に
14. 14 さいごに
15. 15 さいごに • 積極的にテストコードを実装するようになった ◦ 軽微なバグ修正から新規開発までテストコードを全員書くようになりました ◦ 特に既存コードはClassコンポーネント＋Fatコントローラ化しているので、コードをファイル単 位で分割しそこにテストを実装するといった取り組みができています • バグ修正でのデグレが減った ◦ 開発時にQAなどで上がったバグに対して修正 → テストが落ちる → 想定外の変更が加 わったという発見が早くなりデグレが減りました。
16. 16 さいごに • 積極的にテストコードを実装するようになった ◦ 軽微なバグ修正から新規開発までテストコードを全員書くようになりました ◦ 特に既存コードはClassコンポーネント＋Fatコントローラ化しているので、コードをファイル単 位で分割しそこにテストを実装するといった取り組みができています • バグ修正でのデグレが減った ◦ 開発時にQAなどで上がったバグに対して修正 → テストが落ちる → 想定外の変更が加 わったという発見が早くなりデグレが減りました。 是非皆さんのチームでも素敵なテストライフを！