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

by t-jimbo

Slide 1

Slide 1 text

高い開発生産性を実現するために  取り組んだMagicPodの利活用  MagicPodユーザーLT会  2023.07.14 1

Slide 2

Slide 2 text

神保拓眞（t-jimbo） 2 ■ BuySell Technologies 所属  ■ フロントエンドエンジニア  ■ 店舗買取システム「Store」の開発  https://twitter.com/ce_mm スライドアップしてます！  

Slide 3

Slide 3 text

プロダクトの紹介 

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

リユースプラットフォーム「Cosmos」  ■ リユースのあらゆる課題を、テクノロジーで解決する。  5

Slide 6

Slide 6 text

リユースプラットフォーム「Cosmos」  ■ リユースのあらゆる課題を、テクノロジーで解決する。  6

Slide 7

Slide 7 text

リユースプラットフォーム「Cosmos」  ■ リユースのあらゆる課題を、テクノロジーで解決する。  7

Slide 8

Slide 8 text

店舗買取システム「Store」  8 https://newswitch.jp/p/37111 ステップ形式で操作に迷わず買取業務を進める  iPad用のWebアプリ 

Slide 9

Slide 9 text

フィードバック全国で運用中＝障害は出せない  9 昨年9月にリリース  店舗買取を行うグループ会社へも展開  Storeの障害 = 買取機会損失  New!! 新機能リリース 

Slide 10

Slide 10 text

バイセルグループ3社にまたがって利用  ■ バイセル、TIMELESS、WAKABAで利用  ■ 会社によって業務フローが異なるため、求められる機能が異なる  ● 機能の表示・非表示、用語の切り替えなど  10

Slide 11

Slide 11 text

安全かつ高速なデリバリーを実現する  ■ featureフラグを活用したトランクベース開発  ● 小さく高頻度でリリース  ● 開発、テスト、デプロイのサイクルを高速に回していく  ● PR数が1日10件を超える日も！  11

Slide 12

Slide 12 text

自動テストが安全性を担保  ■ CI/CDでテストを回しまくる  ● 単体テスト  ● 画像回帰テスト  ● インタラクションテスト  ● E2Eテスト  12

Slide 13

Slide 13 text

自動テストが安全性を担保  ■ CI/CDでテストを回しまくる  ● 単体テスト  ● 画像回帰テスト  ● インタラクションテスト  ● E2Eテスト  ● MagicPod をフル活用  13

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

コードベースのE2Eテストに課題  ■ 壊れやすいE2Eテストをコードで書くのはつらい  ● メンテナンスコストが大きく、開発体験が悪化  ● 属人化しがち  ■ 結果としてテストが書かれなくなってしまう...  15

Slide 16

Slide 16 text

MagicPodの嬉しいところ  16 ノーコードでテスト作成   AIによる自動修復機能   iOSのエミュレータ  テストケースのバージョン管理など、日々   嬉しい機能がアップデートされています  

Slide 17

Slide 17 text

MagicPodの嬉しいところ  ■ テストケースの作成がかんたん  ■ メンテナンスコストが低い  ■ 開発とQAのエンジニアを分離できる  17

Slide 18

Slide 18 text

StoreでのMagicPodの利用  とにかくたくさん実行して品質チェックする！！  けどテスト待ちで開発スピードを落としたくはない  18

Slide 19

Slide 19 text

StoreでのMagicPodの利用  3種類の実行方法を使い分けています  19 定期実行で  PR時点でも(New)  デプロイ前に 

Slide 20

Slide 20 text

定期実行でMagicPodを回す  ■ 3時間に1回の実行  ● 実行数が無制限！  ■ ここであらゆるケースをカバー  ● 基本フロー  ● 中止や特殊なフロー  20

Slide 21

Slide 21 text

デプロイ前にMagicPodを回す  ■ 本番環境へのデプロイ前にstaging環境でE2Eテストを自動実行  ● 変更による障害を防ぐ  ● 詳細はバイセル Tech Blog を参照！  21

Slide 22

Slide 22 text

デプロイ前にMagicPodを回す  ■ （余談）ワークフローはさらに進化中...  ● buildの並列化  ● CODEOWNERによる承認フローの追加  ● リリースノートの自動作成  22

Slide 23

Slide 23 text

PR時点でもMagicPodを回す  ■ デプロイ直前にしかテストが実行できないのが課題だった  ● マージ前にCIでもテストを実行したい！  23 Merge  テスト失敗  Revert 

Slide 24

Slide 24 text

PR時点でもMagicPodを回す  ■ PRを作成すると自動でプレビュー環境を立てる  24 PR作成  Cloud Runへデプロイ  PR番号でURL生成  https://pr-1234-an.a.run.app/

Slide 25

Slide 25 text

PR時点でもMagicPodを回す  ■ MagicPod API Client をGitHub Actionsで利用する  ■ 環境変数で渡すことで任意のURLに対応  25 MagicPod API Client  渡されたURLに遷移 

Slide 26

Slide 26 text

実行方法  定期実行　  デプロイ前(CD)　  PR時点(CI)　  テスト内容  全フロー  基本フローのみ  実行時間  長（合計30~40分）  短（約5分）  役割  完全な品質の担保  デプロイ時の障害防止   変更時の自動テスト   ■ 定期実行で全フローのテストを行い恒常的な品質を担保  ■ CI/CDでは開発スピード重視で軽量な基本フローのみを実行  StoreでのMagicPodの利用まとめ  26

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

MagicPodを回しまくることで...  ■ 安心・安全が得られる！  ● 障害の未然防止  ■ 人間の確認作業を最小限に抑えられる！！  ■ エンジニアがテスト作成や機能開発に集中できる！！！  28 使い倒しましょう！！！！ 

Slide 29

Slide 29 text

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テックカンパニーへ