Compose Hot Reload

Compose Hot Reload は、Compose Multiplatform プロジェクトでの作業中に UI の変更を視覚化し、試行錯誤するのに役立ちます。 テストデータを使用して個別のコンポーネントを表示するのに役立つ標準的な Compose プレビューとは異なり、Compose Hot Reload はコードの変更を実行中のアプリケーションに直接適用します。

同梱されている Compose Hot Reload Gradle プラグインは、Kotlin 2.1.20 以上、および Java 21 以前と互換性のある JVM ターゲットを必要とします。 Compose Hot Reload の全機能を使用するには、Kotlin Multiplatform IDE プラグインをインストールすることをお勧めします。これは、IntelliJ IDEA バージョン 2025.2.2 以降、および Android Studio Otter 2025.2.1 以降で利用可能です。

他のターゲットへのサポート追加を検討中ですが、現時点でもデスクトップアプリをサンドボックスとして使用し、作業の流れを中断することなく共通コード（common code）内の UI 変更を素早く試すことができます。

プロジェクトへの Compose Hot Reload の追加

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

• IntelliJ IDEA または Android Studio でプロジェクトを新規作成する
• 既存のプロジェクトに Gradle プラグインを追加する

新規作成する場合

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

1. クイックスタートの「Kotlin Multiplatform 開発のための環境構築」の手順を完了します。
2. IDE で、File | New | Project を選択します。
3. 左側のパネルで Kotlin Multiplatform を選択します。
4. New Project ウィンドウで Name、Group、Artifact フィールドを指定します。
5. Desktop ターゲットを選択し、Create をクリックします。

既存のプロジェクトに追加する場合

Compose Multiplatform 1.10.0 以降、Compose Hot Reload プラグインは同梱されており、デスクトップターゲットを含むすべてのプロジェクトでデフォルトで有効になっています。

プロジェクトにすでにデスクトップターゲットが含まれている場合は、Compose Multiplatform バージョン 1.10.0 以降にアップグレードするだけで、Compose Hot Reload の機能を設定不要で使用できます。

デフォルトで有効になっていますが、特定の古いバージョンを使用するために Compose Hot Reload プラグインを明示的に宣言することも可能です。

以前のバージョンの Compose Multiplatform

1.10.0 より前のバージョンの Compose Multiplatform を使用しているマルチプラットフォームプロジェクトでは、デスクトップターゲットが設定されている必要があり、その上で Compose Hot Reload プラグインを明示的に追加する必要があります。以下の手順は、「共有ロジックと UI を備えたアプリの作成」チュートリアルのプロジェクトを参考にしています。

1. デスクトップターゲットを導入します。jvmMain ディレクトリを作成し、main() 関数を定義し、actual 実装を提供します。 プロジェクトにすでにデスクトップターゲットが含まれている場合は、このステップをスキップできます。 参考として、「JVM エントリポイントの追加」のサンプルを参照してください。

2. バージョンカタログを Compose Hot Reload の最新バージョンで更新します（リリースページを参照）。 gradle/libs.versions.toml に以下のコードを追加します。

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

   プロジェクト全体の依存関係を中央管理するためのバージョンカタログの使用方法については、Gradle のベストプラクティス（英語）を参照してください。

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

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

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

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

   plugins { 
       alias(libs.plugins.composeHotReload)
   }

5. プロジェクトは、拡張されたクラス再定義をサポートする OpenJDK フォークである JetBrains Runtime (JBR) 上で実行する必要があります。 Compose Hot Reload は、プロジェクトに互換性のある JBR を自動的にプロビジョニングできます。

   最新の JetBrains Runtime は Java 21 のみをサポートしています。 Java 22 以降にのみ互換性のあるプロジェクトに Compose Hot Reload を追加した場合、 プロジェクトを実行するとリンケージエラー（linkage error）が発生します。

   自動プロビジョニングを許可するには、settings.gradle.kts ファイルに以下の Gradle プラグインを追加します。

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

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

Compose Hot Reload の使用

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

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

   alwaysOnTop 変数を true に設定することで、生成されたデスクトップアプリがすべてのウィンドウの最前面に表示されるようになり、コードを編集して変更をリアルタイムで確認しやすくなります。

2. App.kt ファイルを開き、Button コンポーザブルを更新します。

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

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

3. Greeting.kt ファイルを開き、greet() 関数を更新します。

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

4. main.kt ファイルを開き、ガターにある Run アイコンをクリックします。 Run 'composeApp [jvm]' with Compose Hot Reload を選択します。

   

   

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

   

   あるいは、割り当てられたショートカットキーを押すか、Reload UI ボタンをクリックして、明示的にリロードをトリガーすることもできます。 トリガーの動作は、Settings | Tools | Compose Hot Reload ページで変更できます。

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

ヘルプを得る

Compose Hot Reload の使用中に問題が発生した場合は、GitHub イシューを作成してお知らせください。