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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

2 © Link and Motivation Group 中上裕基(@nakagam3) 株式会社リンクアンドモチベーション MCユニット新規開拓グループ ● 2015年にフロントエンドエンジニアとしてキャリアをスタート。 ● その後アジャイル開発に出会い「どうすればチームが気持ちよくいいモノを届けられるか」に興味を持つように。その探究のためアーキテクチャやQA、開発プロセスの設計と幅広く取り組んできた。 ● リンクアンドモチベーションに入社後はプロダクト開発に従事しつつ、フロントエンドとQAを中心に生産性・開発者体験の向上に取り組んでいる。自己紹介

Slide 3

Slide 3 text

3 © Link and Motivation Group リンクアンドモチベーションについて 327億円（2022年12月時点）（2022年12月時点） 11社

Slide 4

Slide 4 text

プロダクト紹介働きがいあふれる社会へ

Slide 5

Slide 5 text

モチベーションクラウド診断変革 ※ 2022年度実績 10,060 社 312 万人

Slide 6

Slide 6 text

Generative AIを内包した機能 2023年3月7日リリース 2023年4月7日リリース

Slide 7

Slide 7 text

導入企業様 ※2023年1月時点実績（https://www.motivation-cloud.com/）

Slide 8

Slide 8 text

Slide 9

Slide 9 text

9 © Link and Motivation Group 開発生産性Conferenceでの登壇

Slide 10

Slide 10 text

10 © Link and Motivation Group 弊社開発組織の歴史 2016 2018 2019 2022 2023 モチベーションクラウドのリリース開発組織内製化のスタート (Four Keys = Low レベル) コミュニケーションクラウドのリリースストレッチクラウドのリリース Four Keys メトリクス High〜Elite レベルに到達 2020 SRE チームの誕生弊社の開発組織は誕生して５年目です！デプロイ頻度: 120 回/月リードタイム: 1日 ※モチベーションクラウド 5月実績

Slide 11

Slide 11 text

11 © Link and Motivation Group そこに入社した私が気になったのは。。。入社当時の私あれ？フロントエンドのテストコードってないの？リリース時にAutifyでE2Eテストしてる

Slide 12

Slide 12 text

12 © Link and Motivation Group そこに入社した私が気になったのは。。。入社当時の私リグレッションテストとかはどうしてるの？最後にまとめて手動で全体QAしてる

Slide 13

Slide 13 text

13 © Link and Motivation Group そこに入社した私が気になったのは。。。入社当時の私リグレッションテストとかはどうしてるの？最後にまとめて手動で全体QAしてるこのままでは高まるリードタイムにテストが追いつかなくなる未来が。。。

Slide 14

Slide 14 text

14 © Link and Motivation Group 自動テストにしたい！でも。。。開発者当然ですが、アプリ開発者は毎日すごく忙しい。だからただ「やってください」といっても、やれなかったり形骸化してしまう。リファクタリング顧客要求の機能開発日々の顧客対応インシデント対応生産性の改善活動改善活動の推進者

Slide 15

Slide 15 text

15 © Link and Motivation Group 1 2 3 理想の姿を描こう！「できる」そして「やりたい」と思ってもらおう！仲間を見つけて活動を広げよう！そんな中でどう進めていったか？

Slide 16

Slide 16 text

Slide 17

Slide 17 text

17 © Link and Motivation Group テストアーキテクチャを考える ◼️テストアーキテクチャとは？決まった定義があるわけではなさそうですが、国内外各所で似たような意味で使われてそう ◼️本発表におけるテストアーキテクチャの定義プロダクト全体の品質を評価するテストをどのように実現するかの基本的な構造を表現したもの

Slide 18

Slide 18 text

18 © Link and Motivation Group シナリオテストフロントエンドバックエンドブラウザ結合テストコンポーネント結合テストユニットテスト静的解析 APIテストユニットテスト静的解析テストアーキテクチャ E2E Integration Unit Static スモークテスト性能試験脆弱性試験

Slide 19

Slide 19 text

