Contents
スポンサードリンク
1️⃣ 開発環境のインストール & 基本設定
| 項目 | 推奨バージョン (2024年6月時点) | 備考 |
|---|---|---|
| Android Studio | Giraffe 2024.1.2（Stable） | IDE の最新機能（Compose Preview、Live Edit など）が利用可能 |
| JDK | JDK 21 (OpenJDK) | Gradle が推奨するバージョン |
| Android SDK | API 34 (Android 14) 以上 | compileSdk として使用 |
| Kotlin | 1.9.0 以上 | Compose Compiler 1.6 と互換性あり |
| Jetpack Compose BOM | 2024.10（例: androidx.compose:compose-bom:2024.10.00） |
同一バージョンのライブラリ群をまとめて管理できる |
1‑1️⃣ Android Studio のインストール手順
- 公式ダウンロードページ https://developer.android.com/studio から Giraffe を取得。
- インストーラ実行時に「JDK 21 と Android SDK 33+」を同梱するオプションをオンにしてインストール。
- 初回起動後、
File > Settings > Languages & Frameworks > Kotlinで Kotlin version が1.9.x以上になっていることを確認。
ポイント：IDE のバージョンが古いと Compose Preview が正しく表示されないケースがあります。常に Stable リリースを使用しましょう。
1‑2️⃣ プロジェクト作成時の依存関係設定
build.gradle.kts（アプリモジュール） に以下を追加します。行数は実際に 12 行程度 ですので、コード量が多くなる心配はありません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
plugins { id("com.android.application") kotlin("android") } android { compileSdk = 34 defaultConfig { applicationId = "com.example.composebasic" minSdk = 21 targetSdk = 34 versionCode = 1 versionName = "1.0" } buildFeatures { compose = true } composeOptions { // Compose Compiler 1.6 に合わせたバージョン kotlinCompilerExtensionVersion = "1.6.0" } } dependencies { // BOM でバージョンを一括管理（2024.10 が執筆時点の最新） implementation(platform("androidx.compose:compose-bom:2024.10.00")) implementation("androidx.compose.ui:ui") implementation("androidx.compose.material3:material3") implementation("androidx.activity:activity-compose:1.9.0") } |
- BOM を使うことで
androidx.compose.*系列のバージョン不整合を防げます。 kotlinCompilerExtensionVersionは Compose Compiler のバージョンに合わせて固定すると、IDE が自動で古いコンパイラを選択するリスクが減ります。
2️⃣ 基本的な UI コンポーネントとレイアウト
2‑1️⃣ 最小構成の @Composable 関数
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
@Composable fun GreetingScreen() { Column( modifier = Modifier .fillMaxSize() .padding(16.dp), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { Text( text = "Hello, Jetpack Compose!", style = MaterialTheme.typography.headlineSmall ) Spacer(modifier = Modifier.height(12.dp)) Button(onClick = { /* TODO: click handler */ }) { Text("Tap me") } Spacer(modifier = Modifier.height(12.dp)) Image( painter = painterResource(id = R.drawable.ic_compose), contentDescription = "Compose logo", modifier = Modifier.size(64.dp) ) } } |
- ポイント：
ColumnのModifierで画面全体に広げ、paddingとArrangement/Alignmentを組み合わせるだけでセンタリングが完了します。 - コードは 20 行未満 に収まっており、学習時のハードルを下げられます。
2‑2️⃣ UI のプレビュー
|
1 2 3 4 |
@Preview(showBackground = true, widthDp = 360, heightDp = 640) @Composable fun GreetingScreenPreview() = GreetingScreen() |
@Preview は IDE 上で即座にレンダリングを確認でき、デザインの微調整が高速に行えます。
3️⃣ 状態管理・テーマ・非同期処理
3‑1️⃣ 推奨される State パターン
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@Composable fun Counter() { var count by remember { mutableStateOf(0) } // 派生状態は `derivedStateOf` でキャッシュすると再コンポジションが減少 val isEven = derivedStateOf { count % 2 == 0 } Column(horizontalAlignment = Alignment.CenterHorizontally) { Text("Count: $count (Even: ${isEven.value})") Button(onClick = { count++ }) { Text("Increase") } } } |
rememberがスコープを限定し、画面回転や再コンポジション時に状態が保持されます。derivedStateOfは 計算結果のキャッシュ になるため、countが変化したときだけ評価が走ります。
3‑2️⃣ Material 3 とダイナミックカラー
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@Composable fun MyApp(content: @Composable () -> Unit) { val useDynamic = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S MaterialTheme( colorScheme = if (useDynamic) dynamicLightColorScheme(LocalContext.current) else lightColorScheme(), typography = Typography() ) { content() } } |
- Android 12 以降ではシステムの Monet カラーパレットを取得でき、アプリ全体に統一感が生まれます。
dynamicLightColorScheme/dynamicDarkColorSchemeは Compose Material3 が提供する便利関数です。
3‑3️⃣ Coroutines と UI の連携
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@Composable fun RandomNumberScreen() { // produceState は State を生成しながらコルーチンを走らせる val number by produceState(initialValue = 0) { while (true) { delay(1_000) value = (1..100).random() } } Text( text = "Random: $number", style = MaterialTheme.typography.titleLarge, modifier = Modifier.padding(16.dp) ) } |
produceStateは Compose のライフサイクルに合わせて自動キャンセル されるため、メモリリークの心配がありません。- 同様に
LaunchedEffect(key1 = ...) { … }を使えば、特定キーが変化したときだけコルーチンを再起動できます。
4️⃣ ナビゲーションと高度レイアウト
|
1 2 3 4 5 6 7 8 9 |
@Composable fun AppNavigator(startDestination: String = "home") { val navController = rememberNavController() NavHost(navController, startDestination = startDestination) { composable("home") { HomeScreen(onDetail = { navController.navigate("detail") }) } composable("detail") { DetailScreen(onBack = { navController.popBackStack() }) } } } |
rememberNavControllerが Activity のライフサイクルに紐付くので、手動で破棄処理を書く必要がありません。- 画面遷移は文字列の route で管理し、引数や戻り値も同様に
navArgumentを使って安全に受け渡せます。
4‑2️⃣ Lazy 系列（LazyColumn / LazyVerticalGrid）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@Composable fun PhotoList(photos: List<String>) { LazyColumn( verticalArrangement = Arrangement.spacedBy(8.dp), contentPadding = PaddingValues(horizontal = 16.dp, vertical = 12.dp) ) { items(photos) { url -> Image( painter = rememberAsyncImagePainter(url), contentDescription = null, modifier = Modifier .fillMaxWidth() .height(180.dp) .clip(RoundedCornerShape(8.dp)) ) } } } |
verticalArrangement.spacedByとcontentPaddingが標準でサポートされ、行間・余白の記述がシンプル です。- 大量データでも オンデマンドでアイテムを生成 するため、スクロールが滑らかです。
4‑3️⃣ ConstraintLayout for Compose のサンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
@Composable fun WelcomeScreen(onStart: () -> Unit) { ConstraintLayout(modifier = Modifier.fillMaxSize()) { val (title, button) = createRefs() Text( text = "Welcome", style = MaterialTheme.typography.headlineMedium, modifier = Modifier.constrainAs(title) { top.linkTo(parent.top, margin = 48.dp) start.linkTo(parent.start) end.linkTo(parent.end) } ) Button( onClick = onStart, modifier = Modifier.constrainAs(button) { top.linkTo(title.bottom, margin = 24.dp) centerHorizontallyTo(parent) } ) { Text("Get Started") } } } |
- ConstraintLayout は 複雑な UI（例: カード上の重ね合わせや比率指定）をコードだけで表現でき、XML に依存しません。
centerHorizontallyTo(parent)のように DSL が直感的です。
5️⃣ テスト・パフォーマンス最適化
5‑1️⃣ Compose UI テストの基本フロー
|
1 2 3 4 5 6 7 8 9 |
@get:Rule val composeTestRule = createComposeRule() @Test fun greeting_isDisplayed() { composeTestRule.setContent { GreetingScreen() } composeTestRule.onNodeWithText("Hello, Jetpack Compose!") .assertIsDisplayed() } |
androidx.compose.ui:ui-test-junit4が提供するcreateComposeRule()で JUnit と連携し、UI の表示・クリックを検証できます。- テストは 数行 で書けるので、CI パイプラインに組み込みやすいです。
5‑2️⃣ 再コンポジション削減のベストプラクティス
| 手法 | 効果 |
|---|---|
| State の粒度を細かく | 大きな @Composable が頻繁に再描画されるのを防げます。 |
rememberUpdatedState |
コルーチン内で最新の lambda を取得し、不要なキャンセル/再起動を回避。 |
Side‑effect API のキー管理 (LaunchedEffect, DisposableEffect) |
キーが変化したときだけ実行され、無駄な副作用が発生しません。 |
@PreviewParameter |
複数パラメータでプレビューを自動生成し、デザインバリエーションの確認コストを削減。 |
remember + derivedStateOf の併用 |
計算結果のキャッシュにより、状態変化時の UI 更新回数が最小化されます。 |
ポイント：パフォーマンスは「測定 → 改善 → 再測定」のサイクルで確認してください。
androidx.compose.ui:ui-toolingのLayoutInspectorが実行時の recomposition 回数を可視化してくれます。
6️⃣ 次に挑戦すべきこと
- 公式チュートリアル
-
https://developer.android.com/develop/ui/compose/tutorial
基本から高度なトピックまで段階的に学べます。 -
実践プロジェクト
-
「ToDo アプリ」や「ニュースリーダー」を作り、
ViewModel + StateFlowと Compose の統合を体感しましょう。 -
オンラインコース（無料）
-
Android Developers が提供する Compose Basics コース → https://developer.android.com/courses/android-basics-compose
-
コミュニティ参加
- Kotlin Slack #compose‑dev、GitHub Discussions、Qiita の Compose 系タグで最新情報をキャッチアップ。
まとめ
- Android Studio Giraffe（2024）と Kotlin 1.9、Compose BOM 2024.10 を組み合わせれば、バージョン管理の手間が大幅に削減された安定環境がすぐに構築できます。
@Composableの基本から State 管理、Navigation、Lazy 系列、ConstraintLayout まで網羅的に実装例を示したので、実際のプロジェクトへコピペしながら学習できるはずです。- テストとパフォーマンス最適化は 開発の初期段階から組み込む のがベストプラクティスです。
この手順に沿ってひとつずつ実装すれば、最新の Jetpack Compose エコシステムで 本格的な Android アプリ を自信を持ってリリースできるようになります。 Happy Compose!
スポンサードリンク