#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 スタサプ ForSCHOOLアプリの シンプルな設計 @koji-1009/株式会社リクルート Flutterの技術構成を紐解く クロスプラットフォーム開発の裏側

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 Wakamiya Koji (@koji-1009/@D_R_1009) ● Flutter歴そろそろ6年目 ● Android (9年)とiOS (6年)のモバイル畑育ち ● 6月に息子が生まれました！ 可愛い！ ● SNS ○ GitHub/Zenn: @koji-1009 ○ X(Twitter): @D_R_1009

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 スタディサプリ for SCHOOL

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 ● 2020年4月ごろにAndroid、iOSのネイティブアプリとしてリリース ● 生徒の進路選択をサポートするアプリ ○ 適性診断機能 ○ 学校検索、資料請求機能 ○ オープンキャンパス検索、予約機能 ● 進路選択のDX化を支援 スタディサプリ for SCHOOLのこれまで

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 ● Androidは2023年8月、iOSは2023年12月にFlutter化 ● 開発と運用の効率化が目的 ○ “やりたいこと”に対するリソースの不足 ○ プラットフォーム最適であるが故の“仕様差分” スタディサプリ for SCHOOLのこれまで Blog: https://blog.studysapuri.jp/entry//entry/2024/06/05/for-school-flutter-replace Android、iOSアプリをFlutterでリプレース！

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 ● Add-to-appで一部機能をFlutterで置き換えるところからスタート ○ Flutterのスキルをつけつつ、開発を止めない ○ Add-to-appのコードはFlutter化した際に利用 ● １年強の期間を経て、Flutter化を完遂 ○ Flutter版の機能はネイティブ版相当に スタディサプリ for SCHOOLのこれまで Blog: https://blog.studysapuri.jp/entry//entry/2024/06/05/for-school-flutter-replace

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 ● Vue.jsからFlutter Webに更新 ● モバイル版の開発チームがWeb版も対応予定 ○ モバイルとソースコードを90%以上共通化 ● 2024年度末から本格的に運用予定 ● 開発チームが全ての利用環境をサポートする ○ 学校ではWeb版の利用シーンが多い スタディサプリ for SCHOOLのこれから Flutter WebによるWeb版を提供

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 リプレースにあたって

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 ● Android、iOSでUIや仕様差分を作らない ○ 実装された仕様に差分があったが、リプレースに合わせて解消 ○ こだわりがある箇所のみOSによる分岐を実装 ● Kotlin、Swiftは書かない ○ 旧バージョンからのマイグレーション処理 ○ OSの差分はpluginで解消 リプレース方針

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 ● 端末の機能を使う箇所が少なかった ● KotlinとSwift、Dartで書くべき処理を適切に分離できた ● “シンプルな設計”を採用し、分岐や考慮するべき箇所を削減できた リプレースの成功要因

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 ● 端末の機能を使う箇所が少なかった ● KotlinとSwift、Dartで書くべき処理を適切に分離できた ● “シンプルな設計”を採用し、分岐や考慮するべき箇所を削減できた リプレースの成功要因

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 シンプルな設計

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 ● Repository layer ● Logic Layer ● Consumer Widget 設計上のシンプルさ レイヤー分割

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 ● Repository layer ○ Repository Provider ● Logic Layer ○ Logic Provider ○ Logic Notifier ● Consumer Widget 設計上のシンプルさ レイヤー分割

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 ● 単方向データフロー (UDF) を意識する ● App StateとEphemeral Stateを分割する ○ Riverpodで管理するのはApp Stateのみ ○ Widgetの状態はStatefulWidgetで管理する 設計上のシンプルさ

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 ● 共通化するべきUIは共通化する ○ 全体を通して共通化するべきものを共通化する ● StatelessWidgetをできるだけ利用する ○ “便利”でもStatefulなWidgetは共通化しない ○ UDFを意識していればConsumerWidgetは(ギリギリ)運用可能 ○ Tap時の処理などはFunctionにして外部から注入する Widgetのシンプルさ

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 ● 再生成を避けるよりも、意図せず状態が初期化されることを避ける ○ Widgetの再生成によるfps低下は起こりにくい ○ 描画の高速さはFlutterに任せる ● Router APIを採用する ○ 画面遷移、画面の初期値を宣言的に管理する ○ 画面をリロードしてもOKな状態を目指す Widgetのシンプルさ

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 Riverpod

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 ● ChangeNotifier & ListenableBuilderと仕組みが同じ ○ ListenableをProvider / Notifierに拡張している ○ “必要な時”に“必要なWidget”が再描画される ● Consumer系のWidgetは、全てStatefulWidgetの継承クラス ○ Riverpodの仕組みとFlutterの仕組みを接続しやすい Riverpodのいいところ

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 ● Logicの記述に関してはChangeNotifierより優秀 ○ 別のChangeNotifierを監視するのは難しい ○ Riverpodは別のProviderを容易に監視できる ● 記述力の高さが実装に与える影響が大きい ○ 複数のApp Stateを参照したProviderを作成できる ○ あるApp Stateを初期値とし、 ユーザー操作により更新される一時的なNotifierが作成できる Riverpodのいいところ

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 ● シンプルな構造を目指す ○ 構造がシンプルであれば、コードが多くても問題になりにくい ○ コード量が問題になるのであれば、モジュール分割を ● 複雑さを隠蔽しない ○ “複雑なこと”をシンプルな手法で愚直に実現する ○ Riverpodの標準的な振る舞いをベースにして設計する Riverpodのいいところを活かす

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 一言で言うなら

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 Flutter + Riverpodを信じる

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 ● 書きやすく、レビューしやすい構造にする ○ 開発者の負担を増やさないことが、安定した実装に繋がる ○ 理解しやすい構造は、新規メンバーにもうれしい ● Flutterは“十二分に”すごい ○ 普通に書けば、求める速度のアプリができる ○ Hot Reloadをはじめ、開発の手が止まらない工夫が随所に ● OS差分やスマートフォンの機能を使うのは控えめに ○ pluginがあっても、期待通りとは限らない…… 私たちの知見

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 募集してます https://www.recruit.co.jp/employment/mid-career/technology

#Flutter_findy スタサプ ForSCHOOLアプリのシンプルな設計 Thank you!