19 © Link and Motivation Group フロントエンドブラウザ結合テストコンポーネント結合テストユニットテスト静的解析静的解析チームや言語の規約に沿ったコードになっているかを確認するテスト → 静的に処理できる観点になる例：・コードスメル/コーディング規約・型チェック

Slide 20

Slide 20 text

20 © Link and Motivation Group フロントエンドブラウザ結合テストコンポーネント結合テストユニットテスト静的解析ユニットテスト開発者が自分の意図した実装ができていることを確認するテスト → 開発者目線の観点になる例：・境界値分析・条件分岐網羅・例外処理

Slide 21

Slide 21 text

21 © Link and Motivation Group フロントエンドブラウザ結合テストコンポーネント結合テストユニットテスト静的解析コンポーネント結合テストコンポーネントを連動させユーザーに提供する振る舞いを保証するためのテスト → ユーザー目線からの観点になる例：・入力したキーワードで検索できる・検索結果が無い場合は「空です」

Slide 22

Slide 22 text

22 © Link and Motivation Group フロントエンドブラウザ結合テストコンポーネント結合テストユニットテスト静的解析ブラウザ結合テストブラウザ固有のネイティブAPIやレンダリングの観点を保証するテスト → ブラウザ結合に絞った観点になる例：・ファイルアップロードできる・Visual Regression Testing ・クロスブラウザテスト

Slide 23

Slide 23 text

Slide 24

Slide 24 text

24 © Link and Motivation Group Will・Can・Mustでメンバーの気持ちを考えるやるべきこと Must やれること Can やりたいこと Will メンバーの意欲を高める3つの輪「Will・Can・Must」

Slide 25

Slide 25 text

25 © Link and Motivation Group Will・Can・Mustでメンバーの気持ちを考えるやれること Can やりたいこと Will やるべきこと Must ユーザーのためにも品質は大事 CIとかに組み込んだらやるメンバーの意欲を高める3つの輪「Will・Can・Must」

Slide 26

Slide 26 text

26 © Link and Motivation Group Will・Can・Mustでメンバーの気持ちを考えるやるべきこと Must やれること Can やりたいこと Will テストコードを書いたこと無いからイメージ湧かない？書いた方がいい気はするけどどこまで効果あるの？今もまあ品質は悪く無いしメンバーの意欲を高める3つの輪「Will・Can・Must」

Slide 27

Slide 27 text

27 © Link and Motivation Group ⭕️ 【正確性】ユーザーの使用感に近い状態で検証可能 ❌ 【速度・信頼性】実行時間が長く不安定になりやすいフロントエンドブラウザ結合テストコンポーネント結合テストユニットテスト静的解析「開発者にとってメリットを感じやすい」かつ「コストが少ない」ものは？ ⭕️ 【正確性】ユーザーの使用感に近い状態で検証可能 ❌ 【難易度】複数の処理が絡むため難易度が高い ⭕️ 【FB速度】FBが早く実装中に問題に気づきやすい →「いいじゃん」って思ってもらいやすそう ❌ 【作業コスト】全範囲に書くと量が多く作業になる ⭕️ 【作業コスト】テストコードを書かなくても良い ❌ 【効果】「いいじゃん」の実感は少なそう

Slide 28

Slide 28 text

28 © Link and Motivation Group フロントエンドブラウザ結合テストコンポーネント結合テストユニットテスト静的解析「開発者にとってメリットを感じやすい」かつ「コストが少ない」ものは？ ⭕️ 【正確性】ユーザーの使用感に近い状態で検証可能 ❌ 【速度・信頼性】実行時間が長く不安定になりやすい ⭕️ 【正確性】ユーザーの使用感に近い状態で検証可能 ❌ 【難易度】複数の処理が絡むため難易度が高い ⭕️ 【FB速度】FBが早く実装中に問題に気づきやすい →「いいじゃん」って思ってもらいやすそう ❌ 【作業コスト】全範囲に書くと量が多く作業になる ⭕️ 【作業コスト】テストコードを書かなくても良い ❌ 【効果】「いいじゃん」の実感は少なそう

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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)

Slide 31

Slide 31 text

