Arsaga Partners, Inc.

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.

制作・監修

アルサーガパートナーズ
DX技術用語辞典 制作チーム

当社は、営業部隊を持たないDX開発パートナースタジオです。

お問い合わせはこちら

CONTACT

下記よりお気軽にご相談ください。

LINEでお問い合わせ

RECRUIT

採用情報

アルサーガパートナーズ株式会社は、一緒に働く仲間を募集しています。 「人間らしく生きる」「自分で考えて行動する」という文化を重視しており、「バグを否定しない」という言葉を掲げています。 挑戦をし続けることが一番の成長に繋がると信じているからです。 まずは挑戦する第一歩を踏み出してもらえれば幸いです。

RECRUIT

採用情報