Alpha

Compose Hot Reload

Compose Hot Reloadは、Compose Multiplatformプロジェクトでの作業中にUIの変更を視覚化し、試すのに役立ちます。

現時点では、Compose Hot Reloadは、マルチプラットフォームプロジェクトにデスクトップターゲットを含めた場合にのみ利用可能です。 今後、他のターゲットに対するサポートを追加することを検討しています。その間、デスクトップアプリをサンドボックスとして使用することで、作業の流れを中断することなく共通コードでのUIの変更を素早く試すことができます。

プロジェクトにCompose Hot Reloadを追加する

Compose Hot Reloadは、以下の2つの方法で追加できます。

• IntelliJ IDEAまたはAndroid Studioでプロジェクトを最初から作成する
• 既存のプロジェクトにGradleプラグインとして追加する

最初から

このセクションでは、IntelliJ IDEAおよびAndroid Studioでデスクトップターゲットを含むマルチプラットフォームプロジェクトを作成する手順を説明します。プロジェクトが作成されると、Compose Hot Reloadが自動的に追加されます。

1. クイックスタートで、Kotlin Multiplatform開発の環境をセットアップするの手順を完了します。
2. IntelliJ IDEAで、File | New | Projectを選択します。
3. 左側のパネルで、Kotlin Multiplatformを選択します。
4. 新規プロジェクトウィンドウで、Name、Group、およびArtifactフィールドを指定します。
5. Desktopターゲットを選択し、Createをクリックします。

既存のプロジェクトに

このセクションでは、既存のマルチプラットフォームプロジェクトにCompose Hot Reloadを追加する手順を説明します。これらの手順は、共有ロジックとUIを持つアプリを作成するチュートリアルのプロジェクトを参照としています。

Compose Hot Reloadの最新バージョンについては、Releasesを参照してください。

1. プロジェクトで、バージョンカタログを更新します。gradle/libs.versions.tomlに、以下のコードを追加します。

   composeHotReload = { id = "org.jetbrains.compose.hot-reload", version.ref = "composeHotReload"}

   バージョンカタログを使用してプロジェクト全体の依存関係を一元的に管理する方法の詳細については、当社のGradleのベストプラクティスを参照してください。

2. 親プロジェクトのbuild.gradle.kts (ComposeDemo/build.gradle.kts)で、plugins {}ブロックに以下のコードを追加します。

   plugins {
       alias(libs.plugins.composeHotReload) apply false
   }

   これにより、Compose Hot Reloadプラグインが各サブプロジェクトで複数回ロードされることを防ぎます。

3. マルチプラットフォームアプリケーションを含むサブプロジェクトのbuild.gradle.kts (ComposeDemo/composeApp/build.gradle.kts)で、plugins {}ブロックに以下のコードを追加します。

   plugins {
       alias(libs.plugins.composeHotReload)
   }

4. Compose Hot Reloadの全ての機能を使用するには、プロジェクトは拡張されたクラス再定義をサポートするOpenJDKのフォークであるJetBrains Runtime (JBR)で実行される必要があります。 Compose Hot Reloadは、プロジェクトのために互換性のあるJBRを自動的にプロビジョニングできます。 これを許可するには、settings.gradle.ktsファイルに以下のGradleプラグインを追加します。

   plugins {
       id("org.gradle.toolchains.foojay-resolver-convention") version "0.10.0"
   }

5. Sync Gradle ChangesボタンをクリックしてGradleファイルを同期します:

Compose Hot Reloadを使用する

1. desktopMainディレクトリで、main.ktファイルを開き、main()関数を更新します。

   fun main() = application {
       Window(
           onCloseRequest = ::exitApplication,
           alwaysOnTop = true,
           title = "composedemo",
       ) {
           App()
       }
   }

   alwaysOnTop変数をtrueに設定することで、生成されたデスクトップアプリが全てのウィンドウの手前に表示され続け、コードを編集して変更をライブで確認しやすくなります。

2. commonMainディレクトリで、App.ktファイルを開き、Buttonコンポーザブルを更新します。

   Button(onClick = { showContent = !showContent }) {
       Column {
           Text(Greeting().greet())
       }
   }

   これで、ボタンのテキストはgreet()関数によって制御されます。

3. commonMainディレクトリで、Greeting.ktファイルを開き、greet()関数を更新します。

    fun greet(): String {
        return "Hello!"
    }

4. desktopMainディレクトリで、main.ktファイルを開き、ガターの実行アイコンをクリックします。 **Run 'composeApp [desktop]' with Compose Hot Reload (Alpha)**を選択します。

   

   

5. greet()関数から返される文字列を更新し、その後ファイルを保存すると、デスクトップアプリが自動的に更新されるのを確認できます。

   

おめでとうございます！Compose Hot Reloadが動作しているのを確認できました。これで、変更のたびにデスクトップ実行構成を再起動することなく、テキスト、画像、書式設定、UI構造などの変更を試すことができます。

ヘルプ

Compose Hot Reloadの使用中に何らかの問題に遭遇した場合は、GitHub issueを作成してお知らせください。