Contents
Android Studio Giraffe と Kotlin のインストール・環境設定
Android アプリ開発の第一歩は、公式が提供する最新の IDE とコンパイラ を手元に用意することです。本セクションでは、Android Studio Giraffe（2024 系列）と Kotlin の最新版を安全に取得し、Jetpack Compose がすぐに利用できる状態に整える方法を解説します。
ダウンロード手順
公式サイトからの取得は、バージョン番号やサードパーティ製のミラーに依存しない最も確実な方法です。
- ブラウザで https://developer.android.com/studio を開く。
- ページ上部の 「Download Android Studio」 ボタンをクリックすると、OS に合わせたインストーラが自動的にダウンロードされます。
- ダウンロードが完了したら、画面の指示に従ってインストールを進める。インストール途中で 「Android Studio Giraffe」 が表示されたら、選択肢として認識できていることを確認してください。
ポイント：Giraffe には Jetpack Compose のプレビュー機能や Kotlin コンパイラ拡張が標準搭載されており、別途プラグインを導入する必要はありません。
SDK と JDK の設定ポイント
Compose は API 21（Android 5.0）から動作しますが、開発効率とデバッグツールの互換性を考慮して 最新の安定版 SDK を使用することが推奨されます。
- SDK Manager（File → Settings → Appearance & Behavior → System Settings → Android SDK）で 「Android 13 (API 33)」以上 のプラットフォームと、Google Play services、エミュレータなど必要なコンポーネントをインストールします。
- JDK は OpenJDK 17 がデフォルトで埋め込まれています。Settings → Build, Execution, Deployment → Build Tools → Gradle で「Embedded JDK（OpenJDK 17）」が選択されていることを確認してください。
プロジェクト作成時の Compose 有効化
新規プロジェクトウィザードで Compose を有効にした状態のテンプレートを選択すれば、初回ビルドからプレビューが利用できます。
- 「New Project」→ 「Empty Compose Activity」 を選択。
- 言語は Kotlin、最低 SDK は API 21（Android 5.0）以上を指定し、IDE が自動で最新の Kotlin バージョンを適用します。
- プロジェクト作成後に
MainActivity.ktに生成された@Composable関数が表示され、右側の Compose Designer で即座に UI のプレビューが確認できます。
Gradle 設定で Compose を最新に保つ方法
Gradle ファイルはプロジェクト全体の依存関係とビルド設定を管理します。本章では、公式リリース情報に基づいて 安定版だけを使用する ための記述例と、バージョン衝突を防ぐベストプラクティスを紹介します。
build.gradle.kts の基本構成
plugins ブロックでは Android アプリケーションプラグインと Kotlin プラグインを宣言し、執筆時点で最新の安定版 を使用することがポイントです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
plugins { id("com.android.application") kotlin("android") // バージョンは Android Studio が自動管理します } android { compileSdk = 34 // 最新の API レベルを指定 defaultConfig { applicationId = "com.example.composeapp" minSdk = 21 // Compose の最低要件 targetSdk = 34 // 推奨は最新 SDK versionCode = 1 versionName = "1.0" } } |
注意：
kotlin("android")のバージョン番号を手動で書く必要はありません。Android Studio がgradle.propertiesに定義された最新版を自動的に適用します。
composeOptions と kotlinCompilerExtensionVersion の指定
Compose コンパイラ拡張のバージョンは Android Gradle Plugin（AGP）と同期させる必要があります。公式リリースノートで推奨されている 最新版 を明示的に設定すると、プレビュー遅延やビルドエラーを回避できます。
|
1 2 3 4 5 6 7 8 9 |
android { buildFeatures { compose = true } composeOptions { kotlinCompilerExtensionVersion = "1.6.0" // 公式サイトの最新安定版を参照 } } |
依存関係バージョン管理（推奨方式）
Compose 系ライブラリは同一メジャーバージョンで揃えると相互依存性の衝突が起きにくくなります。以下は Android Developers の「Jetpack Compose release notes」 に記載されている最新版例です。
|
1 2 3 4 5 6 7 |
dependencies { implementation("androidx.compose.ui:ui:1.6.0") implementation("androidx.compose.material3:material3:1.2.0") implementation("androidx.activity:activity-compose:1.9.0") implementation("androidx.navigation:navigation-compose:2.8.0") } |
ベストプラクティス：バージョン番号は
gradle/libs.versions.tomlに集約し、libsというエイリアスで参照すると管理が楽になります。
基本的な Composable と UI コンポーネント例
Compose の根幹は @Composable アノテーションです。本節では、最も頻繁に使用する UI 要素を組み合わせたシンプルかつ拡張しやすいコード例を示します。
Text と Button
Text と Button はほぼ全ての画面で登場する基本コンポーネントです。状態管理は remember と mutableStateOf で簡潔に記述できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@Composable fun Greeting(name: String) { Text(text = "Hello, $name!", style = MaterialTheme.typography.titleLarge) } @Composable fun CounterButton() { var count by remember { mutableStateOf(0) } Button(onClick = { count++ }) { Text("Clicked $count times") } } |
Column / Row でレイアウトを組むコツ
縦横の配置は Column と Row が基本です。Modifier のチェーン化と Arrangement.spacedBy を活用すると、デバイスサイズに左右されないレイアウトが実現できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
@Composable fun SimpleLayout() { Column( modifier = Modifier .fillMaxSize() .padding(16.dp), verticalArrangement = Arrangement.spacedBy(12.dp) ) { Greeting(name = "Compose") CounterButton() Row(horizontalArrangement = Arrangement.End) { Button(onClick = { /* TODO */ }) { Text("OK") } } } } |
MaterialTheme の適用方法
全体のデザイン統一は MaterialTheme で行います。カラースキームやタイポグラフィをプロジェクト単位で切り替えられるように、ラップ用関数を作成しておくと便利です。
|
1 2 3 4 5 6 7 8 9 |
@Composable fun AppTheme(content: @Composable () -> Unit) { MaterialTheme( colorScheme = lightColorScheme(), typography = Typography(), content = content ) } |
ポイント：テーマは
AppThemeで包むだけで、内部の全ての Compose コンポーネントに自動的に適用されます。
状態管理と ViewModel のベストプラクティス
UI とロジックを分離することで保守性が大幅に向上します。本章では remember / mutableStateOf と ViewModel + StateFlow を組み合わせた実装例を示し、LiveData との併用方法も解説します。
remember と mutableStateOf の使い分け
remember は画面の再コンポーズ時に状態を保持しますが、プロセス終了や構成変更（回転）では失われます。そのため、一時的な UI ローカルステートに適しています。
|
1 2 3 4 5 6 |
@Composable fun TempToggle() { var checked by remember { mutableStateOf(false) } Switch(checked = checked, onCheckedChange = { checked = it }) } |
ViewModel と StateFlow の組み合わせ
永続的な状態やバックグラウンドでのデータ取得は ViewModel に委譲し、リアクティブに UI へ流す手段として StateFlow を使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class TimerViewModel : ViewModel() { private val _seconds = MutableStateFlow(0) val seconds: StateFlow<Int> = _seconds.asStateFlow() init { viewModelScope.launch { while (true) { delay(1000L) _seconds.value += 1 } } } } |
|
1 2 3 4 5 6 |
@Composable fun TimerScreen(viewModel: TimerViewModel = viewModel()) { val seconds by viewModel.seconds.collectAsState() Text(text = "Elapsed: $seconds sec") } |
LiveData との併用例
既存コードベースで LiveData が残っている場合は、asLiveData() 拡張で Flow 系列に変換できますが、新規実装では StateFlow + collectAsState を第一選択肢としてください。
|
1 2 |
val liveSeconds = viewModel.seconds.asLiveData() |
まとめ：2026 年現在の推奨は「UI は StateFlow → composeTestRule でテスト可能」‑「Legacy は LiveData に変換して互換性を保つ」のハイブリッド戦略です。
Fragment を使わない Navigation‑Compose は、Composable 同士の遷移をシンプルに記述できる点が大きな利点です。本節では依存関係の追加から引数付き遷移まで、一連の流れを具体的に示します。
依存関係の追加
公式リリースページで最新バージョンを確認し、build.gradle.kts に以下を追記します。
|
1 2 3 4 |
dependencies { implementation("androidx.navigation:navigation-compose:2.8.0") } |
NavHost が遷移のコンテナとなり、各画面は composable ブロックで宣言します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
@Composable fun AppNavigator() { val navController = rememberNavController() NavHost(navController, startDestination = "home") { composable("home") { HomeScreen(onDetail = { id -> navController.navigate("detail/$id") }) } composable( route = "detail/{itemId}", arguments = listOf(navArgument("itemId") { type = NavType.IntType }) ) { backStackEntry -> val itemId = backStackEntry.arguments?.getInt("itemId") ?: 0 DetailScreen(itemId = itemId, onBack = { navController.popBackStack() }) } } } |
引数付き遷移と戻り値の受け取り
画面間でデータをやり取りする際は、navArgument に型情報を明示するとコンパイル時に安全性が確保されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@Composable fun HomeScreen(onDetail: (Int) -> Unit) { val items = listOf(1, 2, 3) LazyColumn { items(items) { id -> Button(onClick = { onDetail(id) }) { Text("Open Detail $id") } } } } |
ポイント：戻り値が必要なケースは
savedStateHandleを利用すれば、画面スタック上で安全にデータを受け渡せます。
Live Preview・UI テストと KMM 連携入門
Compose の開発体験を最大化するには Live Preview と 自動テスト が欠かせません。また、Kotlin Multiplatform Mobile（KMM）との連携でコードの再利用性がさらに高まります。
Live Preview の活用法
@Preview アノテーションを付与すると、IDE 側で即座に UI を描画できます。デバイスサイズやテーマ切替もパラメータで制御可能です。
|
1 2 3 4 5 6 7 |
@Preview(name = "Light", uiMode = Configuration.UI_MODE_NIGHT_NO, widthDp = 360, heightDp = 640) @Preview(name = "Dark", uiMode = Configuration.UI_MODE_NIGHT_YES, widthDp = 360, heightDp = 640) @Composable fun PreviewSimpleLayout() { AppTheme { SimpleLayout() } } |
Compose Test Rule の基本
Compose 用の JUnit ルール createComposeRule() は、UI をプログラムから操作・検証できる唯一の手段です。Robolectric が不要な点が実務上の大きなメリットとなります。
|
1 2 3 4 5 6 7 8 9 10 |
@get:Rule val composeTestRule = createComposeRule() @Test fun counterIncrements_whenButtonClicked() { composeTestRule.setContent { CounterButton() } composeTestRule.onNodeWithText("Clicked 0 times").performClick() composeTestRule.onNodeWithText("Clicked 1 times").assertExists() } |
KMM から共通ロジックを呼び出す例
shared モジュールに置いた Kotlin コードは Android と iOS 両方で利用できます。以下は文字列フォーマット関数のサンプルです。
|
1 2 3 4 5 |
// shared/src/commonMain/kotlin/com/example/shared/Util.kt package com.example.shared fun formatGreeting(name: String): String = "Hello, $name!" |
Android 側での呼び出し方はシンプルです。
|
1 2 3 4 5 |
@Composable fun GreetingFromKmm(name: String) { Text(text = com.example.shared.formatGreeting(name)) } |
拡張ポイント：ネットワーク層やデータベース操作を
sharedに集約すれば、iOS アプリでも同一ロジックで実装でき、保守コストが大幅に削減されます。
学習計画の立て方（公式リソース中心）
Jetpack Compose の習得には 体系的な学習ロードマップ が効果的です。ここでは Android Developers が提供する公式ドキュメントと Codelabs をベースに、30 日間で段階的にスキルを高めるプランを提案します。
| 期間 | 学習テーマ | 主な公式リソース |
|---|---|---|
| Day 1‑5 | 環境構築・基本コンポーズ | Set up your development environment |
| Day 6‑10 | 状態管理と ViewModel の実装 | State in Compose、ViewModel integration |
| Day 11‑15 | Navigation と画面遷移 | Navigation for Compose |
| Day 16‑20 | Material 3 カスタムテーマ・アクセシビリティ | Material Design 3 in Compose |
| Day 21‑25 | UI テストと CI/CD 設定 | Testing Jetpack Compose UIs |
| Day 26‑30 | KMM 連携・マルチプラットフォーム実装 | Kotlin Multiplatform Mobile documentation |
実践的な学習のコツ
- 毎日コードを書きながら：Codelab の手順をそのまま自分のプロジェクトにコピーし、動作確認するだけで理解が深まります。
- GitHub でブランチ管理：日ごとにブランチを切り、課題実装後はプルリクエストを作成してコードレビューを受ける練習をすると、実務に近いフローが体感できます。
- 公式サンプルの参照：
androidx/compose-samplesリポジトリには多様なユースケースが掲載されているので、実装のヒントとして活用してください。
重要：本記事で紹介した外部リンクはすべて 公式ドキュメントまたは Google が管理するリポジトリ です。サードパーティサイトへの依存は避け、常に最新版を確認しましょう。
まとめ
- Android Studio Giraffe と Kotlin の最新安定版を公式サイトから取得し、SDK・JDK を正しく設定すればすぐに Compose 開発が開始できます。
- Gradle 設定は バージョン管理を一元化 し、
composeOptionsと依存関係のバージョンは公式リリースノートを参照して更新しましょう。 @Composableの基本構造から状態管理・ViewModel、Navigation‑Compose、テストまで、一連の流れをコード例と共に学ぶことで実務で即戦力になるスキルが身につきます。- 学習は 公式ドキュメントと Codelab を中心に計画的に進め、GitHub で成果物を管理すれば継続的な改善が可能です。
これらの手順とベストプラクティスに沿って環境構築から本格的なアプリ開発まで取り組めば、2026 年以降も変わりゆく Android エコシステムに柔軟に対応できるはずです。 Happy Compose!