Jetpack Composeで始めるAndroid アプリ開発

イントロダクション

Jetpack Composeは、Googleが提供する最新のUIツールキットです。これを使うと、Androidアプリのユーザーインターフェース（UI）を簡単かつ効率的に作ることができます。

従来のAndroid UI作成は、Viewベースと呼ばれる方法で行われていましたが、Jetpack Composeでは「宣言型アプローチ」という新しい方法が採用されています。この方法では、より直感的で簡潔なコードでUIを作成できます。具体的には、画面に表示したい内容をそのままコードで「宣言」することでUIを作ります。

このシリーズでは、Jetpack Composeを使って「TaskHabits」というシンプルで実用的なタスク管理＋習慣トラッカーアプリを作成しながら、Composeの基本を学んでいきます。

セットアップ

まずは、Jetpack Composeを使うためのプロジェクトをセットアップしましょう。

1. Android Studioをインストール

Jetpack Composeを使用するために、最新バージョンのAndroid Studioをインストールします。公式サイトからダウンロードできます。

Android Studioダウンロードページ

2. 新しいプロジェクトの作成

Android Studioを開く
**「新しいプロジェクトを作成」**を選択
テンプレートの選択画面で「Empty Compose Activity」を選択し、「次へ」をクリック
プロジェクト名に「TaskHabits」と入力
パッケージ名や保存場所を設定し、「完了」をクリック

これで、Composeを使用するためのプロジェクトが作成されます。

3. build.gradleの設定

プロジェクトが作成されたら、必要な依存関係を追加します。build.gradleファイルを開き、以下の設定を確認します。

プロジェクトの `build.gradle` ファイル

gradleコードをコピーするbuildscript {
    ext.kotlin_version = '1.5.21'
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:7.0.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

アプリの `build.gradle` ファイル

gradleコードをコピーするplugins {
    id 'com.android.application'
    id 'kotlin-android'
}

android {
    compileSdkVersion 30
    defaultConfig {
        applicationId "com.example.taskhabits"
        minSdkVersion 21
        targetSdkVersion 30
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    composeOptions {
        kotlinCompilerExtensionVersion '1.0.1'
    }
    buildFeatures {
        compose true
    }
}

dependencies {
    implementation 'androidx.core:core-ktx:1.6.0'
    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    implementation 'androidx.compose.ui:ui:1.0.1'
    implementation 'androidx.compose.material:material:1.0.1'
    implementation 'androidx.compose.ui:ui-tooling-preview:1.0.1'
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
    implementation 'androidx.activity:activity-compose:1.3.1'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.1'
}

初めてのComposable関数

次に、基本的なComposable関数を作成して、Jetpack Composeの動作を確認します。

1. MainActivityの編集

MainActivity.ktを開き、以下のように編集します。

kotlinコードをコピーするpackage com.example.taskhabits

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.taskhabits.ui.theme.TaskHabitsTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TaskHabitsTheme {
                // A surface container using the 'background' color from the theme
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    TaskHabitsTheme {
        Greeting("Android")
    }
}