• トップ
  • ブログ一覧
  • MVVMアーキテクチャで書籍管理アプリを作ってみた!
  • MVVMアーキテクチャで書籍管理アプリを作ってみた!

    たかやん(エンジニア)たかやん(エンジニア)
    2021.01.25

    エンジニアになろう!

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

    鈴木先生

    (株)ライトコードの鈴木です!

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

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

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

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

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

    MVVM の構造

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

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

    MVVM の構造

    Model

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

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

    View

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

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

    ViewModel

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

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

    DataBinding とは?

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

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

    MVVM でアプリを実装

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

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

    1. Model
    2. ViewModel
    3. 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        })

    以上で、実装は終わりです。

    さいごに

    今回は、MVVM アーキテクチャの解説と、MVVM を使った書籍管理アプリの実装についてご紹介しました。

    今や Android アプリ開発の主流である MVVM アーキテクチャは、ぜひ押さえておきたい知識です。

    この記事が少しでも MVVM アーキテクチャの理解に役立てばうれしいです!

    こちらの記事もオススメ!

    featureImg2020.07.17ライトコード的「やってみた!」シリーズ「やってみた!」を集めました!(株)ライトコードが今まで作ってきた「やってみた!」記事を集めてみました!※作成日が新し...

    たかやん(エンジニア)

    たかやん(エンジニア)

    おすすめ記事

    GitHubActionsのランナーに触れてみた

    こやまん(エンジニア)

    こやまん(エンジニア)

    2024.03.28

    IT技術

    Azure Data FactoryでSlackへ通知をしてみる

    たかやん(エンジニア)

    たかやん(エンジニア)

    2024.03.28

    IT技術

    GCP Secret Managerを使ってみた

    たなゆー(エンジニア)

    たなゆー(エンジニア)

    2024.03.21

    IT技術

    Bitriseのパイプラインと環境変数

    加納(エンジニア)

    加納(エンジニア)

    2024.03.11

    IT技術