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

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

t-jimbo
July 14, 2023

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

t-jimbo

July 14, 2023
Tweet

Other Decks in Technology

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