Android Studio Electric Eelで始めるJetpack Compose入門ガイド

2026年4月29日

お得なお知らせ

スポンサードリンク

AI時代のキャリア構築

プログラミング学習、今日から動き出す

「何から始めるか」で止まっている人こそ、無料説明会や本で自分に合うルートを30分で確定できます。

Enjoy Tech!｜月額制でWeb系に強い▶ (Kindle本)ＩＴエンジニアの転職学｜後悔しないキャリア戦略▶

▶ AIコーディング環境なら実践Claude Code入門（Amazon）が実務で即使える入門書です。Amazonベストセラーにも選ばれていますよ。

Contents

1 1. 開発環境のセットアップ
- 1.1 1‑1. Android Studio のインストールと JDK 設定
- 1.2 1‑2. バージョンカタログ（libs.versions.toml）の簡易導入
2 2. 基本的なコンポーザブルと Modifier
- 2.1 2‑1. @Composable 関数の書き方
- 2.2 2‑2. Modifier のチェーンと順序
3 3. 状態管理 ― ローカルステート & ViewModel
- 3.1 3‑1. ローカルステートの典型例
- 3.2 3‑2. ViewModel と Compose の連携
4 4. レイアウト・テーマ・プレビュー
5 5. ナビゲーションと UI テスト
- 5.1 5‑1. Navigation Compose の基本構成
- 5.2 5‑2. Compose 用 UI テスト（JUnit + Compose Test Rule）
6 6. 参考情報・公式リンク
7 7. まとめ

スポンサードリンク

1. 開発環境のセットアップ

項目	推奨設定（執筆時点）	補足
IDE	Android Studio Arctic Fox 2024.2 以降（Stable チャンネル）	IDE のバージョンは「Help → Check for Updates」から最新を取得してください。
JDK	JDK 21（OpenJDK または AdoptOpenJDK）	Compose は JDK 11 以上で動作しますが、公式リリースノートでは JDK 21 が推奨されています（Compose Release Notes）。
Gradle	Gradle 8.5（Android Gradle Plugin 8.5.0）	Android Gradle Plugin (AGP) のバージョンは `gradle-wrapper.properties` で管理します。
Compose	Jetpack Compose v1.6.x 系列	各プロジェクトの `composeOptions.kotlinCompilerExtensionVersion` に最新の 1.6 系を指定してください（例: `"1.6.0"`）。

1‑1. Android Studio のインストールと JDK 設定

Android Studio をダウンロード
公式ページ https://developer.android.com/studio から Stable ビルドを取得。
JDK 21 を IDE に認識させる

text File > Settings (Preferences) > Build, Execution, Deployment > Build Tools > Gradle → “Gradle JDK” を「Embedded JDK」またはインストール済みの JDK 21 に変更

Compose プロジェクトを作成
「File > New > New Project」→「Empty Compose Activity」を選択。

作成された app/build.gradle.kts の主要部分は以下のようになります（※バージョン番号は執筆時点の例です）。

kotlin plugins { id("com.android.application") kotlin("android") }


android {

       compileSdk = 35                      // 実際の最新 SDK に合わせて更新


		
		
			
			

			
			   defaultConfig {
       applicationId = "com.example.composeintro"
       minSdk = 24
       targetSdk = 35                   // 同上
       versionCode = 1
       versionName = "1.0"
   }

   buildFeatures { compose = true }

   composeOptions {
       kotlinCompilerExtensionVersion = "1.6.0"   // 最新の Compose コンパイラ拡張版
   }

   compileOptions {
       sourceCompatibility = JavaVersion.VERSION_21
       targetCompatibility = JavaVersion.VERSION_21
   }

   kotlinOptions { jvmTarget = "21" }

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
				
						   defaultConfig {
       applicationId = "com.example.composeintro"
       minSdk = 24
       targetSdk = 35                   // 同上
       versionCode = 1
       versionName = "1.0"
   }
 
   buildFeatures { compose = true }
 
   composeOptions {
       kotlinCompilerExtensionVersion = "1.6.0"   // 最新の Compose コンパイラ拡張版
   }
 
   compileOptions {
       sourceCompatibility = JavaVersion.VERSION_21
       targetCompatibility = JavaVersion.VERSION_21
   }
 
   kotlinOptions { jvmTarget = "21" }
 
					
				
			
		


}

