先生と生徒の会話形式で理解しよう

生徒

「画面を回転させたり戻ったりすると、表示されていたデータが消えちゃうのですが…これってどうにかできないんですか？」

先生

「そうですね、画面の状態（データ）をちゃんと管理するには、ViewModelとLiveDataを使うのが効果的です。」

生徒

「ViewModel？LiveData？なんだか難しそうな名前ですね…」

先生

「名前はカタカナですが、実はとっても便利で、アプリの品質も上がりますよ。ゆっくり一緒に学んでいきましょう。」

1. ViewModelとは？画面のデータを守る仕組み

ViewModel（ビューモデル）は、KotlinでAndroidアプリを開発する際に、画面に表示するデータを保存しておく場所です。

普通、スマホの画面を回転させたり、画面を戻ったりすると、データは初期化されてしまいます。これを防ぐために、ViewModelが使われます。

ViewModelは、画面（ActivityやFragment）とは別の場所にあるため、画面が一度消えても、データはそのまま残ります。

2. LiveDataとは？データの変化を自動で監視

LiveData（ライブデータ）は、データの中身が変わったときに、自動で通知してくれる仕組みです。

たとえば、数値や文字が変化したときに、自動で画面に反映したいときに使います。

LiveDataは「監視（observe）」する機能を持っていて、データの変化にすぐ反応できるのが特徴です。

3. ViewModelでLiveDataを使う基本コード

まずは、ViewModelクラスを作成して、LiveDataを使ってみましょう。


class MyViewModel : ViewModel() {
    val count = MutableLiveData<Int>()

    init {
        count.value = 0
    }

    fun increment() {
        count.value = (count.value ?: 0) + 1
    }
}

MutableLiveDataは、値の変更ができるLiveDataです。最初に0を入れておき、「カウントアップ」ボタンを押すと、値が1ずつ増えるようにしています。

4. ActivityでViewModelとLiveDataを使う方法

次に、ActivityでこのViewModelを使って、データの変化を画面に表示してみましょう。


class MainActivity : AppCompatActivity() {
    private lateinit var viewModel: MyViewModel
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        viewModel = ViewModelProvider(this).get(MyViewModel::class.java)

        viewModel.count.observe(this) { value ->
            binding.textView.text = "現在のカウント: $value"
        }

        binding.button.setOnClickListener {
            viewModel.increment()
        }
    }
}

observeを使って、LiveDataの値が変わったときに、自動でTextViewを更新しています。これで、画面を回転してもカウントがリセットされません。

5. レイアウトファイルの例（activity_main.xml）

以下は、シンプルなレイアウトファイルの一例です。


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:padding="24dp">

    <TextView
        android:id="@+id/textView"
        android:text="現在のカウント: 0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp" />

    <Button
        android:id="@+id/button"
        android:text="カウントアップ"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"/>
</LinearLayout>