1. HOME
  2. ブログ
  3. エンジニアになろう!
  4. MVVMアーキテクチャで書籍管理アプリを作ってみた!
MVVMアーキテクチャで書籍管理アプリを作ってみた

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

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を使っています。

Model の作成

次に、Model の作成です。

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

Repository の作成

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

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

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

ViewModel の作成

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

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

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

View の作成

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

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

LiveData の読み込み

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

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

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

さいごに

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

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

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

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

書いた人はこんな人

たかやん(エンジニア)
たかやん(エンジニア)
グンマー帝国から密出国してきてるブタ。
東京人多い...

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア