CodeZine(コードジン)

特集ページ一覧

RxSwiftの仕組みを利用して、MVVMモデルを導入しよう

RxSwiftを使った一歩進んだiOSアプリ開発 第4回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2018/11/14 14:00
目次

MVVMモデルの各クラスを作成する(2)

Viewの作成

 作成したViewModelのプロパティとViewのプロパティをつなぎ合わせて、WIkipedia API検索アプリの画面の動きを実装します。今回のサンプルでは、WIkipedia APIを使った検索/検索結果の格納などの処理はView以外で行っています。Viewでは、オブジェクトをバインドする処理のみを記述します。

[リスト8]WikipediaSearchAPIViewController.swift
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検索アプリの実行結果

 Wikipedia API検索の動きは、前回のサンプルと同様です。当然ですが、アプリ内部のクラスの構造が異なっていても同じ動きを実装できます。

まとめ

 今回はWikipedia API検索を例に、MVVMモデルを利用するサンプルを作成しました。MVVMモデルを導入することで、ソースコードを整理でき、特にView側のソースコードを短く読みやすくできることが実感できたと思います。MVVMモデルと言っても、堅苦しいものではなく、比較的開発者の自由にプログラムが組めます。次回はRxSwiftの派生ライブラリを利用してMVVMモデルを使用したサンプルなどを作成してみます。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

修正履歴

  • 2018/11/19 12:59 サンプル内の各クラスの役割を見直すという理由から、全体的にサンプルコードと解説を見直しました。編集部

バックナンバー

連載:RxSwiftで一歩進んだiOSアプリ開発

著者プロフィール

  • WINGSプロジェクト 片渕 彼富(カタフチ カノトミ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5