Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

 開発生産性を支えるテスト自動化とその効果的な浸透策/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. © Link and Motivation Group
    開発生産性を支えるテスト自動化と
    その効果的な浸透策
    リンクアンドモチベーション
    MCユニット 新規開拓グループ
    中上 裕基

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    312 万人

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. © Link and Motivation Group
    8
    本日お話したいこと

    View full-size slide

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

    View full-size slide

  10. 10
    © Link and Motivation Group
    弊社開発組織の歴史
    2016
    2018
    2019 2022
    2023
    モチベーションクラウド
    のリリース
    開発組織内製化のスタート
    (Four Keys = Low レベル)
    コミュニケーションクラウ

    のリリース
    ストレッチクラウド
    のリリース
    Four Keys メトリクス
    High〜Elite レベルに到達
    2020
    SRE チームの誕生
    弊社の開発組織は誕生して5年目です!
    デプロイ頻度: 120 回/月
    リードタイム: 1日
    ※モチベーションクラウド 5月実績

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. © Link and Motivation Group
    16
    理想の姿を描こう!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. © Link and Motivation Group
    23
    「できる」そして「やりたい」と思ってもらおう!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. 33
    © Link and Motivation Group
    その結果、、、
    カバレッジなどをCIで縛ってないけど高いカバレッジ率を自然と達成
    → テストを書くことを定着させられたと言えそう

    View full-size slide

  34. © Link and Motivation Group
    34
    仲間を見つけて活動を広げよう!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. © Link and Motivation Group
    41
    さいごに

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. 44
    © Link and Motivation Group
    お知らせ②
    Vue Fes Japan 2023で弊社社員が登壇します!
    2023/10/28(土)
    @中野セントラルパーク

    View full-size slide

  45. © Link and Motivation Group
    45
    EoF

    View full-size slide