第二十七回岡山モバイルアプリ開発もくもく会

1. iOSでMVVM 入門
第二十七回岡山モバイルアプリ開発もくもく会
7/22 石川 諒

2. 自己紹介
• 名前 : 石川諒 (イシカワ アキラ)
• 中国職業能力開発大学校 ４年生
• twitter : ishikawa__pro
• GitHub : ishikawa-pro
• 好きな言語 : Swift
• 最近はRailsが多め💦

3. MVVM + RxSwiftに
入門した話

4. MVVMとは？
• アーキテクチャの一つ
• Model-View-ViewModel の略
• MVC(Model-View-Controller)の派生パターン
• iOSはMVCパターンが基本

5. iOSの基本的なアーキテクチャ
• iOSにはUIViewControllerという内部構造の基盤と
なるクラスが必ず１つある
• １つのViewControllerで管理するもの
• ビューの管理
• イベントの処理
• Modelとのデータのやりとり
• 別の View Controller への移行etc…
1つのViewController

6. iOSのMVC
• ほぼどんな作業もVCが起点
ViewController

7. つまり

8. MVC =
Model View Controller
Massive View Controller

9. そこでMVVM

10. MVVMの各レイヤの役割
• Viewの役割
• ViewModel の持つ状態を UI に反映する
• UIイベントをViewModelに通知
• MVVMではUIViewControllerがViewの役割を
担う
View ViewModel
UI Event
Data
BindingViewController
を使う

11. MVVMの各レイヤの役割
• ViewModelの役割
• Viewの状態を持つ
• UI イベントに応じて処理を行う
• 状態が更新されたら View に伝える
View ViewModel
UI Event
Data
Binding

12. MVVMの各レイヤの役割
• Modelの役割
• ViewModelからRequestされたらデータを返
す
• 基本的にはMVCとあまり変わらない
ViewModel Model
Request
Data

13. MVVM
View
ViewModel
Model
UI Event
Data
Binding
RequestData
ViewControllerを使う

14. MVCとMVVMの比較
MVC MVVM
ViewController View
ViewModel
Model
ViewController

15. MVCとMVVMでVCの責務の比較
• ビューの管理
• イベントの処理
• Modelとのデータの
やりとり
• 別の
ViewController へ
の移行 etc…
• ViewModel の持つ
状態を UI に反映
する
• UIイベントを
ViewModelに通知
MVC MVVM

16. MVVMメリット
• 各レイヤの責務がMVCよりはっきりする
• レイヤ間のデータフローが分かりやすい
• レイヤ間が疎結合になり、テストも書きやす
い
• Massive ViewControllerが改善される

17. MVVMデメリット
• iOSのMVVMには,RxSwiftが不可欠だがRxSwift
の学習コストが高い(RxSwiftの話はまた今度)
• RxSwiftでのUITableViewや
UICollectionViewの管理はさらに学習コス
トが高い
• ViewModelが肥大化する

18. MVCからMVVMへ移行した理由
• バックエンドをFirebaseを使って、MVCで
PodcastPlayerを作っていた
• 1画面実装するのに何個もFirestoreからデー
タを取りにいかなくてはならず、コールバッ
ク地獄になるし、且つViewの状態管理をする
のでMVCの限界を感じた

19. 非同期で3つのデータを
とりにいって、Viewに反映
購読管理もFirestoreなの
で
ボタンを押すたびに通信し
て状態を反映させる必要が
ある
Podcastの詳細画面

20. 移行してみて感じたこと
• MVCの限界を感じてMVVMに移ると、アーキテク
チャの違いとかメリットがよくわかった
• RxSwiftは確かに難しいけど楽しい
• 今は超MassiveVCな所と新しい画面は、MVVMで
実装して、その他は少しずつMVVMへ移行予定