🖲️

What is MVVM?

2024/01/08に公開

Kotlin

Model View ViewModel 略すとMVVMは、WPFなどのMicrosoft系の開発において採用されているデザインパターンです。iOS開発だと、Storyboardの頃だと、ViewControllerの肥大化を防ぐ目的で使われていたようです。

図にするとこんな感じでしょうか🤔

Model層の役割

アプリケーションで使うデータの基本的な振る舞いやそれに関するロジックを保持します。

データの構造の表現
Web APIとのやりとり
その他データの振る舞いに関するロジック

UIやレイアウトに関するロジックは保持しない。SwiftのRealmというローカルデータベースを使った例だとこのようになっております。

import Foundation
import RealmSwift

// カウンターのモデルを定義する
class Counter: Object, ObjectKeyIdentifiable {
    @Persisted(primaryKey: true) var id: ObjectId
    @Persisted var count: Int = 0
}

View層の役割

モバイルでもWebの技術でも共通ですが、UIを作るのが役割です。ViewModelからデータを受け取ってUIに表示をします。Web APIを使った例だとインターネットネットから渡されたJSONのデータをデコードして、テキストや画像に変換します。

ViewModel層の役割

ModelとViewの間にあって仲介をしてくれるものです。Controllerと似てる気がしますが、違ったりします。僕の知ってるViewModelだと、ロジックはViewModelのクラスには書いてなくて、Repositoryと呼ばれるクラスにロジックは書いて、UIで、ボタンを押すなどの操作が実行されたら、ViewModelを使って、メソッドを呼び出します。

Androidの開発だと、ViewModelが基本みたいなので、学習するのには参考になりそうです。私はRetrofitやRoomを使うときは、ViewModelでコードを書いております。

Modelからデータを受け取り、UIに反映できるような形で出力する
View側の入力をModelに渡して、UIの更新をする

まとめ

今回はわかりやすく、MVVMについて解説してみました。記事の内容は少ないですが参考になると嬉しいです。

AndroidでのMVVMの記事:

Model層の役割

View層の役割

ViewModel層の役割

まとめ

Discussion