MVVMモデルの各クラスを作成する（2）
Viewの作成
作成したViewModelのプロパティとViewのプロパティをつなぎ合わせて、WIkipedia API検索アプリの画面の動きを実装します。今回のサンプルでは、WIkipedia APIを使った検索／検索結果の格納などの処理はView以外で行っています。Viewでは、オブジェクトをバインドする処理のみを記述します。
class WikipediaSearchAPIViewController: UIViewController {
@IBOutlet weak var searchBar: UISearchBar!
@IBOutlet weak var tableView: UITableView!
private let disposeBag = DisposeBag()
private let viewModel = WikipediaSearchAPIViewModel() // -------（1）
override func viewDidLoad() {
super.viewDidLoad()
// 検索欄の入力値とViewModelのsearchWordをbind // -------（2）
self.searchBar.rx.text.orEmpty
.bind(to: self.viewModel.searchWord)
.disposed(by: self.disposeBag)
// 検索結果とテーブルのセルをbind
self.viewModel.items.asObservable() // -------（3）
.bind(to: self.tableView.rx.items(cellIdentifier: "Cell")) { index, result, cell in
cell.textLabel?.text = result.title
cell.detailTextLabel?.text = "https://ja.wikipedia.org/w/index.php?curid=＼(result.pageid)"
}
.disposed(by: self.disposeBag)
}
最初にUIとViewModelのオブジェクトを定義します（1）。WIkipedia APIで利用する検索キーワードをViewModelに渡すために、検索欄の入力値とViewModelのsearchWordプロパティをバインドします（2）。次に、検索結果を表示するために、ViewModelのitemsプロパティとテーブルのデータをバインドします（3）。Wikipedia API検索が行われ、itemsに検索結果が入ると、データバインデングを通してテーブルに検索結果が入ります。
View全体を見るとわかるように、Viewではデータバインドでオブジェクトを結合する、あるいはイベント発生時に呼び出す処理を定義するだけです。そのため、VIewのソースコードは数行単位のブロックに収まり、メンテナンスもしやすくなります。
Wikipedia API検索の動きは、前回のサンプルと同様です。当然ですが、アプリ内部のクラスの構造が異なっていても同じ動きを実装できます。
まとめ
今回はWikipedia API検索を例に、MVVMモデルを利用するサンプルを作成しました。MVVMモデルを導入することで、ソースコードを整理でき、特にView側のソースコードを短く読みやすくできることが実感できたと思います。MVVMモデルと言っても、堅苦しいものではなく、比較的開発者の自由にプログラムが組めます。次回はRxSwiftの派生ライブラリを利用してMVVMモデルを使用したサンプルなどを作成してみます。
