[kotlin]MVVMモデルとは

MVVMモデルとは

MVVM(Model-View-ViewModel)モデルとは、ソフトウェアアーキテクチャパターンの一つです。

MVVMモデルの特徴はアプリケーションのロジックの部分とUIの部分を分離しながらコーディングを進められる点です。
そのようにすることにって、コードの修正やテストが容易に行えるようになります。
そして、MVVMモデルは「Model、View、ViewModel」という3つのコンポーネントで構成されています。
それでは各コンポーネントについて紹介します。

Modelとは

Modelは一言で言うとビジネスロジックやデータ周りを管理する部分です。データベースの操作やエンティティ周りを担当しています。
実際に開発を進めないと、かなりイメージが湧きにくいコンポーネントだと思います。
アプリケーションの「脳」とも言われる部分です。

Viewとは

Viewとは「見た目」を制御している部分です。ユーザーに見えるUIは全てここに記述されます。MVVMモデルの中で一番イメージが湧きやすいコンポーネントだと思います。
JetpackComposeにはテキストやボタン、ColumnやRowなど様々なUIの要素が用意されていますが、全てこのViewで実装します。
またユーザーがテキストボックスに入力した内容などユーザーの操作をViewModelが感知できるようにする役割もあります。
逆にViewModelから渡されたテキストや画像などを表示することもViewの仕事です。

ViewModelとは

ViewModelはViewとModelの橋渡しのような役割を担っています。主に担当する仕事はViewが表示するためのデータを準備することです。
Viewに渡したいデータの取得・加工をしています。
ユーザーの行動によって変更されたデータをViewから取得、ViewModelがModelへ渡すようなデータの更新の通知を行うこともあります。

MVVMモデルのサンプルコード

MVVMモデルを利用したサンプルコードを紹介します。
このサンプルコードでは画面上には「名前」、「年齢」が表示されていて、テキストフィールドに名前・年齢を入力し、Update Userボタンを押すと、表示されている内容が更新されます。
これをコピペして中身の内容を変えるだけで、簡単にMVVMモデルを実装することができるので、試してみてください。

// Model
data class User(val name: String, val age: Int)

// ViewModel
class UserViewModel : ViewModel() {
    private var _user = mutableStateOf(User("John Doe", 30))
    val user: State<User> get() = _user

    fun updateUser(name: String, age: Int) {
        viewModelScope.launch {
            _user.value = User(name, age)
        }
    }
}

// View
@Composable
fun UserView(viewModel: UserViewModel) {
    val user by viewModel.user.collectAsState()

    var newName by remember { mutableStateOf("") }
    var newAge by remember { mutableStateOf("") }

    Column {
        Text(text = "Name: ${user.name}")
        Text(text = "Age: ${user.age}")
        TextField(value = newName, onValueChange = { newName = it }, label = { Text("New Name") })
        TextField(value = newAge, onValueChange = { newAge = it }, label = { Text("New Age") })
        Button(onClick = { viewModel.updateUser(newName, newAge.toInt()) }) {
            Text("Update User")
        }
    }
}

一言

今回はMVVMモデルの概要について紹介させていただきました。
サンプルコードだけだと実際にどうやってMVVMモデルが動いているのか理解しづらいと思います。
MVVMモデルをコーディングの観点で解説する記事を別途アップロードする予定ですので、お待ちください。