dependencies { implementation("androidx.core:core-ktx:1.13.0") implementation("androidx.activity:activity-compose:1.9.0") implementation(platform("androidx.compose:compose-bom:2024.09")) implementation("androidx.compose.ui:ui") implementation("androidx.compose.material3:material3") }

1‑2. バージョンカタログ（`libs.versions.toml`）の簡易導入

本稿では「Version Catalog」＝バージョンカタログを使った記述例も示しますが、初めての方は build.gradle.kts に直接依存を書き込むだけでも問題ありません。
以下は 最小構成 の TOML ファイルです。

# gradle/libs.versions.toml
[versions]
compose = &quot;2024.09&quot;          # Compose BOM のバージョン（毎年更新される）
kotlin = &quot;2.0.0&quot;
agp = &quot;8.5.0&quot;

[libraries]
androidx-compose-ui = { module = &quot;androidx.compose.ui:ui&quot;, version.ref = &quot;compose&quot; }
androidx-compose-material3 = { module = &quot;androidx.compose.material3:material3&quot;, version.ref = &quot;compose&quot; }

[plugins]
android-application = { id = &quot;com.android.application&quot;, version.ref = &quot;agp&quot; }
kotlin-android = { id = &quot;org.jetbrains.kotlin.android&quot;, version.ref = &quot;kotlin&quot; }

# gradle/libs.versions.toml

[versions]

compose = "2024.09" # Compose BOM のバージョン（毎年更新される）

kotlin = "2.0.0"

agp = "8.5.0"

[libraries]

androidx-compose-ui = { module = "androidx.compose.ui:ui", version.ref = "compose" }

androidx-compose-material3 = { module = "androidx.compose.material3:material3", version.ref = "compose" }

[plugins]

android-application = { id = "com.android.application", version.ref = "agp" }

kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }

build.gradle.kts 側は次のように呼び出します。

plugins {
    alias(libs.plugins.android.application)
    alias(libs.plugins.kotlin.android)
}

plugins {

alias(libs.plugins.android.application)

alias(libs.plugins.kotlin.android)

}

ポイント：バージョンカタログを導入すると、Compose のアップデートや Kotlin バージョン変更が「一箇所」の修正で済むため、長期保守が楽になります。

2. 基本的なコンポーザブルと Modifier

2‑1. `@Composable` 関数の書き方

@Composable
fun Greeting(name: String) {
    Text(text = &quot;Hello, $name!&quot;)
}

@Composable

fun Greeting(name: String) {

Text(text = "Hello, $name!")

}

宣言的 UI：Compose コンパイラが @Composable を検知し、再描画（recomposition）を自動で管理します。
副作用は排除：UI の描画以外の処理は LaunchedEffect・SideEffect など別枠で記述してください。

2‑2. Modifier のチェーンと順序

Button(
    onClick = { /* TODO */ },
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
        .height(48.dp)          // ← ここまでがレイアウト系
        .background(Color.Cyan) // ← 背景は描画系なので最後に書くと意図通りになる
) {
    Text(&quot;Submit&quot;)
}

Button(

onClick = { /* TODO */ },

modifier = Modifier

.fillMaxWidth()

.padding(16.dp)

.height(48.dp) // ← ここまでがレイアウト系

.background(Color.Cyan) // ← 背景は描画系なので最後に書くと意図通りになる

) {

Text("Submit")

}

