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

Transcript

1. 出前館におけるFlutterの現在と
   これから
   株式会社出前館 田中優之
   2023.11 @ FlutterKaigi
   

   View Slide

2. 大事なお知らせ📣
   

   View Slide

3. Flutterで再実装
   &リリースしました🎉
   

   View Slide

4. 自己紹介
   出前館のご紹介
   これまでの取り組み
   出前館アプリRearchitectの取り組み
   まとめ
   01
   02
   03
   04
   05
   Contents
   

   View Slide

5. 自己紹介
   出前館のご紹介
   これまでの取り組み
   出前館アプリRearchitectの取り組み
   まとめ
   01
   02
   03
   04
   05
   Contents
   

   View Slide

6. 田中 優之
   自己紹介
   • Webサービス開発ののち, アプリ開発を担当
   • ゲームアプリ
   • カーナビアプリ
   • 2020年4月 ～ 出前館を担当
   これまでの業務経験
   その他
   • 料理
   • 博士(ソフトウェア工学)
   株式会社出前館
   プロダクト本部コンシューマ部
   アプリ開発グループ
   グループマネージャ
   所属
   • LINEヤフー株式会社(京都オフィス所属)
   • 株式会社出前館へ出向
   

   View Slide

7. 自己紹介
   出前館のご紹介
   これまでの取り組み
   出前館アプリRearchitectの取り組み
   まとめ
   01
   02
   03
   04
   05
   Contents
   

   View Slide

8. 出前館のご紹介
   MISSION
   テクノロジーで時間価値を高める
   VISION
   地域の人々の幸せをつなぐライフインフラ
   VALUE
   ホスピタリティ
   チャレンジ
   クリエイティビティ
   

   View Slide

9. 出前館のご紹介
   弊社サーバ
   加盟店
   配達
   ご注文
   注文情報
   注文情報
   商品受取
   

   View Slide

10. 出前館のご紹介
    [大阪/京都]
    サーバ/アプリ
    [福岡/鹿児島]
    QA/CS
    [東京]
    サーバ/アプリ
    /QA/企画
    • オンラインで密に連携
    • KRチームとも連携
    • アプリエンジニア 20人ほど(KRチーム含む)
    

    View Slide

11. 自己紹介
    出前館のご紹介
    これまでの取り組み
    出前館アプリRearchitectの取り組み
    まとめ
    01
    02
    03
    04
    05
    Contents
    

    View Slide

12. これまでの取り組み
    主なアプリの利用技術変遷
    2020年頃の利用技術
    • 加盟店向けアプリ Xamarin
    • ドライバー向けアプリ React Native
    • 出前館アプリ(エンドユーザ向け) React Native
    

    View Slide

13. これまでの取り組み
    主なアプリの利用技術変遷
    現在の利用技術
    • 加盟店向けアプリ Xamarin
    • ドライバー向けアプリ React Native
    • 出前館アプリ(エンドユーザ向け) React Native
    • 加盟店向けアプリ Xamarin Flutter
    • ドライバー向けアプリ React Native Flutter
    • 出前館アプリ(エンドユーザ向け) React Native Flutter
    

    View Slide

14. View Slide

15. これまでの取り組み
    主なアプリの利用技術変遷
    • 加盟店向けアプリ Xamarin
    • ドライバー向けアプリ React Native
    • 出前館アプリ(エンドユーザ向け) React Native
    • 加盟店向けアプリ Xamarin Flutter
    • ドライバー向けアプリ React Native Flutter
    • 出前館アプリ(エンドユーザ向け) React Native Flutter
    以降は出前館アプリ
    のお話をします
    

    View Slide

16. 自己紹介
    出前館のご紹介
    これまでの取り組み
    出前館アプリRearchitectの取り組み
    まとめ
    01
    02
    03
    04
    05
    Contents
    

    View Slide

17. 出前館アプリ Rearchitectの取り組み
    モチベーション
    => 組織が利用する技術を統一し、アウトプットを最大化
    多くの議論をした結果, 組織として進む方向を決定
    • 状況に応じたアプリエンジニアのアサインの柔軟さ
    • 利用技術統一によるナレッジ共有の効率化
    • Flutterへの期待, 新しい技術への好奇心
    背景として, すでに他ア
    プリでFlutterを利用して
    いたことがあります
    

    View Slide