31 © Link and Motivation Group みんなのCanを作るライブコーディング実際にテストを書くイメージを持ってもらうためにライブコーディングを実施！でしょー！？よかったー！こんな感じで書けばいいのか、イメージ湧いた！

Slide 32

Slide 32 text

32 © Link and Motivation Group 一人ひとりのCanを育むペアプロ実業務でテストコードが書けるまではペアプロでフォローする！ → テストコードのペアプロ中にテストがコケて、ちょっとした実装ミスにすぐ気づけた。これいつもならテストまで気づかなかったやつだわテストっていいじゃんでしょー！？よかったー！

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

35 © Link and Motivation Group 「やっててよかった」人を仲間により前へリファクタリングしてたら思いもよらないところでコケて気づけた、助かった。開発者もっとテストを拡充したい、そしたらもっと安心して開発できそう。じゃあ一緒にやろうよ！改善活動の推進者

Slide 36

Slide 36 text

36 © Link and Motivation Group フロントエンドブラウザ結合テストコンポーネント結合テストユニットテスト静的解析「開発者にとってメリットを感じやすい」かつ「コストが少ない」ものは？ ⭕️ 【正確性】ユーザーの使用感に近い状態で検証可能 ❌ 【速度・信頼性】実行時間が長く不安定になりやすい ⭕️ 【正確性】ユーザーの使用感に近い状態で検証可能 ❌ 【難易度】複数の処理が絡むため難易度が高い ⭕️ 【FB速度】FBが早く実装中に問題に気づきやすい →「いいじゃん」って思ってもらいやすそう ❌ 【作業コスト】全範囲に書くと量が多く作業になる ⭕️ 【作業コスト】テストコードを書かなくても良い ❌ 【効果】「いいじゃん」の実感は少なそう

Slide 37

Slide 37 text

37 © Link and Motivation Group フロントエンドブラウザ結合テストコンポーネント結合テストユニットテスト静的解析「難易度は上がる」けど「効果が大きいもの」に挑戦！ ⭕️ 【正確性】ユーザーの使用感に近い状態で検証可能 ❌ 【速度・信頼性】実行時間が長く不安定になりやすい ⭕️ 【正確性】ユーザーの使用感に近い状態で検証可能 ❌ 【難易度】複数の処理が絡むため難易度が高い ⭕️ 【FB速度】FBが早く実装中に問題に気づきやすい →「いいじゃん」って思ってもらいやすそう ❌ 【作業コスト】全範囲に書くと量が多く作業になる ⭕️ 【作業コスト】テストコードを書かなくても良い ❌ 【効果】「いいじゃん」の実感は少なそう

Slide 38

Slide 38 text

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 + こんな感じにしたい！やろう！

Slide 39

Slide 39 text

39 © Link and Motivation Group なぜStorybookなのか？やるべきこと Must やれること Can やりたいこと Will なんでコケたんだろう？デバッグが大変だ。。。感じていた課題感は【速度】と【難易度】ブラウザ使うからテスト遅くて嫌なんだよなー

Slide 40

Slide 40 text

40 © Link and Motivation Group なぜStorybookなのか？やるべきこと Must やれること Can やりたいこと Will コケたところが視覚的に分かるから調査もしやすい！ Storybookならこの課題を乗り越えられそう！（あと面白そう） jsdomだから早いし、壊れてないことも確認できて安心！

Slide 41

Slide 41 text

Slide 42

Slide 42 text

42 © Link and Motivation Group 学び ● 新しい取り組みを進めてもらうには理想像を伝え、Canになるまでフォローし、Willを実感してもらうことが重要、急がば回れ ● WillとCanが浸透すると次の取り組みにも前向きになってくれるメッセージ ● まずは動き出しましょう！そしたら仲間が見つかり、そこから広がっていくはず！学びとメッセージ

Slide 43

Slide 43 text

43 © Link and Motivation Group お知らせ ● エンジニアリングマネージャー ● プロダクトマネージャー ● テックリード ● サーバーサイドエンジニア ● フロントエンドエンジニア ● SRE ● データエンジニア ● CRM ● UXデザイナー週１でテックブログ更新しています！まずはカジュアルにお話しましょう！ご連絡お待ちしております！全職種、積極採用中です！