【Android開発】Jetpack Composeを使ってみてわかったメリット・デメリット
こんにちは、やまだゆうです。
今回はAndroidアプリ開発の強力な味方であるJetpack Composeについて紹介します。
スポンサーリンク
Jetpack Composeとは
Jetpack ComposeはAndroidアプリのUI開発ツールキッドです。
少ないコード、直感的、パワフルといった謳い文句で推奨されています。
Jetpack Compose でより優れたアプリを迅速にビルドする
Jetpack Composeのメリット
ぼくも最近になってJetpack Composeを使ってみたので、率直に感じたメリットをお伝えします。
1つのKotlinファイルで画面を構築できる
メリットの1つ目は、1つのKotlinファイルで画面を構築できることです。
従来のAndroidアプリ開発では、Viewファイルと呼ばれるxml形式のファイルとビューの動作を定義するKotlinファイルの2つでアプリの画面を構築していました。
Jetpack Composeを利用することで、画面の見た目を構築するファイルが2分の1になります。
書いたコードから画面のイメージがしやすい
Jetpack Composeで書いた以下のコードを見てください。
@Composable
fun ParticipantContent(onButtonClick: (name: String, chatRoom: String) -> Unit) {
Column(
modifier = Modifier.fillMaxSize()
) {
var nameText by rememberSaveable { mutableStateOf("")}
var isNameTextError by rememberSaveable { mutableStateOf(false)}
Text(text = "ユーザー名")
if (isNameTextError) {
Text(
text = "名前が未入力です",
color = MaterialTheme.colorScheme.error
)
}
TextField(
value = nameText,
isError = isNameTextError,
onValueChange = { newText ->
isNameTextError = newText.isBlank()
nameText = newText
},
placeholder = { Text("例：山田 太郎") }
)
var chatRoomText by rememberSaveable { mutableStateOf("")}
var isChatRoomTextError by rememberSaveable { mutableStateOf(false)}
Text(text = "チャットルーム名")
if (isChatRoomTextError) {
Text(
text = "チャットルーム名が未入力です",
color = MaterialTheme.colorScheme.error
)
}
TextField(
value = chatRoomText,
isError = isChatRoomTextError,
onValueChange = {
isChatRoomTextError = it.isBlank()
chatRoomText = it
},
placeholder = { Text("例：わいわいチャット") }
)
Button(onClick = {
if (nameText.isBlank()) {
isNameTextError = true
} else if (chatRoomText.isBlank()) {
isChatRoomTextError = true
} else {
onButtonClick(nameText, chatRoomText)
}
}) {
Text(text = "チャットルームを開く")
}
}
}サンプルとしては長いですが、どんな画面になるかイメージできますでしょうか？
このプログラムを実際にビルドすると次のようになります。
xmlファイルで見た目を構成していた頃に比べると、コードだけでだいたいどんな画面になるかイメージしやすくなったと思いませんか？
xml形式で記述すると、多数の属性情報を書かなければいけないので理解しにくいとぼくは思っていました。
プレビュー機能が優秀
Jetpack Composeにはプレビュー機能があります。
レイアウト プレビュー | Jetpack Compose | Android Developers
プレビュー機能の使い方は簡単です。
- 引数を必要としないラッパー関数を作成する
- ラッパー関数に
@Previewのアノテーションを追加する - ラッパー関数からComposableな関数を呼び出す
これだけです。
次のPreviewParticipantContent関数は、「書いたコードから画面のイメージがしやすい」で紹介したParticipantContent関数をプレビューする関数です。
@Preview
@Composable
private fun PreviewParticipantContent() {
ParticipantContent(onButtonClick = { name, chatRoom ->
Intent(this, ChatActivity::class.java).apply{
this.putExtra("name", name)
this.putExtra("chatRoom", chatRoom)
}.run {
startActivity(this)
}
})
}Android Studio上にプレビューが表示されます。
いちいちアプリ全体をビルドせずに、確認したい画面だけ手早く確認することができるところが便利です。
スポンサーリンク
Jetpack Composeのデメリット
今度はデメリットについても話します。
途中から導入するときのドキュメントがわかりにくい
すでに開発しているAndroidアプリがある場合、途中からJetpack Composeを追加する手順が必要になります。
既存アプリにJetpack Composeを導入する手順を解説している公式ドキュメントがあるのですが、非常に意味がわかりにくい部分があります。
クイック スタート | Jetpack Compose | Android Developers
Jetpack Composeのライブラリを選択して追加するのですが、その説明が以下のようになっています。
うんざりするような英語の説明です。
何度もドキュメントを読んでみて、ぼくの場合はこんな感じの依存関係に落ち着きました。
dependencies {
implementation platform('androidx.compose:compose-bom:2023.01.00')
androidTestImplementation platform('androidx.compose:compose-bom:2023.01.00')
implementation("androidx.compose.material3:material3")
implementation("androidx.activity:activity-compose:1.7.2")
// Android Studio Preview support
implementation("androidx.compose.ui:ui-tooling-preview")
debugImplementation("androidx.compose.ui:ui-tooling")
}この辺の設定の仕方については別の記事にまとめようと思います。
Modifierに使いなれるのが大変
Jetpack ComposeではテキストのクリックやスクロールなどをModifierクラス関数を使って定義します。
Compose 修飾子 | Jetpack Compose | Android Developers
このクラスの定義を覗いてみるとわかりますが、非常にたくさんの関数が用意されています。
基本的なことはほぼModifierクラスでできるようですが、使い心地になれるのが大変かもなぁというのを率直に感じました。
とはいえ、1つのクラスを覚えるだけでだいたいの見た目の操作ができるのはメリットともいえますね！
yamaday0uを応援お願いします！あなたの１クリックが励みになります。
>> にほんブログ村