Tech-Verse 2025で出前館アプリのFlutterへの移行プロジェクトとその設計(主に決済機能)について発表しました

こんにちは。出前館でエンドユーザー向けアプリ(コンシュマー向けアプリ)の開発を担当している野山です。

コンシュマー向けの出前館アプリは、ユーザーの皆さまが加盟店の商品を選び、注文するために使用され、2023年11月にはReact NativeからFlutterへの移行を行いました。

このFlutterへの移行について、Tech-Verse 2025で発表をしましたので、そちらについてお伝えできればと思います。

登壇の内容について

Flutterの簡単な説明を先にしますと、FlutterはGoogleが開発した クロスプラットフォームの モバイルアプリ開発フレームワークで、複雑な画面の描画でも高いパフォーマンスを発揮することや、モバイルアプリだけでなく、PCやWeb開発も可能であるという特徴があります。

今回の発表では、そのFlutterを出前館アプリに採用した理由と、Flutter版アプリの設計(主に決済機能視点)という2つテーマについて、解説しました。

ご興味がありましたら、登壇した時のアーカイブ動画が公開されていますのでご覧ください。

www.youtube.com

出前館の大変革:React NativeからFlutterへの大胆な移行戦略 / Demae-can's Tech Journey: From React Native to Flutter - Speaker Deck

Flutterの選定理由

我々がFlutterへの移行を決めた当時、現行のサービスを運用しながら移行することがうまくいくのか、エンジニアとしてアプリ開発をしていた私自身、若干の不安がありました。

それでも、出前館がFlutterへの移行を決めた当時の背景や移行のメリットについて、説明いたしました。

また、Flutter移行プロジェクト(React Native版アプリを運用しながら)のスケジュールと、実際にプロジェクトを進行する中で得られた知見についても、共有させていただきました。

我々と同じように技術の刷新を検討されている方にとっては、参考になることがあるかもしれません。

Flutter版アプリの設計(主に決済機能視点)

コンシュマー向けアプリは、画面の数が多く、仕様も複雑です(実際にアプリを触っていただくと、そこそこの規模のアプリだとわかると思います)。

これをFlutterへ移行する際には、既存の機能をFlutterでどう実現するのかのフィジビリティチェックと、状態管理やプロジェクトの構成をどうするかといった細かなものまで、Flutter版アプリの設計は入念に行いました。

発表の中では、検討したこれらの内容の説明と、私が担当する決済機能を例に挙げ、出前館の決済の一連の流れと、その流れの中で状態の変化について、解説しました。

注文手続き画面におけるState Management(発表スライドより引用)

登壇しての感想

オフライン登壇の醍醐味

発表内容の構成は、Flutterの選定理由とアプリ設計の2部構成になっており、Flutterの技術自体にはあまり深掘りしない技術的にライトな発表内容でしたが、登壇後には発表を聞いてくださった方から、感想だけでなく、技術的な質問をいくつもいただきました。

このように、さまざまな方とやり取りができるという登壇の醍醐味を味わえたことは、貴重な体験でした。

聞き手のことをもっと意識

私がこのようなカンファレンスで発表することは、今回が初めてでした。

事前の発表リハーサルを複数回、さまざまな方に協力していただき、完成度を上げたつもりではいたのですが、他の方の発表を見た時に、コンテンツの魅力以外にも、聞き手のことを意識した発表スキルについて参考になるところが多くありました。

今後さらに経験を積み、レベルアップしていきたいと思いました。

おわりに

以上、Tech-Verse 2025の登壇内容についてお伝えいたしました。

私たちはこのReact NativeからFlutterへの移行を「ゴール」ではなく「スタート」だと捉えています。

技術的な負債を解消し、組織として言語を統一することで、プロダクトの今後の成長の基盤ができたことを嬉しく思っています。

今後も、ユーザーの方には、出前館サービスを通じてより良い体験をしていただけるよう、サービスの進化・改善に努めていければと思います。