![たかやん(エンジニア)](/_next/image?url=https%3A%2F%2Fapi.rightcode.co.jp%2Fwp-content%2Fuploads%2F2021%2F11%2FIS7eCuAw_400x400-150x150.jpg&w=64&q=75)
MVVMアーキテクチャで書籍管理アプリを作ってみた!
![たかやん(エンジニア)](/_next/image?url=https%3A%2F%2Fapi.rightcode.co.jp%2Fwp-content%2Fuploads%2F2021%2F11%2FIS7eCuAw_400x400-150x150.jpg&w=64&q=75)
エンジニアになろう!
![MVVMアーキテクチャで書籍管理アプリを作ってみた](/_next/image?url=https%3A%2F%2Fapi.rightcode.co.jp%2Fwp-content%2Fuploads%2F2021%2F01%2Fmvvm-architecture-book-management-application.png&w=3840&q=75)
MVVM で書籍管理アプリを作りたい!
![](https://api.rightcode.co.jp/wp-content/uploads/2020/12/suzuki-icon.jpg)
(株)ライトコードの鈴木です!
近年、Android アプリ開発の主流となっている「MVVM アーキテクチャ」。
MVVM アーキテクチャは「Model」「View」「ViewModel」の3つのコンポーネントを用いて実装します。
役割分担をはっきりさせ、UI をモデルで操作するため、開発側・ユーザー側ともにメリットの多い設計方法です。
開発者側のメリット | ユーザー側のメリット |
データ管理が楽 | UI 表示が早い |
コード変更時の書き換えやミスが減る | メモリ不足になるリスクが減る |
今回は、この MVVM アーキテクチャを使って、書籍管理アプリを作ってみましょう!
MVVM の構造
実装の前に、まずは MVVM の構造を説明しておきましょう。
ユーザー、各コンポーネントと API との関係は、以下のようになります。
![MVVM の構造](https://api.rightcode.co.jp/wp-content/uploads/2021/01/1-mvvm-architecture-book-management-application.png)
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 })
以上で、実装は終わりです。
さいごに
今回は、MVVM アーキテクチャの解説と、MVVM を使った書籍管理アプリの実装についてご紹介しました。
今や Android アプリ開発の主流である MVVM アーキテクチャは、ぜひ押さえておきたい知識です。
この記事が少しでも MVVM アーキテクチャの理解に役立てばうれしいです!
こちらの記事もオススメ!
2020.07.17ライトコード的「やってみた!」シリーズ「やってみた!」を集めました!(株)ライトコードが今まで作ってきた「やってみた!」記事を集めてみました!※作成日が新し...
ライトコードでは、エンジニアを積極採用中!
ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。
採用情報へ
![たかやん(エンジニア)](/_next/image?url=https%3A%2F%2Fapi.rightcode.co.jp%2Fwp-content%2Fuploads%2F2021%2F11%2FIS7eCuAw_400x400-150x150.jpg&w=3840&q=75)
グンマー帝国から密出国してきてるブタ。 東京人多い...