SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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


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

 連載第4回では、これまでに説明したRxSwiftの仕組みを利用してMVVMモデルを採用したアプリを作成してみます。連載第3回までは、Rxの概念やRxSwift自体の基本的な事柄に関して説明を行いました。今回はこれまで学んできたことをアプリ全体に適応するサンプルを作成します。本連載では、これからRxSwiftを導入する方を対象読者としている関係上、RxSwift導入の初歩的な手順に関して主な説明を行います。そのため、便宜上クラス/メソッドの使い方が必ずしもRxSwiftの詳細な仕様通りでないこともあります。この点をご了承ください。

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

本文およびサンプルコード修正のお知らせ

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

はじめに

 連載第1回で触れた通り、Swiftではビューコントローラーの処理がUIに依存しがちであり、IBActionやdelegateの性質のためプログラムが長くなりがちです。RxSwiftを利用することで、UIへの依存を減らし、処理を明確にできることを前回までの連載で説明しました。今回は、そのプログラムの役割分担をクラス単位に広げ、MVVMモデルの導入の例について説明します。

MVVMモデルの導入

 MVVMモデルとは、Model/View/ViewModelという3つの役割を持つクラスで構成されるシステムの考え方です。詳しくは連載第1回のページで確認してください。MVVMモデルとは、システムの考え方の1つであり、プログラムのルールではありません。そのため、開発者/開発チームの技術水準に応じて柔軟にシステムを構成してよいも言えます。

 今回作成するサンプルもMVVMモデルで構成される例の1つであり、絶対的なものではありません。このことを忘れずに読み進めてください。

Wikipedia検索アプリにMVVMモデルを導入する

 連載第3回で作成したWikipedia APIを使った検索アプリをベースに、簡易的なMVVMモデルを導入します。Wikipedia APIを使った検索アプリ自体の機能は、前回と同様です。

Wikipedia APIを使った検索アプリ
Wikipedia APIを使った検索アプリ

 MVVMモデルの導入時に、Observer/Observable関連クラスを作成してWeb APIを利用した他のアプリでも利用できるようなサンプルを作成します。最初に処理の流れを図で整理しておきます。

Observer/Observable関連クラスを利用したサンプルの処理の流れ
Observer/Observable関連クラスを利用したサンプルの処理の流れ
  • (1)ViewとViewModelのオブジェクトをbind
  • (2)Wikipedia API 検索を実行する前に一定の制限を課してViewModelでの処理を実行
  • (3)Wikipedia API検索を実行する際には、APIリクエストは汎用的に利用できる別クラスで行う
  • (4)検索結果を解析してオブジェクトに格納

 連載第3回のサンプルはオペレーターを使った処理の例でした。今回のサンプルは、RxSwiftとMVVMモデルを組み合わせる例なので、次の3つの観点からプログラムを組んでいきます。

サンプルでMVVMモデルとともに実装する内容
実装する内容  該当部分 
検索キーワード/検索結果をViewModelのオブジェクトとbind View
Wikipedia API検索をObserveパターンを利用して行う ViewModel
Wikipedia API検索を行うクラスを汎用的に作成する MVVM以外

 この3点を念頭に置いて、MVVMモデルを導入したクラスを設計していきます。

MVVMモデルを導入する際のクラスを設計する

 前項で述べた観点から、作成するクラスはMVVMモデルの3クラスとWikipedia APIへHTTPリクエストを行う1クラスの合計4クラスとします。作成するクラスは次の通りです。

サンプルの各クラス
役割 クラス/構造体名 概要
Model WikipediaSearchAPIModel 検索結果を生成
View WikipediaSearchAPIViewController 検索バー、テーブルを表示
ViewModel  WikipediaSearchAPIViewModel  検索バーからの値の受け取り/Wikipedia API検索/検索結果の返却
Wikipedia API呼び出し WikipediaAPIClient Wikipwdia APIへのHTTPリクエスト

 ViewはSwiftで言う一般的なビューではなく、ビューコントローラーのクラスで担当します。サンプルでは、MVVMモデルの各役割を明確にするために、View以外ではUIKitフレームワークをimportしないことを最低限のルールとします。

 Wikipwdia APIへのHTTPリクエストを別のクラスに分けます。View-ViewModel間の変数のやり取りにはデータバインドを用います。ViewModelの処理はViewから直接呼ぶのではなく、onNextイベント発生時に呼ばれるように前もって定義します。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
MVVMモデルの各クラスを作成する

修正履歴

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
RxSwiftで一歩進んだiOSアプリ開発連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/11203 2018/11/19 13:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング