開発生産性を支えるテスト自動化とその効果的な浸透策/findy-fekaihatuseisansei-onlinecof-link-and-motivation

【フロントエンドの開発生産性〜Online Conference〜】
リンクアンドモチベーション登壇資料（2023/09/21）

『開発生産性を支えるテスト自動化とその効果的な浸透策』

#フロントエンド開発生産性_findy #リンクアンドモチベーション #リンモチ
=============================================
【イベント情報】
■イベントページ
　https://findy.connpass.com/event/294482/

【株式会社リンクアンドモチベーション】
■お問い合わせ
　engineer_pr@lmi.ne.jp
■Entrancebook
　https://note.com/lmi/n/n179505e048f4
■テックブログ
　https://link-and-motivation.hatenablog.com/
=============================================

Transcript

1. © Link and Motivation Group 開発生産性を支えるテスト自動化と その効果的な浸透策 リンクアンドモチベーション MCユニット 新規開拓グループ 中上 裕基
2. 2 © Link and Motivation Group 中上 裕基(@nakagam3) 株式会社リンクアンドモチベーション MCユニット 新規開拓グループ • 2015年にフロントエンドエンジニアとしてキャリアを スタート。 • その後アジャイル開発に出会い「どうすればチームが 気持ちよくいいモノを届けられるか」に興味を持つよ うに。 その探究のためアーキテクチャやQA、開発プロ セスの設計と幅広く取り組んできた。 • リンクアンドモチベーションに入社後はプロダクト開 発に従事しつつ、 フロントエンドとQAを中心に生産 性・開発者体験の向上に取り組んでいる。 自己紹介
3. 3 © Link and Motivation Group リンクアンドモチベーションについて 327億円（2022年12月時点） （2022年12月時点） 11社
4. プロダクト紹介 働きがい あふれる社会へ
5. モチベーションクラウド 診断 変革 ※ 2022年度 実績 10,060 社 312 万人
6. Generative AIを内包した機能 2023年3月7日 リリース 2023年4月7日 リリース
7. 導入企業様 ※2023年1月時点実績（https://www.motivation-cloud.com/）
8. © Link and Motivation Group 8 本日お話したいこと
9. 9 © Link and Motivation Group 開発生産性Conferenceでの登壇
10. 10 © Link and Motivation Group 弊社開発組織の歴史 2016 2018 2019 2022 2023 モチベーションクラウド のリリース 開発組織内製化のスタート (Four Keys = Low レベル) コミュニケーションクラウ ド のリリース ストレッチクラウド のリリース Four Keys メトリクス High〜Elite レベルに到達 2020 SRE チームの誕生 弊社の開発組織は誕生して５年目です！ デプロイ頻度: 120 回/月 リードタイム: 1日 ※モチベーションクラウド 5月実績
11. 11 © Link and Motivation Group そこに入社した私が気になったのは。。。 入社当時の私 あれ？フロントエンドの テストコードってないの？ リリース時にAutifyでE2Eテストしてる
12. 12 © Link and Motivation Group そこに入社した私が気になったのは。。。 入社当時の私 リグレッションテストとか はどうしてるの？ 最後にまとめて手動で全体QAしてる
13. 13 © Link and Motivation Group そこに入社した私が気になったのは。。。 入社当時の私 リグレッションテストとか はどうしてるの？ 最後にまとめて手動で全体QAしてる このままでは高まるリードタイムに テストが追いつかなくなる未来が。。。
14. 14 © Link and Motivation Group 自動テストにしたい！でも。。。 開発者 当然ですが、アプリ開発者は毎日すごく忙しい。 だからただ「やってください」といっても、やれなかったり形骸化してしまう。 リファクタリング 顧客要求の機能開発 日々の顧客対応 インシデント対応 生産性の改善活動 改善活動の推進者
15. 15 © Link and Motivation Group 1 2 3 理想の姿を描こう！ 「できる」そして「やりたい」と思ってもらおう！ 仲間を見つけて活動を広げよう！ そんな中でどう進めていったか？
16. © Link and Motivation Group 16 理想の姿を描こう！
17. 17 © Link and Motivation Group テストアーキテクチャを考える ◼️テストアーキテクチャとは？ 決まった定義があるわけではなさそうですが、国内外各所で似たような意味で使われてそう ◼️本発表におけるテストアーキテクチャの定義 プロダクト全体の品質を評価するテストをどのように実現するかの基本的な構造を表現したもの
18. 18 © Link and Motivation Group シナリオテスト フロントエンド バックエンド ブラウザ結合テスト コンポーネント結合テスト ユニットテスト 静的解析 APIテスト ユニットテスト 静的解析 テストアーキテクチャ E2E Integration Unit Static スモークテスト 性能試験 脆弱性試験
19. 19 © Link and Motivation Group フロントエンド ブラウザ結合テスト コンポーネント結合テスト ユニットテスト 静的解析 静的解析 チームや言語の規約に沿ったコード になっているかを確認するテスト → 静的に処理できる観点になる 例： ・コードスメル/コーディング規約 ・型チェック
20. 20 © Link and Motivation Group フロントエンド ブラウザ結合テスト コンポーネント結合テスト ユニットテスト 静的解析 ユニットテスト 開発者が自分の意図した実装が できていることを確認するテスト → 開発者目線の観点になる 例： ・境界値分析 ・条件分岐網羅 ・例外処理
21. 21 © Link and Motivation Group フロントエンド ブラウザ結合テスト コンポーネント結合テスト ユニットテスト 静的解析 コンポーネント結合テスト コンポーネントを連動させユーザーに 提供する振る舞いを保証するためのテ スト → ユーザー目線からの観点になる 例： ・入力したキーワードで検索できる ・検索結果が無い場合は「空です」
22. 22 © Link and Motivation Group フロントエンド ブラウザ結合テスト コンポーネント結合テスト ユニットテスト 静的解析 ブラウザ結合テスト ブラウザ固有のネイティブAPIやレン ダリングの観点を保証するテスト → ブラウザ結合に絞った観点になる 例： ・ファイルアップロードできる ・Visual Regression Testing ・クロスブラウザテスト
23. © Link and Motivation Group 23 「できる」そして「やりたい」と思ってもらおう！
24. 24 © Link and Motivation Group Will・Can・Mustでメンバーの気持ちを考える やるべきこと Must やれること Can やりたいこと Will メンバーの意欲を高める3つの輪「Will・Can・Must」
25. 25 © Link and Motivation Group Will・Can・Mustでメンバーの気持ちを考える やれること Can やりたいこと Will やるべきこと Must ユーザーのためにも品質は大事 CIとかに組み込んだらやる メンバーの意欲を高める3つの輪「Will・Can・Must」
26. 26 © Link and Motivation Group Will・Can・Mustでメンバーの気持ちを考える やるべきこと Must やれること Can やりたいこと Will テストコードを書いたこと 無いからイメージ湧かない？ 書いた方がいい気はする けどどこまで効果あるの？ 今もまあ品質は悪く無いし メンバーの意欲を高める3つの輪「Will・Can・Must」
27. 27 © Link and Motivation Group ⭕️ 【正確性】ユーザーの使用感に近い状態で検証可能 ❌ 【速度・信頼性】実行時間が長く不安定になりやすい フロントエンド ブラウザ結合テスト コンポーネント結合テスト ユニットテスト 静的解析 「開発者にとってメリットを感じやすい」かつ「コストが少ない」ものは？ ⭕️ 【正確性】ユーザーの使用感に近い状態で検証可能 ❌ 【難易度】複数の処理が絡むため難易度が高い ⭕️ 【FB速度】FBが早く実装中に問題に気づきやすい →「いいじゃん」って思ってもらいやすそう ❌ 【作業コスト】全範囲に書くと量が多く作業になる ⭕️ 【作業コスト】テストコードを書かなくても良い ❌ 【効果】「いいじゃん」の実感は少なそう
28. 28 © Link and Motivation Group フロントエンド ブラウザ結合テスト コンポーネント結合テスト ユニットテスト 静的解析 「開発者にとってメリットを感じやすい」かつ「コストが少ない」ものは？ ⭕️ 【正確性】ユーザーの使用感に近い状態で検証可能 ❌ 【速度・信頼性】実行時間が長く不安定になりやすい ⭕️ 【正確性】ユーザーの使用感に近い状態で検証可能 ❌ 【難易度】複数の処理が絡むため難易度が高い ⭕️ 【FB速度】FBが早く実装中に問題に気づきやすい →「いいじゃん」って思ってもらいやすそう ❌ 【作業コスト】全範囲に書くと量が多く作業になる ⭕️ 【作業コスト】テストコードを書かなくても良い ❌ 【効果】「いいじゃん」の実感は少なそう
29. 29 © Link and Motivation Group Unitテストは重要度の高いところから進める 1. Repository 2. ui-component (引用) dev.to. How to create a scalable and maintainable front-end architecture. https://dev.to/kevtiq/how-to-create-a-scalable-and-maintainable-front-end-architecture-4f47?comments_sort=latest, 2023/09/20
30. 30 © Link and Motivation Group テストツールのご紹介 さあ準備はできた！ vitest-dev/vitest test framework vuejs/test-utils Component test util mswjs/msw API mock rosiejs/rosie test data factory + + + (https://github.com/rosiejs/rosie) (https://github.com/mswjs/msw) (https://github.com/vuejs/vue-test-utils) (https://github.com/vitest-dev/vitest)
31. 31 © Link and Motivation Group みんなのCanを作るライブコーディング 実際にテストを書くイメージを持ってもらうためにライブコーディングを実施！ でしょー！？ よかったー！ こんな感じで書けば いいのか、イメージ 湧いた！
32. 32 © Link and Motivation Group 一人ひとりのCanを育むペアプロ 実業務でテストコードが書けるまではペアプロでフォローする！ → テストコードのペアプロ中にテストがコケて、ちょっとした実装ミスにすぐ気づけた。 これいつもならテストまで 気づかなかったやつだわ テストっていいじゃん でしょー！？ よかったー！
33. 33 © Link and Motivation Group その結果、、、 カバレッジなどをCIで縛ってないけど高いカバレッジ率を自然と達成 → テストを書くことを定着させられたと言えそう
34. © Link and Motivation Group 34 仲間を見つけて活動を広げよう！
35. 35 © Link and Motivation Group 「やっててよかった」人を仲間により前へ リファクタリングしてたら思いもよらな いところでコケて気づけた、助かった。 開発者 もっとテストを拡充したい、そしたらも っと安心して開発できそう。 じゃあ一緒にやろうよ！ 改善活動の推進者
36. 36 © Link and Motivation Group フロントエンド ブラウザ結合テスト コンポーネント結合テスト ユニットテスト 静的解析 「開発者にとってメリットを感じやすい」かつ「コストが少ない」ものは？ ⭕️ 【正確性】ユーザーの使用感に近い状態で検証可能 ❌ 【速度・信頼性】実行時間が長く不安定になりやすい ⭕️ 【正確性】ユーザーの使用感に近い状態で検証可能 ❌ 【難易度】複数の処理が絡むため難易度が高い ⭕️ 【FB速度】FBが早く実装中に問題に気づきやすい →「いいじゃん」って思ってもらいやすそう ❌ 【作業コスト】全範囲に書くと量が多く作業になる ⭕️ 【作業コスト】テストコードを書かなくても良い ❌ 【効果】「いいじゃん」の実感は少なそう
37. 37 © Link and Motivation Group フロントエンド ブラウザ結合テスト コンポーネント結合テスト ユニットテスト 静的解析 「難易度は上がる」けど「効果が大きいもの」に挑戦！ ⭕️ 【正確性】ユーザーの使用感に近い状態で検証可能 ❌ 【速度・信頼性】実行時間が長く不安定になりやすい ⭕️ 【正確性】ユーザーの使用感に近い状態で検証可能 ❌ 【難易度】複数の処理が絡むため難易度が高い ⭕️ 【FB速度】FBが早く実装中に問題に気づきやすい →「いいじゃん」って思ってもらいやすそう ❌ 【作業コスト】全範囲に書くと量が多く作業になる ⭕️ 【作業コスト】テストコードを書かなくても良い ❌ 【効果】「いいじゃん」の実感は少なそう
38. 38 © Link and Motivation Group Integrationテスト（コンポーネント結合テスト+VRT） Storybook - play test framework storycap+reg-suit Visual Regression Test Chromatic Visual Regression Test + or @storybook/ testing-vue3 test runner + こんな感じにしたい！やろう！
39. 39 © Link and Motivation Group なぜStorybookなのか？ やるべきこと Must やれること Can やりたいこと Will なんでコケたんだろう？ デバッグが大変だ。。。 感じていた課題感は【速度】と【難易度】 ブラウザ使うからテスト 遅くて嫌なんだよなー
40. 40 © Link and Motivation Group なぜStorybookなのか？ やるべきこと Must やれること Can やりたいこと Will コケたところが視覚的に 分かるから調査もしやすい！ Storybookならこの課題を乗り越えられそう！（あと面白そう） jsdomだから早いし、壊れて ないことも確認できて安心！
41. © Link and Motivation Group 41 さいごに
42. 42 © Link and Motivation Group 学び • 新しい取り組みを進めてもらうには理想像を伝え、Canになるまでフォローし、Willを実感 してもらうことが重要、急がば回れ • WillとCanが浸透すると次の取り組みにも前向きになってくれる メッセージ • まずは動き出しましょう！そしたら仲間が見つかり、そこから広がっていくはず！ 学びとメッセージ
43. 43 © Link and Motivation Group お知らせ • エンジニアリングマネージャー • プロダクトマネージャー • テックリード • サーバーサイドエンジニア • フロントエンドエンジニア • SRE • データエンジニア • CRM • UXデザイナー 週１でテックブログ更新しています！ まずはカジュアルにお話しましょう！ ご連絡お待ちしております！ 全職種、積極採用中です！
44. 44 © Link and Motivation Group お知らせ② Vue Fes Japan 2023で弊社社員が登壇します！ 2023/10/28(土) @中野セントラルパーク
45. © Link and Motivation Group 45 EoF