Zenn
📱

Androidアプリ開発初心者がJetpack Composeを使ってみる

に公開
Android
Jetpack Compose
tech

Jetpack Composeとは

Jetpack ComposeとはAndroidのアプリケーションのUIを記述するいわゆる宣言的UIフレームワークです。
簡単に言うとKotlin言語でUIを書けるフレームワークです。

https://developer.android.com/compose

によると

Jetpack Compose is Android's recommended modern toolkit for building native UI.
It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.

とあり、Android開発において推奨されているモダンなネイティブUIキットだそうです。

細かい導入手順や使用方法については公式のドキュメントのここやここ、その他、ここも参考になりました。

Jetpack Composeの一例

Jetpack ComposeのScaffoldを使用してTopAppBarでタイトルバーとその中にドロップダウンメニュー、メインのコンテンツ部分の縦中央にボタン2つを並べるUI画面を作成してみました。

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ScaffoldMain(
  ...
) {
  Scaffold(
    topBar = {
      TopAppBar(
        title = { Text("App title") },
        colors = TopAppBarDefaults.topAppBarColors(
          // ...
        ),
        actions = {
          IconButton(...) {
            Icon(...)
          }
          DropdownMenu(...) {
            DropdownMenuItem(
              text = { Text("Dropdown Menu") },
              onClick = {...},
            )
          }
        },
      )
    },
    content = { paddingValues ->
      Column(
        modifier = Modifier.fillMaxSize().padding(paddingValues),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
      ) {
        Button(...) {
          onClick = {...},
          Text("Button1")
        }
        Button(...) {
          Text("Button2")
        }
      }
    }
  )
}

以下のような画面となります

<img width="50%" alt="Jetpack Compose UI" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3791092/3a446141-276f-48e6-a659-a6026d80d399.png">

Jetpack Composeを使用してみて

Androidアプリ開発初心者の私が既存のXMLを使用した場合と比較もしつつ、 Jetpack Composeを使用してみた感想を書いていきたいと思います。

Pros

UIのXMLを編集する必要がない

Android StudioのGUIからマウスを使用してのUI編集や、XMLの直接編集を行わずに、ロジックに近いところ(同じファイル)でKotlinでUI書けるのはやっぱり良いところ

反対にリソースを一元管理したいリテラル文字列は以前と同様に res/values/strings.xml で管理できる。

UIをプレビューで確認しながら書ける

1つ目と密接に関係しているのですがKotlinでUIを書きながらプレビューで確認できます。

これはプレビュー用に関数を別に定義することで柔軟な設定ができます。これによりプレビューがうまくいない場合でも対処できます。

下記のように @Preview(showBackground = true) をつけると、その関数をプレビューできます。

ここで別クラスの起動確認用フラグを直接関数内で使用しているとプレビューが表示されない問題があったのですが、依存するフラグを引数として渡すように変更しプレビュー用には適当な値を設定することでプレビューが表示できるようになりました。

@Composable
fun UIMain() {
     ...
     ScaffoldMain(
          checkFlag = { ExternalClassInstance.isRunning },
     )
     ...
}

@Preview(showBackground = true)
@Composable
fun PreviewUIMain() {
     ...
     ScaffoldMain(
          checkFlag = { false },
     )
     ...
}

UIのテーマが適応されて簡単に見た目が良くなる

これもConsに後述する現環境でのひと手間がありますが、一度設定されればあとはMaterial Designなどが適応されたUIを簡単に構築できました。

Cons

Jetpack ComposeのDSL内外で使用するメソッドが異なる

例えばCompose内の Text でXMLリソースのテキストを取得するには stringResource() を使用する必要がありますが

Text(stringResource(R.string.txt_greeting))

それ以外の普通の関数や無名関数内などでは getString() を使用します。

text = context.getString(R.string.txt_greeting)

この辺りは慣れないと同じソースファイル内の近い場所で使い分けが必要になるので混乱するかもしれません。

新規プロジェクトのテンプレートが無い

現状(2025/06)では、Android Studioの新規プロジェクトのテンプレートにはXMLを使用したプロジェクトしかなく、Jetpack Composeを最初から使えるテンプレートがないので、Jetpack Composeを使用し始めるのに多少の手間が必要でした。

Material Design3を使用するときの問題

環境が成熟していないのかMaterial Designのバージョン3を使用するには現状では実験的な機能を明示的にオプトインする必要がありました。

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun UIMain(...)

まとめ

Prosに比べてConsが多くマイナス面が多く感じるかもしれません。この要因としては現時点での環境が成熟してないという点が大きく、この辺りは時とともに改善されてゆくと思います。

それらのマイナス要因があってもなおJetpack Composeの記述のしやすさ確認しやすさなどの体験はだいぶ良かったと思います。

Discussion