【Compose Multiplatform】commonMain で Compose のプレビューを表示する

こんにちは！アルダグラムでエンジニアをしている渡邊です。

Compose Multiplatform での開発において、2025年2月時点では Android Studio において Composable 関数のプレビュー表示が commonMain^[1] では行えないという問題があります。

しかし、IntelliJ IDEA EAP 251 では commonMain でも Composable 関数のプレビュー表示が行えるようになったようです。

今回は、Compose Multiplatform における現在のプレビューの状況と commonMain で表示する方法について紹介します。

Compose のプレビューの状況

2025年2月時点では、Compose Multiplatform での Compose のプレビュー表示の状況は以下のようになっています。

• Android Studio では commonMain に定義した Compose 関数のプレビュー表示は行えない
• Fleet では commonMain に定義した Compose 関数のプレビュー表示が可能

したがって、現時点でプレビューを表示する方法としては以下のような選択肢があります。

1. Fleet を使う
2. androidMain 内で Compose 関数のプレビューを行う
3. Roborazzi を使う

1 については、先日 JetBrains が Fleet での Kotlin Multiplatform （KMP）サポートを終了し、IntelliJ や Android Studio でのサポートに注力することを発表しました。

https://blog.jetbrains.com/kotlin/2025/02/kotlin-multiplatform-tooling-shifting-gears/

そのため、今後は Fleet を使うという選択肢はなくなりました。

2 については、Android Studio で開発できるというメリットがあります。しかし、通常 Compose 関数は commonMain 内に定義するため、androidMain にプレビュー用の関数を定義すると、実装とプレビューを定義するファイルが別になってしまうというデメリットがあります。

3 に関しては DroidKaigi の conference-app-2024 でも使われていた方法です。

ただし、こちらの Issue を参考にすると、IntelliJ IDEA EAP 251 では commonMain でもプレビュー表示が可能になったようです。

commonMain でプレビュー表示する方法

前述の Issue を参考にすると、以下の設定を行えば IntelliJ IDEA EAP 251 でプレビュー表示ができます。

• 以下のプラグインをインストールする

  • Android
  • Android Design Tools
  • Jetpack Compose

• 以下のように commonMain に依存関係を設定する

  commonMain.dependencies {
      implementation(compose.components.uiToolingPreview)
  }
  

• commonMain にプレビュー関数を定義する

  • @Preview アノテーションは org.jetbrains.compose.ui.tooling.preview.Preview を使うことに注意

これでプレビュー表示が行えるようになります。以下は試してみた結果です。

最後に

以上 commonMain でプレビューを表示する方法についての説明でした。

早く Android Studio でも commonMain でプレビュー表示ができるようになることを期待しています！

もっとアルダグラムエンジニア組織を知りたい人、ぜひ下記の情報をチェックしてみてください！

脚注

1. commonMain とは Kotlin Multiplatform のプロジェクトにおいて、プラットフォーム共通の処理を配置するディレクトリのことです。 参考: https://kotlinlang.org/docs/multiplatform-discover-project.html