18. さて, どう進めるか🤔
    

    View Slide

19. さて, どう進めるか🤔
    多くの新規案件
    多数の決済方法
    スケジュール調整
    Flutterの学習
    事業への影響
    TypeScriptからDartへ
    

    View Slide

20. 出前館アプリ Rearchitectの取り組み
    非機能要件
    • コードフリーズ期間を設けることは難しい
    • Flutter版の開発と既存React Native版への機能追加を並行する
    • Flutter版は韓国チームで先行して進め, 徐々に日本チームも合流
    • 日本側メンバーはFlutterをこれから学習する
    • 不具合なく, できるだけ早くリリースする
    機能要件
    • 既存React Native版と同様の機能を提供する
    

    View Slide

21. さて, どう進めるか🤔
    

    View Slide

22. View Slide

23. 銀の弾丸はない,
    まずはチームビルディングから
    

    View Slide

24. 出前館アプリ Rearchitectの取り組み
    React N
    ative
    Flutter
    hotfix対応
    リリース
    機能改修(決済) 機能改修(クーポン)
    2月
    QA開始
    社内Betaテスト
    チームビルディング
    5月 9月 10月 11月
    

    View Slide

25. 出前館アプリ Rearchitectの取り組み
    非機能要件
    特別なアプローチは
    なく, できることを一
    つずつ実施
    • コードフリーズ期間を設けることは難しい
    • => アプローチ：案件調整, リリーススケジュール管理, 差分管理など
    • Flutter版の開発とReact Native版への機能追加を並行する
    • => アプローチ：リリーススケジュール管理, 差分管理など
    

    View Slide

26. 出前館アプリ Rearchitectの取り組み
    非機能要件
    特別なアプローチは
    なく, できることを一
    つずつ実施
    • Flutter版は韓国チームで先行して進め, 徐々に日本チームも合流
    • => アプローチ：勉強会, コードレビュー, お互いをリスペクトする姿勢
    • 日本側メンバーはFlutterをこれから学習する
    • => アプローチ：勉強会, コードレビューなど
    • 不具合なく, できるだけ早くリリースしてほしい
    • => アプローチ：リグレッションテストの見直し, 社内Betaテスト実施など
    

    View Slide

27. 出前館アプリ Rearchitectの取り組み
    非機能要件
    • Flutter版は韓国チームで先行して進め, 徐々に日本チームも合流
    • => アプローチ：勉強会, コードレビュー, お互いをリスペクトする姿勢
    • 日本側メンバーはFlutterをこれから学習する
    • => アプローチ：勉強会, コードレビューなど
    • 不具合なく, できるだけ早くリリースしてほしい
    • => アプローチ：リグレッションテストの見直し, 社内Betaテスト実施など
    汎用性の高いアプ
    ローチのご紹介
    

    View Slide

28. 出前館アプリ Rearchitectの取り組み
    これらも今後何かし
    らの形でアウトプッ
    トします
    [余談] 苦労したこと
    • React Nativeにおけるステート管理をFlutterらしいステート管理へ
    • TypeScriptからDartへの書き換え
    • 読み替えをする作業に苦労した
    • React Native(React)とFlutterの両方に精通することは容易ではない・・・
    • 言語特性の違いへの対応
    • 韓国チームがすでにFlutterでの開発に慣れていたことが助けになった
    

    View Slide

29. 出前館アプリ Rearchitectの取り組み
    非機能要件
    • Flutter版は韓国チームで先行して進め, 徐々に日本チームも合流
    • => アプローチ：勉強会, コードレビュー, お互いをリスペクトする姿勢
    • 日本側メンバーはFlutterをこれから学習する
    • => アプローチ：勉強会, コードレビューなど
    • 不具合なく, できるだけ早くリリースしてほしい
    • => アプローチ：リグレッションテストの見直し, 社内Betaテスト実施など
    本題に戻り,
    汎用性の高いアプ
    ローチのご紹介
    

    View Slide

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.
    

    View Slide

31. 出前館アプリ Rearchitectの取り組み
    リグレッションテストの見直し
    Test Planning Test Analysis Test Design
    Test
    Implementation
    Test Execution
    • スケジュール立案
    • コスト試算
    • ページ/機能単位
    でスコアリング
    • スコアリング結果
    を用いた優先度決
    定
    • ハイレベルテスト
    ケース作成
    • テスト観点すり合
    わせ
    • テストケース実装
    • テストケース修正
    テスト実施
    次のページ/機能を
    見直し
    

    View Slide

