2018-05-22

Jetpack を使って、ビューモデルに沿った Android アプリを Kotlin で作成（2時間）

TL; DR

f:id:dogwood008:20180522021243p:plain:w250

Jetpack はアーキテクチャやUIその他色々の面倒を見てくれるすごいやつ
- 自動でビューモデルのアーキテクチャでスケルトンを作ってくれる
公式のページの導入手順に沿うと、ライブラリのインポートに失敗してビルドが正常完了しない（2018/05/22現在）
動くサンプルはこちら三 ( ◠‿◠ )☛ dogwood008/calc

Jetpack とは？

Google I/O 2018 で新たに発表された、ツールとライブラリ。以下の4つで構成される。

ファウンデーション、アーキテクチャ、ビヘイビア、UI — Jetpackで使用できるもの

ファウンデーション
- AppCompat （後方互換性サポート）
- Multidex （メソッド数上限開放）
- テストフレームワーク等
アーキテクチャ
- データバインディング
- ナビゲーション
- ビューモデル等
ビヘイビア
- 通知
- パーミッション
- 共有等
UI
- アニメーション＆トランジション
- 絵文字
- レイアウト

developer.android.com

Jetpack があると何が嬉しいの？

「Androidアプリ作りたいけど、アーキテクチャがいっぱいあってよくわからん」という人におすすめ。公式から提示された Jetpack により、これに乗っかっておけばなんとかなるという道が示された。

他にも上に挙げたようなもののうち、欲しいものだけつまんで導入することもできるので、車輪の再発明やボイラープレート（テンプレ）を引っ張り出してくる手間が省ける＆（自分で書かなくてすむので）保守しやすくなるといったメリットがある。

Jetpackの導入

まずは Android Studio 3.2 が必要。でもまだ正式版は出ていないので Check for Update では振ってこない。ので直接zipをDLして展開する。

developer.android.com

プロジェクトをいつも通り新規作成する。

f:id:dogwood008:20180522004514p:plain

いつもの通り進めていくと、見慣れないやつ Activity & Fragment + ViewModel がいる。これを選択して次へ。

f:id:dogwood008:20180522004546p:plain

そうすると、アクティビティとフラグメントの名前に加え、ビューモデルの名前を決める画面が表示される。特に指定がなければデフォルトのままで完了。

f:id:dogwood008:20180522004733p:plain

Jetpack を使った実装

ビューモデルを実装していく。デフォルトのままだと、（Kotlinサポートにチェックを入れていれば）　MainViewModel.kt でビューモデルのクラスが定義されている。下記を入力して実装する。

MainViewModel.kt

import android.arch.lifecycle.LiveData
import android.arch.lifecycle.MutableLiveData
import android.arch.lifecycle.ViewModel

class MainViewModel : ViewModel() {
    private val _data = MutableLiveData<String>()
    val data: LiveData<String>
        get() = _data

    init {
        _data.value = "Hello, Jetpack!"
    }
}

続いて、実行に必要なライブラリをインポートする。

この手順では下記を変更せず書くことをおすすめします。もし原著の手順に従うとビルドに失敗するので注意！

build.gradle

// LiveData + ViewModel
def archLifecycleVersion = '1.1.1'
implementation "android.arch.lifecycle:extensions:$archLifecycleVersion"

// Navigation
def navigationVersion = '1.0.0-alpha01'
implementation "android.arch.navigation:navigation-fragment:$navigationVersion"
implementation "android.arch.navigation:navigation-ui:$navigationVersion"

最後に MainFragment.kt でビューモデルから取得した値を TextView に代入する。

MainFragment.kt （抜粋）

override fun onActivityCreated(savedInstanceState: Bundle?) {
    super.onActivityCreated(savedInstanceState)
    viewModel = ViewModelProviders.of(this).get(MainViewModel::class.java)
    val text = viewModel.data.value
    message.text = text
}

これでおしまい。あとはビルドしたら Hello, Jetpack! が表示される。

f:id:dogwood008:20180522014015p:plain

今回のリポジトリはここに置いておきます。

github.com （電卓を作りたかったけど、2時間で記事書きながらじゃちょっと無理だった）

感想

正直アーキテクチャなんて好き好みあるし、どれが自分に・チームに最適かはわかんないよな～という人向けに、「Jetpackを使ったら自動的にビューモデルである程度用意してくれる」というのが自分は好き。 Rails と比べるとやや物足りない感もあるが、「ディレクトリに意味があって、名前を勝手に変えると破滅して、……」というよりは初めてでもとっつきやすいので、その点を加味するとこれくらいで良いのかも。

もし記事中に誤りがあれば、 @dogwood008 までご連絡いただけると幸いです 🙇