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

2026年4月22日

お得なお知らせ

スポンサードリンク

AI時代のキャリア構築

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

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

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

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

Contents

1 1️⃣ 開発環境のインストール & 基本設定
- 1.1 1‑1️⃣ Android Studio のインストール手順
- 1.2 1‑2️⃣ プロジェクト作成時の依存関係設定
2 2️⃣ 基本的な UI コンポーネントとレイアウト
- 2.1 2‑1️⃣ 最小構成の @Composable 関数
- 2.2 2‑2️⃣ UI のプレビュー
3 3️⃣ 状態管理・テーマ・非同期処理
4 4️⃣ ナビゲーションと高度レイアウト
5 5️⃣ テスト・パフォーマンス最適化
- 5.1 5‑1️⃣ Compose UI テストの基本フロー
- 5.2 5‑2️⃣ 再コンポジション削減のベストプラクティス
6 6️⃣ 次に挑戦すべきこと
7 まとめ

スポンサードリンク

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 行程度 ですので、コード量が多くなる心配はありません。

plugins {
    id(&quot;com.android.application&quot;)
    kotlin(&quot;android&quot;)
}

android {
    compileSdk = 34
    defaultConfig {
        applicationId = &quot;com.example.composebasic&quot;
        minSdk = 21
        targetSdk = 34
        versionCode = 1
        versionName = &quot;1.0&quot;
    }

    buildFeatures { compose = true }
    composeOptions {
        // Compose Compiler 1.6 に合わせたバージョン
        kotlinCompilerExtensionVersion = &quot;1.6.0&quot;
    }
}

