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

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 を使って書籍管理アプリを実装してみましょう！

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

1. Model
2. ViewModel
3. View

LiveData と ViewModel の利用準備

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

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

Model の作成

次に、Model の作成です。

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

Repository の作成

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

repository

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

1 2 3 4 5 6 7 8 9 10 11

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

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

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

ViewModel の作成

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

class MainViewModel : ViewModel() { private val repository = BookRepository() private val _title = MutableLiveData<String>() private val _author = MutableLiveData<String>() val title: LiveData<String> = _title val author: LiveData<String> = _author fun fetchBook() { // APIで本の詳細を取得する val book = repository.searchBook(1) // タイトルと著者をLiveDataに渡す _title.postValue(book.title) _author.postValue(book.author) } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14

class MainViewModel : ViewModel() {     private val repository = BookRepository()     private val _title = MutableLiveData<String>()     private val _author = MutableLiveData<String>()     val title: LiveData<String> = _title     val author: LiveData<String> = _author     fun fetchBook() {         // APIで本の詳細を取得する         val book = repository.searchBook(1)         // タイトルと著者をLiveDataに渡す         _title.postValue(book.title)         _author.postValue(book.author)     } }

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

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

View の作成

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

view

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

1 2 3 4 5 6 7 8 9

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

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

LiveData の読み込み

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

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

mainViewModel.title.observe(this, Observer { findViewById<TextView>(R.id.title).text = it }) mainViewModel.author.observe(this, Observer { findViewById<TextView>(R.id.author).text = it })

1 2 3 4 5 6

mainViewModel.title.observe(this, Observer {             findViewById<TextView>(R.id.title).text = it         })         mainViewModel.author.observe(this, Observer {             findViewById<TextView>(R.id.author).text = it         })

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

さいごに

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

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

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

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

2020.07.17

ライトコード的「やってみた！」シリーズ

「やってみた！」を集めました！ （株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！ ※作成日が新しい順に並べ...

書いた人はこんな人

たかやん（エンジニア）

グンマー帝国から密出国してきてるブタ。
東京人多い...

• IT技術10月 26, 2023HSTS(HTTP Strict Transport Security)とは？
• IT技術8月 22, 2023gRPCをSpring Bootで利用する
• IT技術12月 14, 2021OAuthとは？なぜ必要？
• エンジニアになろう！1月 25, 2021MVVMアーキテクチャで書籍管理アプリを作ってみた！

• Tweet
• Share
• Hatena
• RSS

• 投稿者: たかやん（エンジニア）
• エンジニアになろう！

• CameraXでプレビューから写真...
• 【Python】Tkinterで簡...