Jatpack Composeについて

元々はネイティブアプリのエンジニアでiOS/Androidアプリを作ってたんですが、今は本業ではサーバーサイドエンジニアをしていてGo言語とかでAPI作ってます。

ただ、個人でアプリを作ったりはしてるので最近流行りのJetpack Compseをまとめてみようと思います。

Jetpack Composeとは？

Jetpack Composeは2019年のGoogle I/OのDeveloper Keynoteで発表された技術で、FlutterやiOSのSwift UIのように宣言的にアプリのUIを構築できるツールキットです。

最近、FluterとかSwiftUIとかもそうですがViewをコード化するのが流行っているらしい。

サンプルを動かしてみる

Android Studio 4.0 Previewをダウンロードする。

まずはAndroidStudioのPreview版である4.0をインストールしてください。
本家のサイトから簡単にダウンロードできます。ここで余談ですが、AS4.0の起動画面カッコイイですね。

Jetpack Composeのサンプルを選択

何やら見慣れないEmpty Compose Activityをサンプルから選べるので選択してプロジェクトを起動する。

ざっとコードを見てみる

今回のサンプルコードはただのHello Androidと画面に表示するだけのサンプルアプリです。
これまでのAndroid開発だとlayoutをxmlで作成しておりますが、Jetpack ComposeだとActivityにレイアウトの構成をコードで持っており一つのファイルで管理できるのは良いと思うしViewの共通化も楽そう。

MainActivity.kt

package com.example.myapplication

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.Composable
import androidx.ui.core.Text
import androidx.ui.core.setContent
import androidx.ui.material.MaterialTheme
import androidx.ui.tooling.preview.Preview

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Greeting("Android")
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview
@Composable
fun DefaultPreview() {
    MaterialTheme {
        Greeting("Android")
    }
}

ちょっとだけ使ってみたまとめ

Androidのオーソドックスなアーキテクチャの構成だとMVVMが主流だと思いますが、layoutファイルとViewModelのデータバインディングあたりが大きく影響を受けそう。