MVVMアーキテクチャで書籍管理アプリを作ってみた！

たかやん（エンジニア）

MVVMアーキテクチャで書籍管理アプリを作ってみた！

たかやん（エンジニア）

2021.01.25

エンジニアになろう！

Android

MVVM で書籍管理アプリを作りたい！

鈴木先生

（株）ライトコードの鈴木です！

近年、Android アプリ開発の主流となっている「MVVM アーキテクチャ」。

MVVM アーキテクチャは「Model」「View」「ViewModel」の３つのコンポーネントを用いて実装します。

役割分担をはっきりさせ、UI をモデルで操作するため、開発側・ユーザー側ともにメリットの多い設計方法です。

開発者側のメリット	ユーザー側のメリット
データ管理が楽	UI 表示が早い
コード変更時の書き換えやミスが減る	メモリ不足になるリスクが減る

今回は、この MVVM アーキテクチャを使って、書籍管理アプリを作ってみましょう！

MVVM の構造

実装の前に、まずは MVVM の構造を説明しておきましょう。

ユーザー、各コンポーネントと API との関係は、以下のようになります。

Model

Model は、アプリ内で利用するデータを管理するコンポーネントです。

Repository を経由して、API やデータベースからデータを取得・利用します。

View

View は、表示を行うコンポーネントです。

ユーザーからアクションを検知し、画面遷移や ViewModel に処理の依頼をします。

ViewModel

ViewModel は、Viewから受けた依頼を元に、Model からもらったデータを処理するコンポーネントです。

View への反映には DataBinding を使い、自動的に反映します。

DataBinding とは？

MVVM の最大の特徴が、View と View Model を結びつける「DataBinding」です。

同じデータをやり取りしているので、どちらかの値が変更されれば、もう片方の値にも反映されるといったように、双方向でデータの更新が行われます。

MVVM でアプリを実装

それでは、MVVM を使って書籍管理アプリを実装してみましょう！

以下のような流れで、コンポーネントを作成していきます。

Model
ViewModel
View

LiveData と ViewModel の利用準備

まずは、LiveData と ViewModel を利用できるように、依存関係を記述します。

今回は、2020年11月現在の最新バージョン2.2.0を使っています。

1dependencies {
2def lifecycle_version = "2.2.0"
3// Kotlin用のViewModel
4implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version"
5// Kotlin用のLiveData
6implementation "androidx.lifecycle:lifecycle-livedata-ktx:$lifecycle_version"
7}

Model の作成

次に、Model の作成です。

「本の ID」と「タイトル」「著者」を保持する BookModel を作成します。

1data class BookModel(
2    val id: Int,       // 本のID
3    val title: String, // 本のタイトル
4    val author: String // 本の著者
5)

Repository の作成

Repository は、データベースにデータを保存したり、API からデータを取得する時に利用します。

1class BookRepository {    
2    fun insertBook(book: BoolModel){
3         // ローカルのデータベースに本を追加
4    }
5    fun getBook(bookId: Int): BookModel{
6        // ローカルのデータベースから本の情報を取得
7    }
8    fun searchBook(isbn: Int): BookModel{
9        // APIを利用してISBNコードから本を検索
10    }
11}

データベースへのアクセスや API は非同期処理なので、Rx ライブラリや Coroutine などを使ってください。

ローカルデータベースの利用は、Google 提供の Room ライブラリを使うのが良いでしょう。

ViewModel の作成

本の情報を取得し、表示する ViewModel を作成します。

1class MainViewModel : ViewModel() {
2    private val repository = BookRepository()
3    private val _title = MutableLiveData<String>()
4    private val _author = MutableLiveData<String>()
5    val title: LiveData<String> = _title
6    val author: LiveData<String> = _author
7    fun fetchBook() {
8        // APIで本の詳細を取得する
9        val book = repository.searchBook(1)
10        // タイトルと著者をLiveDataに渡す
11        _title.postValue(book.title)
12        _author.postValue(book.author)
13    }
14}

タイトルと著者を格納する LiveData を定義して、API で本の詳細を取得します。

タイトルと著者の LiveData に、API で取得した本の詳細を渡します。

View の作成

続いて、表示に必要な View を作成します。

1class MainActivity : AppCompatActivity() {
2    override fun onCreate(savedInstanceState: Bundle?) {
3        super.onCreate(savedInstanceState) setContentView(R.layout.activity_main)
4        // ViewModelを生成して取得する
5        val viewModel: MainViewModel by viewModels()
6        // 本の詳細を取得する処理のリクエスト
7　　　　　viewModel.fetchBook()
8    }
9}

ViewModel を生成して取得し、本の詳細を取得する処理をリクエストします。

LiveData の読み込み

最後に、ViewModel の LiveData を読み込みます。

observe メソッドで LiveData を読み込み、TextView の text に LiveData 値を渡すと表示してくれるようになります。

1        mainViewModel.title.observe(this, Observer {
2            findViewById<TextView>(R.id.title).text = it
3        })
4        mainViewModel.author.observe(this, Observer {
5            findViewById<TextView>(R.id.author).text = it
6        })