出前館におけるFlutterの現在とこれから

Transcript

1. 出前館におけるFlutterの現在と これから 株式会社出前館 田中優之 2023.11 @ FlutterKaigi
2. 大事なお知らせ📣
3. Flutterで再実装 &リリースしました🎉
4. 自己紹介 出前館のご紹介 これまでの取り組み 出前館アプリRearchitectの取り組み まとめ 01 02 03 04 05 Contents
5. 自己紹介 出前館のご紹介 これまでの取り組み 出前館アプリRearchitectの取り組み まとめ 01 02 03 04 05 Contents
6. 田中 優之 自己紹介 • Webサービス開発ののち, アプリ開発を担当 • ゲームアプリ • カーナビアプリ • 2020年4月 ～ 出前館を担当 これまでの業務経験 その他 • 料理 • 博士(ソフトウェア工学) 株式会社出前館 プロダクト本部コンシューマ部 アプリ開発グループ グループマネージャ 所属 • LINEヤフー株式会社(京都オフィス所属) • 株式会社出前館へ出向
7. 自己紹介 出前館のご紹介 これまでの取り組み 出前館アプリRearchitectの取り組み まとめ 01 02 03 04 05 Contents
8. 出前館のご紹介 MISSION テクノロジーで時間価値を高める VISION 地域の人々の幸せをつなぐライフインフラ VALUE ホスピタリティ チャレンジ クリエイティビティ
9. 出前館のご紹介 弊社サーバ 加盟店 配達 ご注文 注文情報 注文情報 商品受取
10. 出前館のご紹介 [大阪/京都] サーバ/アプリ [福岡/鹿児島] QA/CS [東京] サーバ/アプリ /QA/企画 • オンラインで密に連携 • KRチームとも連携 • アプリエンジニア 20人ほど(KRチーム含む)
11. 自己紹介 出前館のご紹介 これまでの取り組み 出前館アプリRearchitectの取り組み まとめ 01 02 03 04 05 Contents
12. これまでの取り組み 主なアプリの利用技術変遷 2020年頃の利用技術 • 加盟店向けアプリ Xamarin • ドライバー向けアプリ React Native • 出前館アプリ(エンドユーザ向け) React Native
13. これまでの取り組み 主なアプリの利用技術変遷 現在の利用技術 • 加盟店向けアプリ Xamarin • ドライバー向けアプリ React Native • 出前館アプリ(エンドユーザ向け) React Native • 加盟店向けアプリ Xamarin Flutter • ドライバー向けアプリ React Native Flutter • 出前館アプリ(エンドユーザ向け) React Native Flutter
15. これまでの取り組み 主なアプリの利用技術変遷 • 加盟店向けアプリ Xamarin • ドライバー向けアプリ React Native • 出前館アプリ(エンドユーザ向け) React Native • 加盟店向けアプリ Xamarin Flutter • ドライバー向けアプリ React Native Flutter • 出前館アプリ(エンドユーザ向け) React Native Flutter 以降は出前館アプリ のお話をします
16. 自己紹介 出前館のご紹介 これまでの取り組み 出前館アプリRearchitectの取り組み まとめ 01 02 03 04 05 Contents
17. 出前館アプリ Rearchitectの取り組み モチベーション => 組織が利用する技術を統一し、アウトプットを最大化 多くの議論をした結果, 組織として進む方向を決定 • 状況に応じたアプリエンジニアのアサインの柔軟さ • 利用技術統一によるナレッジ共有の効率化 • Flutterへの期待, 新しい技術への好奇心 背景として, すでに他ア プリでFlutterを利用して いたことがあります
18. さて, どう進めるか🤔
19. さて, どう進めるか🤔 多くの新規案件 多数の決済方法 スケジュール調整 Flutterの学習 事業への影響 TypeScriptからDartへ
20. 出前館アプリ Rearchitectの取り組み 非機能要件 • コードフリーズ期間を設けることは難しい • Flutter版の開発と既存React Native版への機能追加を並行する • Flutter版は韓国チームで先行して進め, 徐々に日本チームも合流 • 日本側メンバーはFlutterをこれから学習する • 不具合なく, できるだけ早くリリースする 機能要件 • 既存React Native版と同様の機能を提供する
21. さて, どう進めるか🤔
23. 銀の弾丸はない, まずはチームビルディングから
24. 出前館アプリ Rearchitectの取り組み React N ative Flutter hotfix対応 リリース 機能改修(決済) 機能改修(クーポン) 2月 QA開始 社内Betaテスト チームビルディング 5月 9月 10月 11月
25. 出前館アプリ Rearchitectの取り組み 非機能要件 特別なアプローチは なく, できることを一 つずつ実施 • コードフリーズ期間を設けることは難しい • => アプローチ：案件調整, リリーススケジュール管理, 差分管理など • Flutter版の開発とReact Native版への機能追加を並行する • => アプローチ：リリーススケジュール管理, 差分管理など
26. 出前館アプリ Rearchitectの取り組み 非機能要件 特別なアプローチは なく, できることを一 つずつ実施 • Flutter版は韓国チームで先行して進め, 徐々に日本チームも合流 • => アプローチ：勉強会, コードレビュー, お互いをリスペクトする姿勢 • 日本側メンバーはFlutterをこれから学習する • => アプローチ：勉強会, コードレビューなど • 不具合なく, できるだけ早くリリースしてほしい • => アプローチ：リグレッションテストの見直し, 社内Betaテスト実施など
27. 出前館アプリ Rearchitectの取り組み 非機能要件 • Flutter版は韓国チームで先行して進め, 徐々に日本チームも合流 • => アプローチ：勉強会, コードレビュー, お互いをリスペクトする姿勢 • 日本側メンバーはFlutterをこれから学習する • => アプローチ：勉強会, コードレビューなど • 不具合なく, できるだけ早くリリースしてほしい • => アプローチ：リグレッションテストの見直し, 社内Betaテスト実施など 汎用性の高いアプ ローチのご紹介
28. 出前館アプリ Rearchitectの取り組み これらも今後何かし らの形でアウトプッ トします [余談] 苦労したこと • React Nativeにおけるステート管理をFlutterらしいステート管理へ • TypeScriptからDartへの書き換え • 読み替えをする作業に苦労した • React Native(React)とFlutterの両方に精通することは容易ではない・・・ • 言語特性の違いへの対応 • 韓国チームがすでにFlutterでの開発に慣れていたことが助けになった
29. 出前館アプリ Rearchitectの取り組み 非機能要件 • Flutter版は韓国チームで先行して進め, 徐々に日本チームも合流 • => アプローチ：勉強会, コードレビュー, お互いをリスペクトする姿勢 • 日本側メンバーはFlutterをこれから学習する • => アプローチ：勉強会, コードレビューなど • 不具合なく, できるだけ早くリリースしてほしい • => アプローチ：リグレッションテストの見直し, 社内Betaテスト実施など 本題に戻り, 汎用性の高いアプ ローチのご紹介
30. 出前館アプリ Rearchitectの取り組み リグレッションテストの見直し • モチベーション • 先行事例(どんなベストプラクティスがあるか) • テストケースへの不安(ex. テスト観点の不足) • Rearchitectをしたプロダクトの品質保証(QA) • ソフトウェアが巨大になるにつれ, テストケースも増える => 全てのリグレッションテストをすることが困難に • テストの効果を引き出すためのアプローチ • Test Suite Minimization • Test Case Selection • Test Case Prioritization 何らかの指標でテスト ケースを評価すること で効果を引き出す Y. Shin, and M. Harman, "Regression testing minimization, selection and prioritization: a survey," Software testin g, Verification and Reliability, vol. 22, no. 2, pp. 67-120, 2013.
31. 出前館アプリ Rearchitectの取り組み リグレッションテストの見直し Test Planning Test Analysis Test Design Test Implementation Test Execution • スケジュール立案 • コスト試算 • ページ/機能単位 でスコアリング • スコアリング結果 を用いた優先度決 定 • ハイレベルテスト ケース作成 • テスト観点すり合 わせ • テストケース実装 • テストケース修正 テスト実施 次のページ/機能を 見直し
32. 出前館アプリ Rearchitectの取り組み リグレッションテストの見直し Test Planning Test Analysis Test Design Test Implementation Test Execution • スケジュール立案 • コスト試算 • ページ/機能単位 でスコアリング • スコアリング結果 を用いた優先度決 定 • ハイレベルテスト ケース作成 • テスト観点すり合 わせ • テストケース実装 • テストケース修正 テスト実施 次のページ/機能を 見直し 以降は赤枠内の作業 詳細をご説明します
33. 出前館アプリ Rearchitectの取り組み リグレッションテストの見直し Test Planning Test Analysis Test Design Test Implementation Test Execution • スケジュール立案 • コスト試算 • ページ/機能単位 でスコアリング • スコアリング結果 を用いた優先度決 定 • ハイレベルテスト ケース作成 • テスト観点すり合 わせ • テストケース実装 • テストケース修正 テスト実施 次のページ/機能を 見直し
34. 出前館アプリ Rearchitectの取り組み リグレッションテストの見直し: Test Analysis • 成果物：ページ/機能単位のスコアリング結果 【評価式】 スコア = 係数1 * metrics1 + 係数2 * metrics2 + 係数3 * metrics3 Page/Fe ature Incident Probabil ity Compl exity Frequen cy of use Result 店舗 ページ 1 2 2 💡 店舗一 覧ペー ジ 2 2 2 💡 ・・・ ・・・ ・・・ ・・・ ・・・ 集計結果 例 metrics1: Incident Probability(過去障害の分析結果利用) metrics2: Complexity(コード解析結果を利用) metrics3: Frequency of Use, (主なユースケース結果を利用)
35. 出前館アプリ Rearchitectの取り組み リグレッションテストの見直し: Test Analysis • スコアリング：Incident probability Incident/Bug Page/Feature Importance 20230413_xx機 能不具合報告書 • 店舗ページ • レビュー表 示機能 ☆ 20230713_QA_xx 機能不具合チ ケット • 店舗一覧 ページ • 店舗カード ☆☆ ・・・ ・・・ ・・・ 例 過去資産を生かし, 不具 合が発生しやすいペー ジ, 機能をリスト化 Page/Feature Importance 店舗ページ ☆ 店舗一覧ページ ☆☆ ・・・ ・・・ スコアリング結果例 • 3段階で評価 • ☆：発見後, 数日以内に修正リリース • ☆ ☆：発見後, 翌日以降に修正リリース • ☆ ☆ ☆：発見後, 即時修正リリース • 過去の障害, QA時のバグ情報を参照 • 不具合報告書 • QA時のバグチケット
36. 出前館アプリ Rearchitectの取り組み リグレッションテストの見直し: Test Analysis • スコアリング：Complexity Page/Feature Importance 店舗ページ ☆ 店舗一覧ページ ☆☆ ・・・ ・・・ 例 扱う状態の多いと複雑 さは増していく • 3段階で評価 • 状態の多寡でスコアリング • Dart Class Diagram Generatorを利用 • クラス図を参照し, 相対的にスコアを決定 • 手順1: 基準値の決定 (任意のPage/Featur eのImportanceを決定) • 手順2: 基準値を参照し, 他Page/Feature のImportanceを決定
37. 出前館アプリ Rearchitectの取り組み リグレッションテストの見直し: Test Analysis • スコアリング：Frequency of use ユースケース Importance 関係する Page/Feature 新規会員が登録し て注文をする ☆ • 会員登録ページ • ・・・ 既存ユーザがクー ポンを使いクレ ジットカード決済 で注文する ☆☆ • 店舗一覧ページ • クレジット決済 機能 • ・・・ ・・・ ・・・ ・・・ ユースケース例 Page/Feature Importance 店舗ページ ☆ 店舗一覧ページ ☆☆ ・・・ ・・・ スコアリング結果例 基準値を参照し, スコアリ ング • 3段階で評価 • ユースケースを用いたスコアリング • 手順1: ユースケース作成 • 手順2: ユースケースの重要度決定 • 手順3: 基準値を参照し, 各ページ, Featureをス コアリング
38. 出前館アプリ Rearchitectの取り組み リグレッションテストの見直し: Test Analysis Page/Fea ture Incident Probabilit y Complex ity Frequenc y of use Result 店舗ペー ジ 1 2 2 💡 店舗一覧 ページ 2 2 2 💡 ・・・ ・・・ ・・・ ・・・ ・・・ 算出結果 例 弊社のケースでは, 納得 のいく順序になってい ました • 各ページ, 機能ごとにスコアリングができ, 優先度付ができるように • 重要または不具合の出やすい機能, ページ から順にテストケースの見直しが可能 • 成果物：ページ/機能単位のスコアリング結果 【評価式】 スコア = 係数1 * metrics1 + 係数2 * metrics2 + 係数3 * metrics3 metrics1: Incident Probability(過去障害の分析結果利用) metrics2: Complexity(コード解析結果を利用) metrics3: Frequency of Use, (主なユースケース結果を利用)
39. 出前館アプリ Rearchitectの取り組み リグレッションテストの見直し Test Planning Test Analysis Test Design Test Implementation Test Execution • スケジュール立案 • コスト試算 • ページ/機能単位 でスコアリング • スコアリング結果 を用いた優先度決 定 • ハイレベルテスト ケース作成 • テスト観点すり合 わせ • テストケース実装 • テストケース修正 テスト実施 次のページ/機能を 見直し 優先度付したリスト を参照し, 順番にテス トケースを見直す
40. 出前館アプリ Rearchitectの取り組み リグレッションテストの見直し: Test Design, Test Implementation • 成果物: UML Testing Profile(UTP), テストケース • 進め方: 優先度順の高いページ, 機能に関するハイレ ベルテストケース, テスト観点のすり合わせを行う • 毎週1回の定例実施 w/QAチーム • UTPを用い, 認識合わせ(主にテスト要求とテス ト要件) • テストケースの抜け漏れがあれば修正
41. 出前館アプリ Rearchitectの取り組み リグレッションテストの見直し: Test Design, Test Implementation • 成果物: UML Testing Profile(UTP), テストケース UTP利用は初トライで したが難解でし た・・・ <Test Objective> クーポン適用時の表記仕様との 合致を確認する <Test Requirement> クーポンが正しく適用される <Test Requirement> 表示される値引き内容が, クー ポン設定内容と合致する <Test Requirement> 無効なクーポン適用時, アラー トダイアログが出る クーポン適用表示テスト UTPでテスト要求をモデル化した例
42. 出前館アプリ Rearchitectの取り組み リグレッションテストの見直し: Test Design, Test Implementation Test Planning Test Analysis Test Design Test Implementation Test Execution 約3ヶ月ほど優先度順 に見直しを実施 6月 9月 5月 11月 チームビルディング QA開始 リリース
43. 結果どうだったの？👀
44. 出前館アプリ Rearchitectの取り組み バグ件数が順調 に収束
45. 順調に開発が進み, 11/7リリース🎉 他にも様々な工夫が あった上での成果 🙆
46. 自己紹介 出前館のご紹介 これまでの取り組み 出前館アプリRearchitectの取り組み まとめ 01 02 03 04 05 Contents
47. まとめ MISSION テクノロジーで時間価値を高める VISION 地域の人々の幸せをつなぐライフインフラ VALUE ホスピタリティ チャレンジ クリエイティビティ
48. まとめ 主なアプリの利用技術変遷 • 加盟店向けアプリ Xamarin • ドライバー向けアプリ React Native • 出前館アプリ(エンドユーザ向け) React Native • 加盟店向けアプリ Xamarin Flutter • ドライバー向けアプリ React Native Flutter • 出前館アプリ(エンドユーザ向け) React Native Flutter
49. まとめ 非機能要件 • コードフリーズ期間を設けることは難しい • Flutter版の開発と既存React Native版への機能追加を並行する • Flutter版は韓国チームで先行して進め, 徐々に日本チームも合流 • 日本側メンバーはFlutterをこれから学習する • 不具合なく, できるだけ早くリリースする 機能要件 • 既存React Native版と同様の機能を提供する 出前館アプリ Rearchitectの取り組み
50. まとめ ~リグレッションテストの見直し~ Test Planning Test Analysis Test Design Test Implementation Test Execution • スケジュール立案 • コスト試算 • ページ/機能単位 でスコアリング • スコアリング結果 を用いた優先度決 定 • ハイレベルテスト ケース作成 • テスト観点すり合 わせ • テストケース実装 • テストケース修正 テスト実施 次のページ/機能を 見直し 出前館アプリ Rearchitectの取り組み
51. まとめ 他にも様々な工夫が あった上での成果 🙆
52. THANK YOU