これから始めるJetpack Compose

宮城アプリ開発勉強会 2025 Android編

Transcript

1. これから始めるJetpack Compose 2025.7.11 半田 北斗
2. 自己紹介 • 株式会社ビデオマーケット所属 • 2020年からアプリエンジニアとして活動しています。 • 最近はFlutterを中心に、ときどきiOS/Android のネイティブ開発。 • 2023年から仙台在住。
3. プレゼンのターゲット • Androidアプリを開発したことがない人 • XMLベースのUIしか書いたことがない人 • FlutterやReactNative、SwiftUIの経験者で、Jetpack Composeに興味がある 人
4. 今日のトピック • Jetpack Composeってなに？（ざっくり） • Jetpack Composeの便利なところ • Gemini in Android Studio
5. Jetpack Composeってなに？ （ざっくり）
6. Jetpack Composeってなに？ • Androidアプリ開発向けのUIツールキット • Kotlinベースで宣言的にUIが書ける • レイアウトをコードで完結できる（XML不要！）
7. 旧XMLベースの場合 xml <TextView android:id="@+id/helloTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello Compose!" /> kotlin val helloTextView: TextView = findViewById(R.id.helloTextView) helloTextView.text = "Hello Compose!" • UIはXMLとコードで別々に管理する必要がある • Viewの紐付けや初期化が手間…！
8. Jetpack Composeの場合 kotlin @Composable fun Greeting() { Text(text = "Hello Compose!") } • UIがKotlinコードだけで完結 • findViewById不要でシンプル ←Jetpack Composeを使ったUI部品(Composable)を作るアノテーション ←中で他のComposableを呼び出せる
9. Recomposition(再描画) @Composable fun Counter() { var count by remember { mutableStateOf(0) } Button(onClick = { count++ }) { Text("Clicked $count times") // countの値が変わると再描画される } }
10. Jetpack Composeの 便利なところ
11. プレビュー機能 • Composableに @Preview をつけるとプレビュー機能で確認できる • ビルドやエミュレータなしでUIを確認できる • レイアウト確認や調整がやりやすい
12. プレビュー機能
13. UIテストが始めやすい @get:Rule val composeTestRule = createComposeRule() @Test fun testHelloComposeIsDisplayed() { composeTestRule.setContent { MainScreen() } composeTestRule .onNodeWithText("Hello Compose") .assertExists() } • ComposeTestRuleにComposableを 渡すだけでテストできる • Activity等も基本不要
14. ナビゲーションが管理しやすい • ComposableからComposableへ （Fragmentなどの立ち上げ不要） • 画面遷移ロジックが Kotlinで一元管 理できる • 画面遷移が navController.navigate("route") で シンプル kotlin @Composable fun AppNavGraph() { val navController = rememberNavController() NavHost(navController, startDestination = "home") { composable("home") { HomeScreen(onNext = { navController.navigate("detail") }) } composable("detail") { DetailScreen() } ….
15. Navigation 3 (Nav3) • 2025年5月にalpha版としてリリースされ た Jetpack Compose専用のナビゲーショ ンライブラリ • BackStack を自分で管理 • 詳しくは公式のブログ記事を参照 val backStack = remember { mutableStateListOf<Any>(Home) } NavDisplay( backStack = backStack, onBack = { backStack.removeLastOrNull() }, entryProvider = { route -> when (route) { is Home -> NavEntry(route) { Column { Text("Welcome to Nav3") Button(onClick = { backStack.add(Product("123")) }) { Text("Click to navigate") } } } is Product -> NavEntry(route) { Text("Product ${route.id}") }...
16. XMLベースのアプリから移行がしやすい • XMLベースのアプリに部分的に導入できる • ActivityやFragment を丸ごとComposeに置き換える必要はない • 少しずつ置き換えられるので導入ハードルが低め
17. XMLベースのアプリから移行がしやすい xml <LinearLayout (略) <androidx.compose.ui.platform.ComposeView android:id="@+id/compose_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> kotlin override fun onCreateView(...): View { // (略) val composeView = view.findViewById<ComposeView>(R.id.compose_vie w) composeView.setContent { MaterialTheme { Text("Compose!") // ←ここだけComposable } }...
18. Gemini in Android Studio ※Gemini使用時のデータやプライバシーなどについては公式ドキュメント等をご確認ください： https://developer.android.com/studio/preview/gemini/data-and-privacy
19. コード補完 • コード補完が便利 • 文脈を理解した上で提案してくる • （コンテキスト共有を有効 にしないと機能しない）
20. チャット機能 • Android Studio内 でチャット形式で質 問できる • 実装方法を教え て、バグってる理 由を教えて、改善 案を提案してetc….
21. 使い方いろいろ... • コード変換 • コードについて説明する • 改善案の提案 • 単体テストのシナリオを生成する（プレビュー） • ドキュメントを生成する（プレビュー） • etc… ※ https://developer.android.com/studio/preview/gemini/features から抜粋
22. エージェントモード • Android Studio Narwhal Feature Drop Canary 4 以降から追加された • 目的を伝えると、Geminiがコード修正を提案 • 提案された変更を確認 → 採用 or 拒否
23. エージェントモード
24. まとめ
25. まとめ Jetpack Composeは… • 宣言的UIで書きやすい • Previewが便利 • 段階移行やUIテストもやりやすい • 困ったらGeminiに聞ける • 興味が出たら→公式のチュートリアルなどが充実しているので ぜひ触ってみてください！
26. ご清聴ありがとうございました🙏