Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
スタサプ ForSCHOOLアプリのシンプルな設計
Search
Recruit
PRO
October 07, 2024
Technology
4
1.5k
スタサプ ForSCHOOLアプリのシンプルな設計
2024/10/08に、Flutter技術構成を紐解く クロスプラットフォーム開発の裏側で発表した、koji-1009の資料です。
Recruit
PRO
October 07, 2024
Tweet
Share
More Decks by Recruit
See All by Recruit
問題解決に役立つ数理工学
recruitengineers
PRO
9
2.4k
Curiosity & Persistence
recruitengineers
PRO
2
140
結果的にこうなった。から見える メカニズムのようなもの。
recruitengineers
PRO
1
300
成長実感と伸び悩みからふりかえる キャリアグラフ
recruitengineers
PRO
1
120
リクルートの オンプレ環境の未来を語る
recruitengineers
PRO
3
130
LLMのプロダクト装着と独自モデル開発
recruitengineers
PRO
1
180
新規検索基盤でマッチング精度向上に挑む! ~『ホットペッパーグルメ』の開発事例 ビジネス編
recruitengineers
PRO
2
110
新規検索基盤でマッチング精度向上に挑む! ~『ホットペッパーグルメ』の開発事例 技術編
recruitengineers
PRO
0
110
大規模プロダクトにおける フロントエンドモダナイズの取り組み紹介
recruitengineers
PRO
5
110
Other Decks in Technology
See All in Technology
【2025年度新卒技術研修】100分で学ぶ サイバーエージェントのデータベース 活用事例とMySQLパフォーマンス調査
cyberagentdevelopers
PRO
3
6.1k
Micro Frontends: Necessity, Implementation, and Challenges
rainerhahnekamp
0
320
20250413_湘南kaggler会_音声認識で使うのってメルス・・・なんだっけ?
sugupoko
1
340
Webアプリを Lambdaで動かすまでに考えること / How to implement monolithic Lambda Web Application
_kensh
7
1.2k
”知のインストール”戦略:テキスト資産をAIの文脈理解に活かす
kworkdev
PRO
9
4.1k
10分でわかるfreeeのQA
freee
1
12k
DETR手法の変遷と最新動向(CVPR2025)
tenten0727
2
1k
データベースで見る『家族アルバム みてね』の変遷 / The Evolution of Family Album Through the Lens of Databases
kohbis
4
1.1k
Tokyo dbt Meetup #13 dbtと連携するBI製品&機能ざっくり紹介
sagara
0
420
「それはhowなんよ〜」のガイドライン #orestudy
77web
9
2.4k
いつも初心者向けの記事に助けられているので得意分野では初心者向けの記事を書きます
toru_kubota
2
260
ソフトウェア開発現代史: "LeanとDevOpsの科学"の「科学」とは何か? - DORA Report 10年の変遷を追って - #DevOpsDaysTokyo
takabow
0
190
Featured
See All Featured
KATA
mclloyd
29
14k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.5k
Optimizing for Happiness
mojombo
377
70k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
640
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Designing for Performance
lara
607
69k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
The Cult of Friendly URLs
andyhume
78
6.3k
Transcript
#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化した際に利用 •
1年強の期間を経て、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!