順序が結果に直結：padding → background とすればパディング領域外まで背景色が広がります。
再利用しやすさ：共通のスタイルは Modifier.then(customModifier) で別ファイルに切り出すと便利です。

3. 状態管理 ― ローカルステート & ViewModel

手法	用途	実装例
`remember { mutableStateOf(...) }`	UI の一時的な状態（ボタンのクリック数、テキスト入力）	`kotlin var count by remember { mutableStateOf(0) }`
`viewModel()` + `mutableStateOf`	画面遷移やプロセス復元が必要な長期データ	詳細は §3‑2 を参照

3‑1. ローカルステートの典型例

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }

    Button(
        onClick = { count++ },
        modifier = Modifier.padding(16.dp)
    ) {
        Text(&quot;Clicked $count times&quot;)
    }
}

@Composable

fun Counter() {

var count by remember { mutableStateOf(0) }

Button(

onClick = { count++ },

modifier = Modifier.padding(16.dp)

) {

Text("Clicked $count times")

}

remember は Compose のスコープ（関数呼び出し単位）に紐付くため、画面が破棄されると状態も失われます。

3‑2. ViewModel と Compose の連携

class CounterViewModel : ViewModel() {
    private val _count = mutableStateOf(0)
    val count: State&lt;Int&gt; = _count

    fun increment() { _count.value++ }
}

@Composable
fun CounterScreen(viewModel: CounterViewModel = viewModel()) {
    val count by viewModel.count   // Compose 側は read‑only にして安全に購読

    Button(onClick = { viewModel.increment() }) {
        Text(&quot;Clicked $count times&quot;)
    }
}

class CounterViewModel : ViewModel() {

private val _count = mutableStateOf(0)

val count: State<Int> = _count

fun increment() { _count.value++ }

}

@Composable

fun CounterScreen(viewModel: CounterViewModel = viewModel()) {

val count by viewModel.count // Compose 側は read‑only にして安全に購読

Button(onClick = { viewModel.increment() }) {

Text("Clicked $count times")

}

ライフサイクル安全：ViewModel は onCleared() が呼ばれるまで生存し、プロセスが再生成された際にも SavedStateHandle と組み合わせて状態復元が可能です（公式ドキュメント: ViewModel Overview）。

4. レイアウト・テーマ・プレビュー

4‑1. 基本レイアウトコンポーネント

コンポーネント	主な用途
`Column` / `Row`	縦・横のスタック配置。軽量でパフォーマンスが高い。
`Box`	重ね合わせ（Z‑order）やサイズ調整に便利。
`ConstraintLayout` (compose)	複雑な相対配置をコードだけで実現。

ConstraintLayout のサンプル

@Composable
fun LayoutDemo() {
    ConstraintLayout(
        modifier = Modifier.fillMaxSize().padding(16.dp)
    ) {
        val (title, image, description) = createRefs()

        Text(
            &quot;Compose Demo&quot;,
            style = MaterialTheme.typography.headlineMedium,
            modifier = Modifier.constrainAs(title) {
                top.linkTo(parent.top)
                start.linkTo(parent.start)
            }
        )

        Image(
            painter = painterResource(R.drawable.sample),
            contentDescription = null,
            modifier = Modifier
                .size(120.dp)
                .constrainAs(image) {
                    top.linkTo(title.bottom, margin = 16.dp)
                    start.linkTo(parent.start)
                }
        )

        Column(
            modifier = Modifier.constrainAs(description) {
                top.linkTo(image.top)
                start.linkTo(image.end, margin = 12.dp)
                end.linkTo(parent.end)
                width = Dimension.fillToConstraints
            }
        ) {
            Text(&quot;Description placed next to the image.&quot;)
            Spacer(Modifier.height(8.dp))
            Button(onClick = {}) { Text(&quot;Action&quot;) }
        }
    }
}

@Composable

fun LayoutDemo() {

ConstraintLayout(

modifier = Modifier.fillMaxSize().padding(16.dp)

) {

val (title, image, description) = createRefs()

Text(

"Compose Demo",

style = MaterialTheme.typography.headlineMedium,

modifier = Modifier.constrainAs(title) {

top.linkTo(parent.top)

start.linkTo(parent.start)

}

)

Image(

painter = painterResource(R.drawable.sample),

contentDescription = null,

modifier = Modifier

.size(120.dp)

.constrainAs(image) {

top.linkTo(title.bottom, margin = 16.dp)

start.linkTo(parent.start)

}

)

Column(

modifier = Modifier.constrainAs(description) {

top.linkTo(image.top)

start.linkTo(image.end, margin = 12.dp)

end.linkTo(parent.end)

width = Dimension.fillToConstraints

}

) {

Text("Description placed next to the image.")

Spacer(Modifier.height(8.dp))

Button(onClick = {}) { Text("Action") }

}

4‑2. Material 3 テーマの一元管理

private val LightColors = lightColorScheme(
    primary = Color(0xFF6750A4),
    secondary = Color(0xFF625B71),
    background = Color(0xFFFFFBFE)
)

private val DarkColors = darkColorScheme(
    primary = Color(0xFFD0BCFF),
    secondary = Color(0xFFCCC2DC),
    background = Color(0xFF1C1B1F)
)

@Composable
fun ComposeIntroTheme(
    useDarkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -&gt; Unit
) {
    val colors = if (useDarkTheme) DarkColors else LightColors
    MaterialTheme(
        colorScheme = colors,
        typography = Typography(),
        content = content
    )
}

private val LightColors = lightColorScheme(

primary = Color(0xFF6750A4),

secondary = Color(0xFF625B71),

background = Color(0xFFFFFBFE)

)

private val DarkColors = darkColorScheme(

primary = Color(0xFFD0BCFF),

secondary = Color(0xFFCCC2DC),

background = Color(0xFF1C1B1F)

)

@Composable

fun ComposeIntroTheme(

useDarkTheme: Boolean = isSystemInDarkTheme(),

content: @Composable () -> Unit

) {

val colors = if (useDarkTheme) DarkColors else LightColors

MaterialTheme(

colorScheme = colors,

typography = Typography(),

content = content

)

}

一括変更：ComposeIntroTheme に色・タイポグラフィを集約すれば、全画面で同じ外観になる。
ダークモード自動適用：isSystemInDarkTheme() が端末設定と連動します。

4‑3. `@Preview` を使った即時確認

@Preview(name = &quot;Light&quot;, uiMode = Configuration.UI_MODE_NIGHT_NO, showBackground = true)
@Preview(name = &quot;Dark&quot;, uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
@Composable
fun GreetingPreview() {
    ComposeIntroTheme {
        Greeting(name = &quot;Compose&quot;)
    }
}

@Preview(name = "Light", uiMode = Configuration.UI_MODE_NIGHT_NO, showBackground = true)

@Preview(name = "Dark", uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)

@Composable

fun GreetingPreview() {

ComposeIntroTheme {

Greeting(name = "Compose")

}

複数バリエーション：同一関数に複数の @Preview を付与すれば、ライト／ダーク双方を同時に確認できる。
インタラクティブプレビュー（Android Studio Flamingo 以降）: showSystemUi = true とするとステータスバーやナビゲーションバーも再現可能です。

5. ナビゲーションと UI テスト

5‑1. Navigation Compose の基本構成

// app/build.gradle.kts に依存追加（バージョンカタログを使わない例）
implementation(&quot;androidx.navigation:navigation-compose:2.8.0&quot;)

@Composable
fun AppNavHost(navController: NavHostController = rememberNavController()) {
    NavHost(navController, startDestination = &quot;home&quot;) {
        composable(&quot;home&quot;) { HomeScreen(onNavigate = { navController.navigate(&quot;detail/$it&quot;) }) }
        composable(
            route = &quot;detail/{itemId}&quot;,
            arguments = listOf(navArgument(&quot;itemId&quot;) { type = NavType.IntType })
        ) { backStackEntry -&gt;
            val id = backStackEntry.arguments?.getInt(&quot;itemId&quot;) ?: 0
            DetailScreen(itemId = id)
        }
    }
}

// app/build.gradle.kts に依存追加（バージョンカタログを使わない例）

implementation("androidx.navigation:navigation-compose:2.8.0")

@Composable

fun AppNavHost(navController: NavHostController = rememberNavController()) {

NavHost(navController, startDestination = "home") {

composable("home") { HomeScreen(onNavigate = { navController.navigate("detail/$it") }) }

composable(

route = "detail/{itemId}",

arguments = listOf(navArgument("itemId") { type = NavType.IntType })

) { backStackEntry ->

val id = backStackEntry.arguments?.getInt("itemId") ?: 0

DetailScreen(itemId = id)

}

型安全：navArgument に NavType.IntType を指定すれば、文字列から整数への変換エラーがコンパイル時に防げます。
スケーラビリティ：画面が増えても NavHost の中に composable エントリを足すだけで完結します。

5‑2. Compose 用 UI テスト（JUnit + Compose Test Rule）

@get:Rule val composeTestRule = createComposeRule()

@Test fun counterIncrementsOnClick() {
    composeTestRule.setContent { Counter() }

    // 初期状態を検証
    composeTestRule.onNodeWithText(&quot;Clicked 0 times&quot;).assertExists()

    // ボタンタップをシミュレート
    composeTestRule.onNodeWithText(&quot;Clicked 0 times&quot;)
        .performClick()

    // カウントが増えていることを確認
    composeTestRule.onNodeWithText(&quot;Clicked 1 times&quot;).assertExists()
}

@get:Rule val composeTestRule = createComposeRule()

@Test fun counterIncrementsOnClick() {

composeTestRule.setContent { Counter() }

// 初期状態を検証

composeTestRule.onNodeWithText("Clicked 0 times").assertExists()

// ボタンタップをシミュレート

composeTestRule.onNodeWithText("Clicked 0 times")

.performClick()

// カウントが増えていることを確認

composeTestRule.onNodeWithText("Clicked 1 times").assertExists()

}

テスト対象は純粋な Compose 関数なので、エミュレータや実機は不要です。
CI パイプライン（GitHub Actions, Bitrise 等）に組み込むと、UI の回帰テストが自動化できます。

6. 参考情報・公式リンク

内容	URL
Android Studio ダウンロード	https://developer.android.com/studio
Jetpack Compose リリースノート（2026‑04‑更新）	https://developer.android.com/jetpack/androidx/releases/compose
Compose BOM の最新バージョン一覧	https://developer.android.com/jetpack/compose/bom
Material 3 デザインガイドライン	https://m3.material.io/
Navigation‑Compose ドキュメント	https://developer.android.com/jetpack/compose/navigation
Compose Testing の公式チュートリアル	https://developer.android.com/jetpack/compose/testing

7. まとめ

環境構築
Android Studio（Stable）＋JDK 21 をインストールし、build.gradle.kts に Compose v1.6 系を指定すれば最新機能が使える。バージョンは公式サイトで随時確認すること。
コードの書き方
@Composable と Modifier のチェーンで UI を宣言的に構築し、ポイントごとに順序を意識するとレイアウトが安定する。
状態管理
短期ステートは remember { mutableStateOf }、長期・画面遷移が絡むケースは ViewModel と組み合わせるのがベストプラクティス。
テーマとプレビュー
Material 3 の colorScheme／Typography を一箇所に集約し、@Preview で即座に見た目を確認できる環境を整える。
ナビゲーション & テスト
Navigation‑Compose が提供する型安全な遷移と createComposeRule() による UI テストは、実務プロジェクトでも推奨される標準手法です。

次のステップ：本稿で紹介したテンプレートをベースに、自分だけの機能（データ取得・リポジトリ層）やアーキテクチャ（MVVM、MVI など）を組み込んでいくと、実務レベルの Compose アプリが完成します。公式サンプルコードや最新ブログ記事を定期的にチェックし、API の変更に追従してください。

この記事は2026年4月29日時点の情報に基づいています。バージョン番号や API の互換性については、リリースごとに公式ドキュメントで最新情報をご確認ください。

スポンサードリンク

お得なお知らせ

スポンサードリンク

AI時代のキャリア構築

プログラミング学習、今日から動き出す

「何から始めるか」で止まっている人こそ、無料説明会や本で自分に合うルートを30分で確定できます。

Enjoy Tech!｜月額制でWeb系に強い▶ (Kindle本)ＩＴエンジニアの転職学｜後悔しないキャリア戦略▶

▶ AIコーディング環境なら実践Claude Code入門（Amazon）が実務で即使える入門書です。Amazonベストセラーにも選ばれていますよ。

-Kotlin

comment コメントをキャンセル

: Kotlin

Android Studio インストールと最新Kotlinプロジェクト作成ガイド

Android Studio の最新版インストールから Empty Activity を使った Kotlin アプリ作成、エミュレータ実行、GitHub 初期コミットまでの一連フローをまとめました。

: Kotlin

Android Studio Flamingoで始めるKotlin/Compose入門と開発手順

Flamingo版Android StudioとOpenJDK17を正しく導入し、KotlinとComposeの基礎からプロジェクト構成、ビルド・リリースまで一連の開発手順をまとめました。

: Kotlin

Kotlin Multiplatform 入門：最新KMPでAndroidとiOSをコード共有

Kotlin Multiplatform の基本概念から環境構築、Codelab に沿ったステップ別実装方法、依存関係とテスト戦略までをゼロから解説します。

: Kotlin

2024年最新・無料Kotlin学習教材まとめと始め方

Kotlinは無料教材が充実しており、2024年7月更新のリソースだけで初心者がHello, World!アプリを作成できます。

: Kotlin

Android Studio Giraffe/Flamingo と Jetpack Compose の最新開発環境セットアップガイド

Android Studio Giraffe／Flamingo を導入し、Kotlin 1.9 と Compose BOM 2025.x を設定するだけで、Jetpack Compose の開発環境がすぐに整います。状態管理や Material3 テーマ、Navigation など実践的なコード例も掲載。

2026年版YouTube SEO完全ガイド：視聴維持率と検索意図の最適化

中小企業のためのSRE導入ガイドと成功事例

Android Studio Electric Eelで始めるJetpack Compose入門ガイド

1. 開発環境のセットアップ

1‑1. Android Studio のインストールと JDK 設定

1‑2. バージョンカタログ（libs.versions.toml）の簡易導入

2. 基本的なコンポーザブルと Modifier

2‑1. @Composable 関数の書き方

2‑2. Modifier のチェーンと順序

3. 状態管理 ― ローカルステート & ViewModel

3‑1. ローカルステートの典型例

3‑2. ViewModel と Compose の連携

4. レイアウト・テーマ・プレビュー

4‑1. 基本レイアウトコンポーネント

ConstraintLayout のサンプル

4‑2. Material 3 テーマの一元管理

4‑3. @Preview を使った即時確認

5. ナビゲーションと UI テスト

5‑1. Navigation Compose の基本構成

5‑2. Compose 用 UI テスト（JUnit + Compose Test Rule）

6. 参考情報・公式リンク

7. まとめ

1‑2. バージョンカタログ（`libs.versions.toml`）の簡易導入

2‑1. `@Composable` 関数の書き方

4‑2. Material 3 テーマの一元管理

4‑3. `@Preview` を使った即時確認

5‑1. Navigation Compose の基本構成