DX技術用語辞典

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月時点）