Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

大事なお知らせ📣

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

さて, どう進めるか🤔

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

さて, どう進めるか🤔

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

出前館アプリ 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.

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

出前館アプリ 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, (主なユースケース結果を利用)

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

出前館アプリ 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, (主なユースケース結果を利用)

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

結果どうだったの？👀

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

THANK YOU