演習: Dessert Clicker に ViewModel を追加する

1. 始める前に

はじめに

Dessert Clicker は、インラインの状態とデータを利用して機能します。この演習では、MainActivity からインラインの状態、データ、ロジックを削除し、ViewModel に移します。

アプリのロジックをビューから分離して ViewModel に移すことは、Android 開発における最新の手法です。この方法には、以下の利点があります。

  • 他の開発者がコードを読みやすくなります。
  • コードをテストしやすくなります。
  • 複数の開発者が、他の開発者の作業を妨げることなく、1 つのアプリを同時に開発できます。

解答コードは最後に掲載されていますが、演習に取り組んでから解答を確認するようにしてください。解答はアプリを実装する方法の一つとして捉えてください。

前提条件

必要なもの

  • Android Studio がインストールされた、インターネットに接続できるパソコン
  • Dessert Clicker アプリの解答コード

作成するアプリの概要

以下の練習問題では、データとアプリロジックを処理する ViewModel を追加し、Dessert Clicker アプリのアーキテクチャを改善します。

練習問題は複数のセクションに分かれていて、それぞれで以下の手順を個別に実施します。

  • 必要な依存関係を追加および更新します。
  • ViewModel クラスを作成します。

2. スターター コードをダウンロードする

  1. Android Studio で basic-android-kotlin-compose-training-dessert-clicker フォルダを開きます。
  2. Android Studio で Dessert Clicker アプリコードを開きます。

3. 依存関係を設定する

  1. プロジェクトの build.gradle ファイルに次のように変数を追加します。
buildscript {
   ext {
       ...
       lifecycle_version = '2.5.1'
   }
}
  1. app/build.gradle ファイルに次のように依存関係を追加します。
dependencies {
    ...implementation "androidx.lifecycle:lifecycle-viewmodel-compose:$lifecycle_version"
}

4. UI 状態クラスを作成する

現在、MainActivityDessertClickerApp() コンポーザブルには、UI を操作するデータと状態が含まれています。

UI に必要なすべてのデータを保持するデータクラスを作成します。DessertClickerApp() コンポーザブルが現在管理しているデータは、このクラス内のデータに置き換えられます。

5. ViewModel を作成する

Jetpack ViewModel コンポーネントを使用して ViewModel クラスを作成し、UI 状態の管理を ViewModel で行うようにします。

6. アプリのロジックとデータを ViewModel に移す

ロジックを MainActivity から ViewModel に移し、作成した UI 状態クラスを使用して UI 状態データにアクセスできるようにします。その後、すべてのデータと状態管理ロジックを MainActivity から削除します。

このタスクを自分でやってみてください。必要に応じて、Compose での ViewModel と状態に関する Codelab のガイダンスを確認してください。

7. ViewModel を呼び出す

ViewModel が提供するデータとメソッドを使用して、MainActivity で UI を操作します。

8. 解答コード