こんにちは、サービス開発部の森川 (@morishin127) です。主にクックパッドの iOS アプリの開発に携わっています。
日々アプリを開発する中で、近頃は最適なアーキテクチャとは何かを考えながら色々な形を試行錯誤しています。世の中で採用されているモバイルアプリのアーキテクチャには様々なものがあります。MVC, MVP, MVVM, VIPER, Clean Architecture などなど。開発している、あるいは開発しようとしているアプリケーションでどういったアーキテクチャを選択するかというのは難しい問題です。選択するためにはアーキテクチャに求める要件を定義する必要があります。この記事では私がアーキテクチャに求める要件と、それらをある程度満たすと考えた MVVM と Flux という2つのアーキテクチャで実装したサンプルを見つつその長所・短所について考えてみようと思います。
アーキテクチャに求める要件
アプリケーションの性質や開発チームの状況によって適したアーキテクチャが異なるため、モバイルのアプリのアーキテクチャには様々なアイデアがあります。クックパッドの iOS アプリはおよそ十数人程のメンバーで同時に開発しており、ある人の書いた実装を別の人が修正あるいは機能追加することも日常的に行われています。こういった開発体制の中で私がアーキテクチャに満たしてほしいと思う要件は下記のようなものです。
レイヤ毎の役割分担が明確
- 実装者によって実装の仕方がバラバラになるのを防ぐため
アプリケーションが持ちうる状態と状態遷移を人間が把握しやすい
- 想定外の状態はバグを生むため
レイヤ間が疎結合でありにユニットテストが書きやすい
- テストがあると安全に変更を加えられるため
Apple の UIKit には UIViewController というクラスがあり、素直に実装すると Model と ViewController の二層構造になります。この構造が悪いという話ではないのですが、機能が増え実装が複雑になっていくにつれ、上記の要件を満たすのが困難になってきます。
これらの要件を満しつつスケールしやすいアーキテクチャを考える中で、いわゆる MVVM というパターンと Flux というパターンに倣って簡単な画面を実装してみました。実際に作っているアプリケーションでは Model 層よりも Controller (あるいは ViewController) 層が肥大化することが多かったため、状態をどのように管理し UI に反映するかという View 寄りのロジックに工夫のあるこの2つを選択しました。それぞれの実装を見ながら長所・短所を考えていきます。
サンプルの実装には RxSwiftというライブラリを使っています。
サンプルの仕様
- 画面が表示されるとサーバーからデータを取得しリスト表示
- 末尾までスクロールすると続きのデータをサーバーから取得し表示
- リクエストエラー時にはアラートを表示
というシンプルなアプリケーションです。
MVVM
MVVM とは
Model-View-ViewModel の略で、下記のような3つのレイヤに役割を分割します。
- View
- ViewModel の持つ状態を UI に反映する
- UI イベントの発生を ViewModel に伝える
- ViewModel
- 状態を持つ
- UI イベントに応じたオペレーションを行う
- 状態が更新されたら View に伝える
- Model
- ViewModel からリクエストされたデータをデータソースから取得し整形して返す
実装
MVVM パターンで実装したサンプルコードです。以下で実装の概要を説明します。
ViewModel のコードの骨子はこのようになっています。
classViewModel { varmodels:Observable<[Model]>= Observable.empty() init(inputs: (refreshTrigger:Observable<Void>, loadMoreTrigger:Observable<Void>)) { // UI イベントのストリームをマージして一つのストリームにするletrequestTrigger:Observable<TriggerType>= Observable .merge( inputs.refreshTrigger.map { .refresh }, inputs.loadMoreTrigger.map { .loadMore } ) // UI イベントの種類に応じて API リクエストを行いレスポンスから models のストリームを生成する models = requestTrigger .flatMapFirst { [weak self] triggerType ->Observable<ModelRequest.Response>in// 中略: API リクエスト } .startWith([]) .shareReplay(1) } }
https://github.com/morishin/RxMVVMExample/blob/master/RxMVVMExample/ViewModel.swift
initでは View からの UI イベントが流れてくるストリームを受け取り、アプリケーションの状態を表すストリーム modelsを生成します。View は UI イベントの発生をストリームに流して ViewModel に伝え、また ViewModel の modelsを購読し変更があれば UI に反映します。
View (ViewController) からは下記のように ViewModel を生成し、 modelsを購読します。
overridefuncviewDidLoad() { super.viewDidLoad() // 一度目の viewWillAppear 時にイベントが流れるletrefreshTrigger= rx.sentMessage(#selector(viewWillAppear)) .take(1) .map { _ in } // 最後のセルが表示される時にイベントが流れるletloadMoreTrigger= tableView.rx.willDisplayCell .filter { [weak self] (cell, indexPath) ->BoolinguardletstrongSelf=selfelse { returnfalse } letisLastCell= indexPath.row == strongSelf.tableView.numberOfRows(inSection:indexPath.section) -1return isLastCell } .map { _ in } // UI イベントのストリームを渡して ViewModel を生成letviewModel= ViewModel(inputs: (refreshTrigger:refreshTrigger, loadMoreTrigger:loadMoreTrigger)) // ViewModel の状態を購読 viewModel.models .bind(to:tableView.rx.items(cellIdentifier:String(describing:UITableViewCell.self))) { (row, model, cell) in cell.textLabel?.text = model.name } .disposed(by:disposeBag) }
https://github.com/morishin/RxMVVMExample/blob/master/RxMVVMExample/ModelTableViewController.swift
サンプルでは modelsの他に networkStatesという状態を持ち、リクエスト中であるか、あるいはエラーが発生しているかという状態を View に伝え、インジケーターやアラートの表示を行っています。詳しくはリポジトリを御覧ください。
長所・短所
- 長所
- ViewController に集中しがちなロジックを ViewModel に切り出すことができ、役割分担がはっきりする
- ロジックを ViewModel に切り分けたことによりユニットテストが書きやすくなる
- レイヤ間のデータフローが分かりやすい
- 短所
- UI イベントに応じた各種アクションと状態の管理を ViewModel が担うので大きくなりがち
ViewModel が肥大化する場合は VIPER の Presenter と Interactor のような役割のレイヤを用意してそれらに機能を分割するのもよいかもしれません。
次に同じ仕様のアプリケーションを Flux パターンで実装したものを示します。
Flux
Flux とは
Facebook が提唱しているアーキテクチャで、同名の JavaScript フレームワークがあります。
Flux には下記のような4つの要素があります。
- Store
- アプリケーションで用いるデータ・状態を保持する
- View
- Store の持つ状態を UI に反映する
- Action
- UI イベントに起因して作られる Store への要求
- Dispatcher
- Action を Store へ送る
これらの要素で下図のようなデータフローを構築します。View は Store の持つ状態を購読し、変更があると UI に反映します。ユーザーによるタップやスクロールといった UI イベントが起きると、Action Creator がイベントに応じた Action (API リクエスト等) を発行し Dispatcher へ渡します。Dispatcher は送られた Action を Store へ伝え、Store は Action に応じて状態を更新します。この繰り返しでアプリケーションが動作します。
GitHub - facebook/flux: Application Architecture for Building User Interfaces
実装
Flux パターンで実装したサンプルコードです。以下で実装の概要を説明します。
サンプルでは Dispatcher は定義せず、Action Creator から直接 Store へデータを流しています。
Store の定義は下記のようになっています。
classStore { staticletinitialState= State( models:[], nextPage: .nextPage(State.initialPage), networkState: .nothing ) varstates:Observable<State>= .empty() varcurrentState:State { return try! stateCache.value() } privateletstateCache:BehaviorSubject<State>= BehaviorSubject(value:Store.initialState) init(inputs:Observable<View.Event>) { states = inputs .flatMap { event in ActionCreator.action(for:event, store:self) } .scan(Store.initialState, accumulator:Store.reduce) .multicast(stateCache) .refCount() } staticfuncreduce(state:State, action:Action) ->State { varnextState= state switch action { caselet .refreshed(models, nextPage): nextState.models = models nextState.nextPage = nextPage nextState.networkState = .nothing caselet .loadedMore(models, nextPage): nextState.models += models nextState.nextPage = nextPage nextState.networkState = .nothing case .requested: nextState.networkState = .requesting caselet .errorOccured(error): nextState.networkState = .error(error) } return nextState } }
initで View からの UI イベントが流れてくるストリームを受け取ります。ActionCreator.action関数によって UI イベントを Action のストリームに変換し、Store.reduceでそれを状態遷移のストリーム stetesにしています。そしてこの statesを View から購読して UI に反映することで Flux のデータフローが完成します。
Store.reduceは現在の状態と Action を取り、次の状態を返す関数です。全ての状態遷移はここに集約されます。
UI イベントを Action に変換する ActionCreator.action関数の定義は下記のようになっています。
structActionCreator { staticfuncaction(for event:View.Event, store:Store) ->Observable<Action> { letcurrentState= store.currentState switch event { case .firstViewWillAppear:ifcase .requesting = currentState.networkState { return Observable.just(.requested) } else { letrequest= ModelRequest(page:State.initialPage) letresponse:Single<ModelRequest.Response>= MockClient.response(to:request) return response.asObservable() .map { response ->Actioninreturn .refreshed(models:response.models, nextPage:response.nextPage) } .catchError { error ->Observable<Action>inreturn .just(.errorOccured(error:error)) } .startWith(.requested) } case .reachedBottom:switch currentState.nextPage { case .reachedLast:return .empty() caselet .nextPage(nextPage):ifcase .requesting = currentState.networkState { return .just(.requested) } letrequest= ModelRequest(page:nextPage) letresponse:Single<ModelRequest.Response>= MockClient.response(to:request) return response.asObservable() .map { response ->Actioninreturn .loadedMore(models:response.models, nextPage:response.nextPage) } .catchError { error ->Observable<Action>inreturn .just(.errorOccured(error:error)) } .startWith(.requested) } } } }
返り値が Actionでなく Observable<Action>になっているのは非同期処理の完了後に Action を送出したい場合があるためです。例えば API リクエストを行う場合、リクエスト開始時には .requestedという Action を Store へ送り View はインジケーターを表示し、非同期にレスポンスを取得し完了時に .refreshedという Action を Store へ送り View はインジケーターを非表示にし取得したデータを画面に描画します。
最後に View の実装です。
typealiasView= ModelTableViewController classModelTableViewController:UIViewController, UITableViewDataSource { fileprivate enumEvent { case firstViewWillAppear case reachedBottom } privateletstore:Storeprivateletevents= PublishSubject<Event>() privatelettableView= UITableView() privateletactivityIndicator= UIActivityIndicatorView(activityIndicatorStyle: .gray) privateletdisposeBag= DisposeBag() privatevarmodels:[Model]= [] init() { // UI イベントを流すストリームを渡して Store を生成 store = Store(inputs:events) super.init(nibName:nil, bundle:nil) } overridefuncviewDidLoad() { super.viewDidLoad() // Store の状態遷移のストリームを購読し、状態に変更があれば render を呼ぶ store.states .observeOn(MainScheduler.instance) .subscribe(onNext:self.render) .disposed(by:disposeBag) view.addSubview(tableView) tableView.frame = view.bounds tableView.dataSource =self tableView.register(UITableViewCell.self, forCellReuseIdentifier:String(describing:UITableViewCell.self)) view.addSubview(activityIndicator) activityIndicator.center = view.center // 一度目の viewWillAppear 時に .firstViewWillAppear イベントを送出 rx.sentMessage(#selector(viewWillAppear)) .take(1) .subscribe(onNext: { [weak self] _ inself?.events.onNext(.firstViewWillAppear) }) .disposed(by:disposeBag) // 末尾までスクロールされたら .reachedBottom イベントを送出 tableView.rx.willDisplayCell .subscribe(onNext: { [weak self] (cell, indexPath) inguardletstrongSelf=selfelse { return } if indexPath.row == strongSelf.tableView.numberOfRows(inSection:indexPath.section) -1 { strongSelf.events.onNext(.reachedBottom) } }) .disposed(by:disposeBag) } privatefuncrender(state:State) { // 中略: 状態に応じた描画処理 } }
initで UI イベントを流すストリームを渡して Store を生成します。また viewDidLoadで Store.statesを購読することで Flux のデータフローを構築します。これで eventsに UI イベントを流すとそれに応じた Action が実行され、状態が更新されると View の renderが呼び出されるようになります。render関数は状態を受け取って UI の描画を行う関数です。サンプルでは状態に応じたインジケーターやアラートの表示、データによるテーブルビューの更新を行っています。
長所・短所
- 長所
- 画面が持ちうる状態と状態遷移が把握しやすい
- 要素の役割分担がはっきりしている
- View -> Action Creator -> Store -> View のデータフローが一方向になっていて分かりやすい
- ステートレスな要素が多いのでユニットテストが書きやすい
- 短所
- コード量が膨らむ
- 状態の一部が書き換わるだけで全ての再描画が走るのでパフォーマンスが良くない
Reactなんかは Virtual DOM によってパフォーマンスの短所を解決していますね。iOS でも実装の仕方の問題で、状態を一つのストリームにまとめずにいくつかに分割して、それぞれの状態に関係する View のみを更新する関数を接続するといった対処で改善できるかもしれません。
まとめ
例として MVVM と Flux の実装を見てきました。両者とも粒度は違うものの役割を分割することで、従来の M-VC という形よりもどこに何を実装すべきかわかりやすくなっているかと思います。またユニットテストが書きやすくなっているのも魅力です。Flux はアーキテクチャの構成という点の他にも、状態の更新を一箇所に集約し、そこ以外では状態が書き換わらないといった長所もありました。
いかがでしたでしょうか。アーキテクチャの選択はアプリケーションの性質にも依りますし、開発チームの状態にも依ります。それらを考慮しアーキテクチャに求める要件を挙げ、適したアーキテクチャを選択するように心がけましょう。