32. 出前館アプリ Rearchitectの取り組み
    リグレッションテストの見直し
    Test Planning Test Analysis Test Design
    Test
    Implementation
    Test Execution
    • スケジュール立案
    • コスト試算
    • ページ/機能単位
    でスコアリング
    • スコアリング結果
    を用いた優先度決
    定
    • ハイレベルテスト
    ケース作成
    • テスト観点すり合
    わせ
    • テストケース実装
    • テストケース修正
    テスト実施
    次のページ/機能を
    見直し
    以降は赤枠内の作業
    詳細をご説明します
    

    View Slide

33. 出前館アプリ Rearchitectの取り組み
    リグレッションテストの見直し
    Test Planning Test Analysis Test Design
    Test
    Implementation
    Test Execution
    • スケジュール立案
    • コスト試算
    • ページ/機能単位
    でスコアリング
    • スコアリング結果
    を用いた優先度決
    定
    • ハイレベルテスト
    ケース作成
    • テスト観点すり合
    わせ
    • テストケース実装
    • テストケース修正
    テスト実施
    次のページ/機能を
    見直し
    

    View Slide

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, (主なユースケース結果を利用)
    

    View Slide

35. 出前館アプリ Rearchitectの取り組み
    リグレッションテストの見直し: Test Analysis
    • スコアリング：Incident probability
    Incident/Bug Page/Feature Importance
    20230413_xx機
    能不具合報告書
    • 店舗ページ
    • レビュー表
    示機能
    ☆
    20230713_QA_xx
    機能不具合チ
    ケット
    • 店舗一覧
    ページ
    • 店舗カード
    ☆☆
    ・・・ ・・・ ・・・
    例
    過去資産を生かし, 不具
    合が発生しやすいペー
    ジ, 機能をリスト化
    Page/Feature Importance
    店舗ページ ☆
    店舗一覧ページ ☆☆
    ・・・ ・・・
    スコアリング結果例
    • 3段階で評価
    • ☆：発見後, 数日以内に修正リリース
    • ☆ ☆：発見後, 翌日以降に修正リリース
    • ☆ ☆ ☆：発見後, 即時修正リリース
    • 過去の障害, QA時のバグ情報を参照
    • 不具合報告書
    • QA時のバグチケット
    

    View Slide

36. 出前館アプリ Rearchitectの取り組み
    リグレッションテストの見直し: Test Analysis
    • スコアリング：Complexity
    Page/Feature Importance
    店舗ページ ☆
    店舗一覧ページ ☆☆
    ・・・ ・・・
    例
    扱う状態の多いと複雑
    さは増していく
    • 3段階で評価
    • 状態の多寡でスコアリング
    • Dart Class Diagram Generatorを利用
    • クラス図を参照し, 相対的にスコアを決定
    • 手順1: 基準値の決定 (任意のPage/Featur
    eのImportanceを決定)
    • 手順2: 基準値を参照し, 他Page/Feature
    のImportanceを決定
    

    View Slide

37. 出前館アプリ Rearchitectの取り組み
    リグレッションテストの見直し: Test Analysis
    • スコアリング：Frequency of use
    ユースケース Importance
    関係する
    Page/Feature
    新規会員が登録し
    て注文をする
    ☆ • 会員登録ページ
    • ・・・
    既存ユーザがクー
    ポンを使いクレ
    ジットカード決済
    で注文する
    ☆☆
    • 店舗一覧ページ
    • クレジット決済
    機能
    • ・・・
    ・・・ ・・・ ・・・
    ユースケース例
    Page/Feature Importance
    店舗ページ ☆
    店舗一覧ページ ☆☆
    ・・・ ・・・
    スコアリング結果例
    基準値を参照し, スコアリ
    ング
    • 3段階で評価
    • ユースケースを用いたスコアリング
    • 手順1: ユースケース作成
    • 手順2: ユースケースの重要度決定
    • 手順3: 基準値を参照し, 各ページ, Featureをス
    コアリング
    

    View Slide

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, (主なユースケース結果を利用)
    

    View Slide

