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
複雑なアプリをRedux+MVVMで完璧に制御する
Search
ANDPAD inc
April 05, 2021
Programming
0
1k
複雑なアプリをRedux+MVVMで完璧に制御する
2021/03/24 ANDPAD TechLive #8 iOS/AndroidアプリエンジニアTalk!!
ANDPAD inc
April 05, 2021
Tweet
Share
More Decks by ANDPAD inc
See All by ANDPAD inc
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
260
読もう! Android build ドキュメント
andpad
1
390
アンドパッドにおける CocoaPods ライブラリ群の SwiftPackageManager への移行戦略
andpad
0
180
Flutter は DCM が 9 割
andpad
1
270
Amplify で SPA をホスティングする際の注意点
andpad
1
240
マルチプロダクト開発の現場でAWS Security Hubを1年以上運用して得た教訓
andpad
0
110
rails stats で紐解く ANDPAD のイマを支える技術たち
andpad
1
530
本編では話さない Zig の話
andpad
2
350
"noncopyable types" の使いどころについて考えてみた
andpad
0
510
Other Decks in Programming
See All in Programming
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
860
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
270
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
250
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
340
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
480
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
540
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
160
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
190
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
690
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
230
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
For a Future-Friendly Web
brad_frost
179
9.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Agile that works and the tools we love
rasmusluckow
329
21k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Docker and Python
trallard
44
3.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Bash Introduction
62gerente
614
210k
Transcript
複雑なアプリを Redux + MVVMで 完璧に制御する Android/iOS/Flutter
自己紹介 柿森 隆生(Kakimori Takao) 2021/03/01 join Qiita: Urotea github: Urotea
興味のあるもの: rust, go, Flutter, Android, iOS, k8s, GCP, react 最近のトレンド: Flutter2.0面白そう 一言で表すなら: Redux芸人
宣伝 Android + Reduxアーキテクチャで状態管理が容易になった話 https://qiita.com/Urotea/items/8cbc8f55406b6ff32bbd Reduxの記事 on Qiita 本日の話でReduxに興味を持った方は是非
今回のお話 1 複雑なアプリはなぜ複雑なのか 2 複雑なものは抽象化して簡単にする 3 複雑なものをReduxで制御する 4 MVVMとReduxでアプリを制御する
結論 Reduxを使うと... - テストがしやすい - 複雑なアプリが整理される - 保守しやすくなる - レビューしやすい
0 Reduxって何?
アプリの状態管理に特化 したフレームワーク
引用: https://www.webopixel.net/javascript/1601.html 1. アプリ外部からのイベントが発火 2. 状態を書き換える 3. 状態が新しくなる 4. 画面に反映される
1 複雑なアプリはなぜ複雑なのか
複雑なアプリはなぜ複雑なのか 画面が多いから? 通信が多いから? 入力項目が多いから? 権限等ルールが多いから?
複雑なアプリはなぜ複雑なのか アプリの状態が複雑 画面が多いから 通信が多いから 入力項目が多いから? 権限等ルールが多いから
2 複雑なものは抽象化して簡単にする
アプリを抽象化して考える
アプリを抽象化して考える
これがアプリ
これがアプリ Action Action Action Action Action Reducer Reducer Reducer Reducer
Reducer State State State
3 複雑なものをReduxで制御する
Reduxで状態遷移を考える まずは簡単な状態遷移 State State Action Reducer
Reduxで状態遷移を考える まずは簡単な状態遷移 State State Action Reducer
これがRedux fun main(args: Array<String>) { val oldState = AppState(loggedIn =
false) val newState = loginReducer(oldState, Action.LoginCompleted) print(newState) } sealed class Action { object LoginCompleted: Action() {} } data class AppState(val loggedIn: Boolean) fun loginReducer(oldState: AppState, action: Action): AppState { return when(action) { is Action.LoginCompleted -> oldState.copy(loggedIn = true) } } State State Action Reducer
Reduxはテストが容易 fun main(args: Array<String>) { val oldState = AppState(loggedIn =
false) val newState = loginReducer(oldState, Action.LoginCompleted) print(newState) } sealed class Action { object LoginCompleted: Action() {} } data class AppState(val loggedIn: Boolean) fun loginReducer(oldState: AppState, action: Action): AppState { return when(action) { is Action.LoginCompleted -> oldState.copy(loggedIn = true) } } ただのオブジェクト ただのオブジェクト ただの純関数
まとめ アプリとは状態遷移機械である
まとめ Reduxは状態遷移機械を 記述するフレームワーク middlewareなどの細かい話は別の機会に
あれ?Viewはどこにいった?
Reduxは状態遷移機械を 記述するフレームワーク
Viewは専門外 別の仕組みでなんとかする!
4 MVVMとReduxでアプリを制御する
MVVM Model-View-ViewModel
MVVM 引用: https://developer.android.com/jetpack/guide?hl=ja View ViewModel Model
MVVM View ViewModel Model 画面を操作する場所 画面の状態を管理する場所 それ以外 - API通信 -
DB永続化 - ビジネスロジック
MVVM Viewを跨ぐ状態はどうする?
MVVM Viewに現れない状態はどうする?
MVVM View以外は専門外 別の仕組みでなんとかする!
MVVM + Redux Redux
MVVM Reduxを抽象化 oldState newState Action Reducer subscribe(Rx or coroutine) data
binding Redux
MVVM Reduxの具体例 oldState newState Action Reducer subscribe(Rx, coroutine) data binding
Redux View ViewModel Reducer ログインボタン クリック ログイン Action ログイン 完了状態 ・ボタンAを非表示 ・テキストBを表示
実際の言語ではどうする? iOS: ReSwift, RxSwift, RxCocoa Android: ReKotlin, Coroutine, DataBinding Flutter:
flutter_redux
詳しくは こんな所にReduxの記事とリポジトリが! Qiita: https://qiita.com/Urotea/items/8cbc8f55406b6ff32bbd Github: https://github.com/Urotea/flutter_template, https://github.com/Urotea/flutter_nfc_sample, https://github.com/Urotea/android-sample-app
で、実際のところどうなの? Q: プロダクションでの活用事例は? A: 開発人数2人。期間3カ月。WebViewやセンサに触りまくるアプリで実績あります。 Reduxに助けられっぱなしでした(ので、今話してます)。 Q: どのくらいの規模から使用したほうがよい? A: 保守しないなら不要。それ以外では検討価値あり。
Q: メリットは分かった。デメリットは? A: 初期学習コストが少々高い。Redux + Rx + モバイル特有の知識が要求される。 Q: Reduxって記述量やファイル数が増えて大変じゃない? A: 記述量が多いことはコーディングにおいて大した問題じゃない。 役割ごとにファイルが分割されることは gitを前提にするとメリット。