2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Compose Previewが壊れた時にまず試すこと3つ

Posted at

はじめに

Jetpack Composeを使っていると、Previewが突然表示されなくなることがあります。

  • 昨日まで動いていたのに表示されない
  • ビルドは通っている
  • エラー内容が分かりにくい

そんなときにまず試すと復旧しやすい、三つの確認ポイントをまとめました。
深掘りや内部仕様の説明ではなく、「とりあえず復旧したい」場合を想定しています。

1. Preview対象のComposableを最小構成に戻す

Previewが読み込めない原因の多くは、Composableが複雑になり依存関係を含んでしまっているケースです。

最小化の例

@Preview(showBackground = true)
@Composable
fun SamplePreview() {
    SampleScreen()
}

よくある原因

  • Navigationを含めている
  • ViewModelを取得している
  • FlowやLiveDataをcollectしている
  • DIが前提になっている

まずは依存を取り除き、「ただのComposable」に戻すことで表示が復旧することがよくあります。

2. Kotlin/Compose/AGPのバージョン整合性を確認する

Previewはバージョンの組み合わせに敏感です。
特に次の三つは揃っていないと動作しなくなることがあります。

  • Kotlin バージョン
  • Compose BOM
  • Android Gradle Plugin

BOMで揃える例

dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.01.00"))
    implementation("androidx.compose.ui:ui")
    implementation("androidx.compose.material3:material3")
}

Preview Rendererは内部で前提となる依存組み合わせを要求するため、ここがずれると表示されなくなります。

3. キャッシュとGradle周りをリセットする

Previewはキャッシュ破損で動かなくなることも多いです。
まずは次の順に試します。

Build → Clean Project
Build → Rebuild
File → Invalidate Caches → Restart

状況によっては次も有効です。

./gradlew --stop
rm -rf .gradle

それでも直らない場合の判断基準

  • 実機またはエミュレータでの動作確認に切り替える
  • Navigationや非同期処理が前提なら、Preview対象外にしてもよい
  • Previewを前提にした設計にこだわらないという選択肢もある

まとめ

  • Previewは壊れやすいが、復旧は難しくない
  • 最小化、バージョン整合性、キャッシュの順で確認すると効率的
  • UIの性質によってはPreview非対応が合理的な場合もある

Previewが表示されずに作業が止まってしまう時間を、少しでも短縮できればと思います。

さいごに

インフルエンザが大流行しているので、お身体にはお気をつけください…

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?