dependencies {
    // BOM でバージョンを一括管理（2024.10 が執筆時点の最新）
    implementation(platform(&quot;androidx.compose:compose-bom:2024.10.00&quot;))
    implementation(&quot;androidx.compose.ui:ui&quot;)
    implementation(&quot;androidx.compose.material3:material3&quot;)
    implementation(&quot;androidx.activity:activity-compose:1.9.0&quot;)
}

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` 関数

@Composable
fun GreetingScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = &quot;Hello, Jetpack Compose!&quot;,
            style = MaterialTheme.typography.headlineSmall
        )
        Spacer(modifier = Modifier.height(12.dp))
        Button(onClick = { /* TODO: click handler */ }) {
            Text(&quot;Tap me&quot;)
        }
        Spacer(modifier = Modifier.height(12.dp))
        Image(
            painter = painterResource(id = R.drawable.ic_compose),
            contentDescription = &quot;Compose logo&quot;,
            modifier = Modifier.size(64.dp)
        )
    }
}

@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 のプレビュー

@Preview(showBackground = true, widthDp = 360, heightDp = 640)
@Composable
fun GreetingScreenPreview() = GreetingScreen()

@Preview(showBackground = true, widthDp = 360, heightDp = 640)

@Composable

fun GreetingScreenPreview() = GreetingScreen()

@Preview は IDE 上で即座にレンダリングを確認でき、デザインの微調整が高速に行えます。

3️⃣ 状態管理・テーマ・非同期処理

3‑1️⃣ 推奨される State パターン

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    // 派生状態は `derivedStateOf` でキャッシュすると再コンポジションが減少
    val isEven = derivedStateOf { count % 2 == 0 }

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(&quot;Count: $count (Even: ${isEven.value})&quot;)
        Button(onClick = { count++ }) { Text(&quot;Increase&quot;) }
    }
}

@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 とダイナミックカラー

@Composable
fun MyApp(content: @Composable () -&gt; Unit) {
    val useDynamic = Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.S
    MaterialTheme(
        colorScheme = if (useDynamic) dynamicLightColorScheme(LocalContext.current)
                      else lightColorScheme(),
        typography = Typography()
    ) {
        content()
    }
}

@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 の連携

@Composable
fun RandomNumberScreen() {
    // produceState は State を生成しながらコルーチンを走らせる
    val number by produceState(initialValue = 0) {
        while (true) {
            delay(1_000)
            value = (1..100).random()
        }
    }

    Text(
        text = &quot;Random: $number&quot;,
        style = MaterialTheme.typography.titleLarge,
        modifier = Modifier.padding(16.dp)
    )
}

@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️⃣ ナビゲーションと高度レイアウト

4‑1️⃣ Navigation Compose の基本構成

@Composable
fun AppNavigator(startDestination: String = &quot;home&quot;) {
    val navController = rememberNavController()
    NavHost(navController, startDestination = startDestination) {
        composable(&quot;home&quot;) { HomeScreen(onDetail = { navController.navigate(&quot;detail&quot;) }) }
        composable(&quot;detail&quot;) { DetailScreen(onBack = { navController.popBackStack() }) }
    }
}

@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）

@Composable
fun PhotoList(photos: List&lt;String&gt;) {
    LazyColumn(
        verticalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 12.dp)
    ) {
        items(photos) { url -&gt;
            Image(
                painter = rememberAsyncImagePainter(url),
                contentDescription = null,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(180.dp)
                    .clip(RoundedCornerShape(8.dp))
            )
        }
    }
}

@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 のサンプル

@Composable
fun WelcomeScreen(onStart: () -&gt; Unit) {
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val (title, button) = createRefs()

        Text(
            text = &quot;Welcome&quot;,
            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(&quot;Get Started&quot;) }
    }
}

@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 テストの基本フロー

@get:Rule val composeTestRule = createComposeRule()

@Test
fun greeting_isDisplayed() {
    composeTestRule.setContent { GreetingScreen() }
    composeTestRule.onNodeWithText(&quot;Hello, Jetpack Compose!&quot;)
        .assertIsDisplayed()
}

@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!

スポンサードリンク

お得なお知らせ

スポンサードリンク

AI時代のキャリア構築

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

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

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

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

-Kotlin

comment コメントをキャンセル

: Kotlin

Kotlin Multiplatform の基本と2024以降の最新アップデート・導入事例

Kotlin Multiplatform の最新機能と企業導入事例を基に、効果的な移行方法と技術的ハードルの克服策を解説します。

: Kotlin

Androidで最新Coroutines 1.10.2を導入するGradle設定と活用ガイド

Gradleに最新Coroutines 1.10.2を安全に導入し、structured concurrency を意識したコルーチンの書き方と実践例を紹介します。

: Kotlin

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

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

: Kotlin

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

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

: Kotlin

Kotlin Multiplatform プロジェクト構成方法と最新開発環境設定

Kotlin Multiplatform の基本構成と最新開発環境、Wizard と手動マルチプロジェクト化の手順をわかりやすくまとめました。

Rust と WebAssembly エコシステム最新概況とベンチマーク徹底解説

Amazon Inspector エージェントレス機能と他社ツール比較（2024年）

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

1️⃣ 開発環境のインストール & 基本設定

1‑1️⃣ Android Studio のインストール手順

1‑2️⃣ プロジェクト作成時の依存関係設定

2️⃣ 基本的な UI コンポーネントとレイアウト

2‑1️⃣ 最小構成の @Composable 関数

2‑2️⃣ UI のプレビュー

3️⃣ 状態管理・テーマ・非同期処理

3‑1️⃣ 推奨される State パターン

3‑2️⃣ Material 3 とダイナミックカラー

3‑3️⃣ Coroutines と UI の連携

4️⃣ ナビゲーションと高度レイアウト

4‑1️⃣ Navigation Compose の基本構成

4‑2️⃣ Lazy 系列（LazyColumn / LazyVerticalGrid）

4‑3️⃣ ConstraintLayout for Compose のサンプル

5️⃣ テスト・パフォーマンス最適化

5‑1️⃣ Compose UI テストの基本フロー

5‑2️⃣ 再コンポジション削減のベストプラクティス

6️⃣ 次に挑戦すべきこと

まとめ

2‑1️⃣ 最小構成の `@Composable` 関数

3‑2️⃣ Material 3 とダイナミックカラー