39. 出前館アプリ Rearchitectの取り組み
    リグレッションテストの見直し
    Test Planning Test Analysis Test Design
    Test
    Implementation
    Test Execution
    • スケジュール立案
    • コスト試算
    • ページ/機能単位
    でスコアリング
    • スコアリング結果
    を用いた優先度決
    定
    • ハイレベルテスト
    ケース作成
    • テスト観点すり合
    わせ
    • テストケース実装
    • テストケース修正
    テスト実施
    次のページ/機能を
    見直し
    優先度付したリスト
    を参照し, 順番にテス
    トケースを見直す
    

    View Slide

40. 出前館アプリ Rearchitectの取り組み
    リグレッションテストの見直し: Test Design, Test Implementation
    • 成果物: UML Testing Profile(UTP), テストケース
    • 進め方: 優先度順の高いページ, 機能に関するハイレ
    ベルテストケース, テスト観点のすり合わせを行う
    • 毎週1回の定例実施 w/QAチーム
    • UTPを用い, 認識合わせ(主にテスト要求とテス
    ト要件)
    • テストケースの抜け漏れがあれば修正
    

    View Slide

41. 出前館アプリ Rearchitectの取り組み
    リグレッションテストの見直し: Test Design, Test Implementation
    • 成果物: UML Testing Profile(UTP), テストケース
    UTP利用は初トライで
    したが難解でし
    た・・・
    
    クーポン適用時の表記仕様との
    合致を確認する
    
    クーポンが正しく適用される
    
    表示される値引き内容が, クー
    ポン設定内容と合致する
    
    無効なクーポン適用時, アラー
    トダイアログが出る
    クーポン適用表示テスト
    UTPでテスト要求をモデル化した例
    

    View Slide

42. 出前館アプリ Rearchitectの取り組み
    リグレッションテストの見直し: Test Design, Test Implementation
    Test Planning Test Analysis Test Design
    Test
    Implementation
    Test Execution
    約3ヶ月ほど優先度順
    に見直しを実施
    6月 9月
    5月 11月
    チームビルディング QA開始 リリース
    

    View Slide

43. 結果どうだったの？👀
    

    View Slide

44. 出前館アプリ Rearchitectの取り組み
    バグ件数が順調
    に収束
    

    View Slide

45. 順調に開発が進み, 11/7リリース🎉
    他にも様々な工夫が
    あった上での成果 🙆
    

    View Slide

46. 自己紹介
    出前館のご紹介
    これまでの取り組み
    出前館アプリRearchitectの取り組み
    まとめ
    01
    02
    03
    04
    05
    Contents
    

    View Slide

47. まとめ
    MISSION
    テクノロジーで時間価値を高める
    VISION
    地域の人々の幸せをつなぐライフインフラ
    VALUE
    ホスピタリティ
    チャレンジ
    クリエイティビティ
    

    View Slide

48. まとめ
    主なアプリの利用技術変遷
    • 加盟店向けアプリ Xamarin
    • ドライバー向けアプリ React Native
    • 出前館アプリ(エンドユーザ向け) React Native
    • 加盟店向けアプリ Xamarin Flutter
    • ドライバー向けアプリ React Native Flutter
    • 出前館アプリ(エンドユーザ向け) React Native Flutter
    

    View Slide

49. まとめ
    非機能要件
    • コードフリーズ期間を設けることは難しい
    • Flutter版の開発と既存React Native版への機能追加を並行する
    • Flutter版は韓国チームで先行して進め, 徐々に日本チームも合流
    • 日本側メンバーはFlutterをこれから学習する
    • 不具合なく, できるだけ早くリリースする
    機能要件
    • 既存React Native版と同様の機能を提供する
    出前館アプリ Rearchitectの取り組み
    

    View Slide

50. まとめ
    ~リグレッションテストの見直し~
    Test Planning Test Analysis Test Design
    Test
    Implementation
    Test Execution
    • スケジュール立案
    • コスト試算
    • ページ/機能単位
    でスコアリング
    • スコアリング結果
    を用いた優先度決
    定
    • ハイレベルテスト
    ケース作成
    • テスト観点すり合
    わせ
    • テストケース実装
    • テストケース修正
    テスト実施
    次のページ/機能を
    見直し
    出前館アプリ Rearchitectの取り組み
    

    View Slide

51. まとめ
    他にも様々な工夫が
    あった上での成果 🙆
    

    View Slide

52. THANK YOU
    

    View Slide