DX技術用語辞典

by Arsaga Partners

MVVM

読み方: えむぶいぶいえむ

MVVMとは

Model View ViewModelの頭文字をとったもの。UIを持つソフトウェアに適用される設計思想(アーキテクチャ)の1つです。
MVVMは View 、ViewModel、Modelという3つの要素を持った実装パターンに分けられ、それぞれの役割は以下になります。

    • View
      ユーザー操作(入力)の検知とユーザーへの情報表示(出力)を担当。
    • ViewModel
      ViewとModelの仲介。
  • Model
    UI(ユーザーが目にする部分)以外の部分を担当。主に計算や通信などの独立した処理を担う。

MVVMの特徴

    • 肥大化しがちなView部分の処理を、ViewModel側に分散させることにより、各ファイルごとのコード量が減り可読性が上がる。
    • ViewとViewModelの連携にDataBindingという手法を使用する。
  • DataBindingを行う上で、関数型リアクティブプログラミング(FRP)との相性が良い。

iOSではRxSwiftというFRPライブラリを利用する場合、MVVMをベースに開発することが主流になっています。

MVPとの違い

似ているアーキテクチャとしてよくMVPが挙げられます。
PresenterとViewModelはどちらも似たような役割ですが、主な違いとしては下記の2つです。

    • 視点が違う
      画面を更新する際にMVPでは、PresenterからView内のメソッドを呼び出すことで、画面更新を行います。反対にMVVMでは、ViewModelは更新内容を発行し、View側がそのViewModelの変更を見ていることで気づき、更新を行うという点です。
  • MVVMはDataBindingを行う
    視点の違いとして前述したMVVMの実装を実現する上で、DataBindingという手法が一般的に使われます。これは言葉の通り、ViewとViewModelを紐づけるものであり、ViewModel内の変更内容をViewが監視している(見ている)という状態になります。

MVVMを用いたとあるニュース記事の一覧実装の例

MVVMを用いると以下のように分業されます。

    • View
      ユーザーのボタンタップ、またはViewのアプリの立ち上がり完了により、イベントを発行します。(これをViewModel側が監視します)
      また、逆にViewModelの変更を検知できるように監視しておきます。
    • ViewModel
      Viewからのイベント発行を検知し、Modelの中にあるニュース記事一覧の取得処理メソッドを呼び出します。Model経由で取得したいレスポンスが返ってきたら、イベントを発行します。最終的にこのイベントをView側が検知し、画面更新を行うことで取得したニュース一覧が反映されるという流れになります。
  • Model
    ニュース記事一覧の取得メソッドを持っておきます。

現場の声

弊社では、関数型プログラミングを用いた開発を行っている為、ベースとしてMVVMを採用しています。
MVVMの特徴であるDataBindingにより、値の自動的な更新が行われる為、変更内容が画面に反映されていなかった、ということが起こりにくいと考えられます。
その為、画面更新はDataBindingに任せておき、その分、ViewModel側のロジックに集中できるということも、MVVMのメリットの1つだと思っています。

関連用語

MVC
Flux
DataBinding

<執筆・監修>
アルサーガパートナーズ株式会社 DX技術用語集制作チーム App Div.

(2021年6月時点)