$30 off During Our Annual Pro Sale. View Details »

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

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

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

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

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

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

More Decks by リンクアンドモチベーション

Transcript

  1. 2 © Link and Motivation Group 中上 裕基(@nakagam3) 株式会社リンクアンドモチベーション MCユニット

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

    2022 2023 モチベーションクラウド のリリース 開発組織内製化のスタート (Four Keys = Low レベル) コミュニケーションクラウ ド のリリース ストレッチクラウド のリリース Four Keys メトリクス High〜Elite レベルに到達 2020 SRE チームの誕生 弊社の開発組織は誕生して5年目です! デプロイ頻度: 120 回/月 リードタイム: 1日 ※モチベーションクラウド 5月実績
  3. 13 © Link and Motivation Group そこに入社した私が気になったのは。。。 入社当時の私 リグレッションテストとか はどうしてるの?

    最後にまとめて手動で全体QAしてる このままでは高まるリードタイムに テストが追いつかなくなる未来が。。。
  4. 15 © Link and Motivation Group 1 2 3 理想の姿を描こう!

    「できる」そして「やりたい」と思ってもらおう! 仲間を見つけて活動を広げよう! そんな中でどう進めていったか?
  5. 18 © Link and Motivation Group シナリオテスト フロントエンド バックエンド ブラウザ結合テスト

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

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

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

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

    静的解析 ブラウザ結合テスト ブラウザ固有のネイティブAPIやレン ダリングの観点を保証するテスト → ブラウザ結合に絞った観点になる 例: ・ファイルアップロードできる ・Visual Regression Testing ・クロスブラウザテスト
  10. 24 © Link and Motivation Group Will・Can・Mustでメンバーの気持ちを考える やるべきこと Must やれること

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

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

    Can やりたいこと Will テストコードを書いたこと 無いからイメージ湧かない? 書いた方がいい気はする けどどこまで効果あるの? 今もまあ品質は悪く無いし メンバーの意欲を高める3つの輪「Will・Can・Must」
  13. 27 © Link and Motivation Group ⭕️ 【正確性】ユーザーの使用感に近い状態で検証可能 ❌ 【速度・信頼性】実行時間が長く不安定になりやすい

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

    静的解析 「開発者にとってメリットを感じやすい」かつ「コストが少ない」ものは? ⭕️ 【正確性】ユーザーの使用感に近い状態で検証可能 ❌ 【速度・信頼性】実行時間が長く不安定になりやすい ⭕️ 【正確性】ユーザーの使用感に近い状態で検証可能 ❌ 【難易度】複数の処理が絡むため難易度が高い ⭕️ 【FB速度】FBが早く実装中に問題に気づきやすい →「いいじゃん」って思ってもらいやすそう ❌ 【作業コスト】全範囲に書くと量が多く作業になる ⭕️ 【作業コスト】テストコードを書かなくても良い ❌ 【効果】「いいじゃん」の実感は少なそう
  15. 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
  16. 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)
  17. 35 © Link and Motivation Group 「やっててよかった」人を仲間により前へ リファクタリングしてたら思いもよらな いところでコケて気づけた、助かった。 開発者

    もっとテストを拡充したい、そしたらも っと安心して開発できそう。 じゃあ一緒にやろうよ! 改善活動の推進者
  18. 36 © Link and Motivation Group フロントエンド ブラウザ結合テスト コンポーネント結合テスト ユニットテスト

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

    静的解析 「難易度は上がる」けど「効果が大きいもの」に挑戦! ⭕️ 【正確性】ユーザーの使用感に近い状態で検証可能 ❌ 【速度・信頼性】実行時間が長く不安定になりやすい ⭕️ 【正確性】ユーザーの使用感に近い状態で検証可能 ❌ 【難易度】複数の処理が絡むため難易度が高い ⭕️ 【FB速度】FBが早く実装中に問題に気づきやすい →「いいじゃん」って思ってもらいやすそう ❌ 【作業コスト】全範囲に書くと量が多く作業になる ⭕️ 【作業コスト】テストコードを書かなくても良い ❌ 【効果】「いいじゃん」の実感は少なそう
  20. 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 + こんな感じにしたい!やろう!
  21. 39 © Link and Motivation Group なぜStorybookなのか? やるべきこと Must やれること

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

    Can やりたいこと Will コケたところが視覚的に 分かるから調査もしやすい! Storybookならこの課題を乗り越えられそう!(あと面白そう) jsdomだから早いし、壊れて ないことも確認できて安心!
  23. 42 © Link and Motivation Group 学び • 新しい取り組みを進めてもらうには理想像を伝え、Canになるまでフォローし、Willを実感 してもらうことが重要、急がば回れ

    • WillとCanが浸透すると次の取り組みにも前向きになってくれる メッセージ • まずは動き出しましょう!そしたら仲間が見つかり、そこから広がっていくはず! 学びとメッセージ
  24. 43 © Link and Motivation Group お知らせ • エンジニアリングマネージャー •

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

    2023で弊社社員が登壇します! 2023/10/28(土) @中野セントラルパーク