プロジェクトの変更

このチュートリアルでは IntelliJ IDEA を使用しますが、Android Studio でも同様に進めることができます。どちらの IDE もコア機能と Kotlin Multiplatform サポートを共有しています。

これは「共有ロジックと UI を備えた Compose Multiplatform アプリの作成」チュートリアルの第 3 パートです。先に進む前に、前の手順を完了していることを確認してください。

プロジェクトの変更

独自のアプリケーションの作成

Kotlin Multiplatform ウィザードで生成されたコードを変更し、App コンポーザブル内に現在の日付を表示してみましょう。これを行うには、プロジェクトに新しい依存関係を追加し、UI を強化して、各プラットフォームでアプリケーションを再実行します。

新しい依存関係の追加

プラットフォーム固有のライブラリと expected and actual 宣言を使用して日付を取得することもできます。しかし、Kotlin Multiplatform ライブラリが利用できない場合にのみ、そのアプローチを使用することをお勧めします。このケースでは、kotlinx-datetime ライブラリを利用できます。

klibs.io では、ターゲットプラットフォームで利用可能な Kotlin Multiplatform ライブラリを探索できます。これはマルチプラットフォームライブラリを見つけるための JetBrains による実験的な検索サービスです。

kotlinx-datetime ライブラリを使用するには：

gradle/libs.versions.toml ファイルを開き、kotlinx-datetime 依存関係をバージョンカタログに追加します。

toml

[versions]
kotlinx-datetime = "0.8.0"

[libraries]
kotlinx-datetime = { module = "org.jetbrains.kotlinx:kotlinx-datetime", version.ref = "kotlinx-datetime" }

shared/build.gradle.kts ファイルを開き、共通コードのソースセット（source set）を構成するセクションに、そのライブラリエントリへの参照を追加します。

kotlin

kotlin {
    // ...
    sourceSets {
        // ...
        commonMain.dependencies {
            // ...
            implementation(libs.kotlinx.datetime)
        }
    }
}

Web ターゲットの場合、タイムゾーンのサポートには js-joda ライブラリが必要です。webApp/build.gradle.kts ファイルに js-joda npm パッケージへの参照を追加します。
kotlin
```
kotlin {
    // ...
    sourceSets {
        // ...
        commonMain.dependencies {
            // ...
            implementation(npm("@js-joda/timezone", "2.25.1"))
        }
    }
}
```
webMain ソースセットに依存関係を追加すると、ライブラリは wasmJs と js の両方のターゲットで利用可能になります。
依存関係が追加されたら、Gradle 構成を同期するための IDE の提案を受け入れるか、Shift キーを 2 回押して Sync Project with Gradle Files コマンドを実行します。
Terminal ツールウィンドウで次のコマンドを実行し、yarn.lock ファイルが最新の依存関係バージョンで更新されていることを確認します。
shell
```
./gradlew kotlinUpgradeYarnLock kotlinWasmUpgradeYarnLock
```

webApp/src/webMain/kotlin/.../main.kt ファイルで、@JsModule アノテーションを使用して js-joda npm パッケージをインポートします。

kotlin

import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.window.ComposeViewport
import kotlin.js.ExperimentalWasmJsInterop
import kotlin.js.JsModule

@OptIn(ExperimentalWasmJsInterop::class)
@JsModule("@js-joda/timezone")
external object JsJodaTimeZoneModule

private val jsJodaTz = JsJodaTimeZoneModule

@OptIn(ExperimentalComposeUiApi::class)
fun main() {
    ComposeViewport {
        App()
    }
}

プロジェクトをバージョン管理（VCS）にコミットする際は、kotlin-js-store ディレクトリに生成された yarn.lock ファイルを含めてください。これにより、プロジェクトがビルドされる場所に関係なく、同じバージョンの JavaScript 依存関係が使用されるようになります。

ユーザーインターフェースの強化

shared/src/commonMain/kotlin/App.kt ファイルを開き、App() コンポーザブルの後に、現在の日付を含む文字列を返す次の関数を追加します。

kotlin

fun todaysDate(): String {
    fun LocalDateTime.format() = toString().substringBefore('T')

    val now = Clock.System.now()
    val zone = TimeZone.currentSystemDefault()
    return now.toLocalDateTime(zone).format()
}

IDE によって提案されるインポートを追加します。
Clock クラスは kotlinx.datetime ではなく kotlin.time からインポートするようにしてください。

同じファイルで、この関数を呼び出して結果を表示する Text() コンポーザブルを含むように App() コンポーザブルを変更します。

kotlin

@Composable
@Preview
fun App() {
    MaterialTheme {
        var showContent by remember { mutableStateOf(false) }
        val greeting = remember { Greeting().greet() }
        Column(
            modifier = Modifier
                .safeContentPadding()
                .fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = "Today's date is ${todaysDate()}",
                modifier = Modifier.padding(20.dp),
                fontSize = 24.sp,
                textAlign = TextAlign.Center
            )
            Button(onClick = { showContent = !showContent }) {
                Text("Click me!")
            }
            AnimatedVisibility(showContent) {
                Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
                    Image(painterResource(Res.drawable.compose_multiplatform), null)
                    Text("Compose: $greeting")
                }
            }
        }
    }
}