高い開発生産性を実現するために取り組んだMagicPodの利活用

MagicPodユーザーLT会
https://trident-qa.connpass.com/event/283709/

Transcript

1. 高い開発生産性を実現するために

   取り組んだMagicPodの利活用

   MagicPodユーザーLT会

   2023.07.14
   1
   

   View Slide

2. 神保 拓眞（t-jimbo）
   2
   ■ BuySell Technologies 所属

   ■ フロントエンドエンジニア

   ■ 店舗買取システム「Store」の開発

   https://twitter.com/ce_mm
   スライドアップしてます！ 

   

   View Slide

3. プロダクトの紹介

   

   View Slide

4. 買取 から 販売 まで、総合リユースビジネスを展開

   4
   

   View Slide

5. リユースプラットフォーム「Cosmos」

   ■ リユースのあらゆる課題を、テクノロジーで解決する。

   5
   

   View Slide

6. リユースプラットフォーム「Cosmos」

   ■ リユースのあらゆる課題を、テクノロジーで解決する。

   6
   

   View Slide

7. リユースプラットフォーム「Cosmos」

   ■ リユースのあらゆる課題を、テクノロジーで解決する。

   7
   

   View Slide

8. 店舗買取システム「Store」

   8
   https://newswitch.jp/p/37111
   ステップ形式で操作に迷わず買取業務を進める

   iPad用のWebアプリ

   

   View Slide

9. フィードバック
   全国で運用中＝障害は出せない

   9
   昨年9月にリリース

   店舗買取を行うグループ会社へも展開

   Storeの障害 = 買取機会損失

   New!!
   新機能リリース

   

   View Slide

10. バイセルグループ3社にまたがって利用

    ■ バイセル、TIMELESS、WAKABAで利用

    ■ 会社によって業務フローが異なるため、求められる機能が異なる

    ● 機能の表示・非表示、用語の切り替えなど

    10
    

    View Slide

11. 安全かつ高速なデリバリーを実現する

    ■ featureフラグを活用したトランクベース開発

    ● 小さく高頻度でリリース

    ● 開発、テスト、デプロイのサイクルを高速に回していく

    ● PR数が1日10件を超える日も！

    11
    

    View Slide

12. 自動テストが安全性を担保

    ■ CI/CDでテストを回しまくる

    ● 単体テスト

    ● 画像回帰テスト

    ● インタラクションテスト

    ● E2Eテスト

    12
    

    View Slide

13. 自動テストが安全性を担保

    ■ CI/CDでテストを回しまくる

    ● 単体テスト

    ● 画像回帰テスト

    ● インタラクションテスト

    ● E2Eテスト

    ● MagicPod をフル活用

    13
    

    View Slide

14. こんな風にMagicPodを使っています

    

    View Slide

15. コードベースのE2Eテストに課題

    ■ 壊れやすいE2Eテストをコードで書くのはつらい

    ● メンテナンスコストが大きく、開発体験が悪化

    ● 属人化しがち

    ■ 結果としてテストが書かれなくなってしまう...

    15
    

    View Slide

16. MagicPodの嬉しいところ

    16
    ノーコードでテスト作成 
 AIによる自動修復機能 
 iOSのエミュレータ

    テストケースのバージョン管理など、日々
    

    嬉しい機能がアップデートされています
    

    

    View Slide

17. MagicPodの嬉しいところ

    ■ テストケースの作成がかんたん

    ■ メンテナンスコストが低い

    ■ 開発とQAのエンジニアを分離できる

    17
    

    View Slide

18. StoreでのMagicPodの利用

    とにかくたくさん実行して品質チェックする！！

    けどテスト待ちで開発スピードを落としたくはない

    18
    

    View Slide

19. StoreでのMagicPodの利用

    3種類の実行方法を使い分けています

    19
    定期実行で
 PR時点でも(New)

    デプロイ前に

    

    View Slide

20. 定期実行でMagicPodを回す

    ■ 3時間に1回の実行

    ● 実行数が無制限！

    ■ ここであらゆるケースをカバー

    ● 基本フロー

    ● 中止や特殊なフロー

    20
    

    View Slide

21. デプロイ前にMagicPodを回す

    ■ 本番環境へのデプロイ前にstaging環境でE2Eテストを自動実行

    ● 変更による障害を防ぐ

    ● 詳細は バイセル Tech Blog を参照！

    21
    

    View Slide

22. デプロイ前にMagicPodを回す

    ■ （余談）ワークフローはさらに進化中...

    ● buildの並列化

    ● CODEOWNERによる承認フローの追加

    ● リリースノートの自動作成

    22
    

    View Slide

23. PR時点でもMagicPodを回す

    ■ デプロイ直前にしかテストが実行できないのが課題だった

    ● マージ前にCIでもテストを実行したい！

    23
    Merge
 テスト失敗
 Revert

    

    View Slide

24. PR時点でもMagicPodを回す

    ■ PRを作成すると自動でプレビュー環境を立てる

    24
    PR作成
 Cloud Runへデプロイ
 PR番号でURL生成

    https://pr-1234-an.a.run.app/
    

    View Slide

25. PR時点でもMagicPodを回す

    ■ MagicPod API Client をGitHub Actionsで利用する

    ■ 環境変数で渡すことで任意のURLに対応

    25
    MagicPod API Client
 渡されたURLに遷移

    

    View Slide

26. 実行方法
 定期実行　
 デプロイ前(CD)　
 PR時点(CI)　

    テスト内容
 全フロー
 基本フローのみ

    実行時間
 長（合計30~40分）
 短（約5分）

    役割
 完全な品質の担保
 デプロイ時の障害防止 
 変更時の自動テスト 

    ■ 定期実行で全フローのテストを行い恒常的な品質を担保

    ■ CI/CDでは開発スピード重視で軽量な基本フローのみを実行

    StoreでのMagicPodの利用まとめ

    26
    

    View Slide

27. 開発生産性の向上にかなり寄与しています

    

    View Slide

28. MagicPodを回しまくることで...

    ■ 安心・安全が得られる！

    ● 障害の未然防止

    ■ 人間の確認作業を最小限に抑えられる！！

    ■ エンジニアがテスト作成や機能開発に集中できる！！！

    28
    使い倒しましょう！！！！

    

    View Slide

29. B U Y S E L L T E C H N O L O G I E S
    B U Y S E L L T E C H N O L O G I E S
    リユース業界 No.1テックカンパニーへ
    

    View Slide