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.6k
スタサプ ForSCHOOLアプリのシンプルな設計
2024/10/08に、Flutter技術構成を紐解く クロスプラットフォーム開発の裏側で発表した、koji-1009の資料です。
Recruit
PRO
October 07, 2024
Tweet
Share
More Decks by Recruit
See All by Recruit
Browser
recruitengineers
PRO
8
2.2k
JavaScript 研修
recruitengineers
PRO
6
1.4k
TypeScript入門
recruitengineers
PRO
35
11k
モダンフロントエンド 開発研修
recruitengineers
PRO
10
6.2k
Webアクセシビリティ入門
recruitengineers
PRO
3
1.5k
攻撃と防御で実践するプロダクトセキュリティ演習~導入パート~
recruitengineers
PRO
4
1.8k
モバイルアプリ研修
recruitengineers
PRO
5
1.7k
事業価値と Engineering
recruitengineers
PRO
8
5.4k
制約理論(ToC)入門
recruitengineers
PRO
9
3.7k
Other Decks in Technology
See All in Technology
DDD集約とサービスコンテキスト境界との関係性
pandayumi
2
230
Vault meets Kubernetes
mochizuki875
0
170
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
260
Nstockの一人目エンジニアが 3年間かけて向き合ってきた セキュリティのこととこれから〜あれから半年〜
yo41sawada
0
180
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
0
150
シークレット管理だけじゃない!HashiCorp Vault でデータ暗号化をしよう / Beyond Secret Management! Let's Encrypt Data with HashiCorp Vault
nnstt1
3
130
データアナリストからアナリティクスエンジニアになった話
hiyokko_data
2
320
エラーとアクセシビリティ
schktjm
0
360
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
170
AI時代に非連続な成長を実現するエンジニアリング戦略
sansantech
PRO
3
940
Grafana Meetup Japan Vol. 6
kaedemalu
1
200
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
8
2.9k
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
4 Signs Your Business is Dying
shpigford
184
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Done Done
chrislema
185
16k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Producing Creativity
orderedlist
PRO
347
40k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
The Invisible Side of Design
smashingmag
301
51k
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!