JetpackComposeのPreviewで知っておくといいことがあるかもしれないTips

## はじめに
２０２３年３月からAndroidアプリエンジニアをしている KSND（[GitHub](https://github.com/kosenda)、[X](https://twitter.com/ksnd_dev) ）といいます。

最近LTしてみたいな〜と漠然に思っていて、PreviewについてLTしたら面白いのではと考えちょっとだけPreviewについて調べましたが大して話せそうなことがなかったのでLTを断念しました。
すぐに忘れてしまいそうだったので思い出せるようにこの記事を書きました。

今後、Preview関連でTipsを知ったらこの記事に追記しようと思ってます。


## Previewでダミーのテキストを使いたい時

Composeのライブラリ（`androidx.compose.ui:ui-tooling-preview`）で用意されている`LoremIpsum`（ロレムイプサム）というクラスを利用すれば自前でダミーテキストを用意しなくても良くなります。

- Android developers - LoremIpsum

https://developer.android.com/reference/kotlin/androidx/compose/ui/tooling/preview/datasource/LoremIpsum

- IssueTracker - LoremIpsum preview parameter customization

https://issuetracker.google.com/issues/300116360


```kotlin

/**
 * 20単語のテキストを提供する[LoremIpsum]のサブクラス　（デフォルトは500単語）
 */
class LoremIpsum20Words : LoremIpsum(20)

@Preview
@Composable
fun PreviewSample1(
    @PreviewParameter(LoremIpsum20Words::class) text: String,
) {
    // PreviewParameterを使わない場合は以下のように使用できる
    // Text(text = LoremIpsum(20).values.first())
    Text(text = text)
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587421/d38516a7-b085-d7e3-35f7-c27f85cb6ec8.png)


## 手っ取り早くいろんな条件でPreviewを表示したいとき

こちらもComposeのライブラリ（`androidx.compose.ui:ui-tooling-preview`）で用意されているPreviewのアノテーションが既に用意されています。

https://developer.android.com/develop/ui/compose/tooling/previews#multipreview-templates

#### いろんな端末での表示を見たい時 → `PreviewScreenSizes` アノテーション

```kotlin
@PreviewScreenSizes
@Composable
fun PreviewSample() {
    Sample()
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587421/377283f4-2962-9daf-8b42-ef2ba29c7a47.png)


#### ダークモード・ライトモードの表示を見たい時 → `PreviewLightDark` アノテーション

```kotlin
@PreviewLightDark
@Composable
fun PreviewSample() {
    Sample()
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587421/5e79c5bf-429b-1278-e8ba-85c64cbc25f4.png)


#### いろんなフォントサイズでの表示を見たい時 -> `PreviewFontScale` アノテーション

7つのfontScale（85%, 100%, 115%, 130%, 150%, 180%, 200%）が見れます

```kotlin
@PreviewFontScale
@Composable
fun PreviewSample() {
    Sample()
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587421/bba00b5c-af27-8a20-a37c-632c67127a97.png)


## Previewで表示できないものはPreviewで表示させないようにする

Previewで使用するComposable関数の箇所で`LocalInspectionMode`を使用しPreviewかどうかを判定することができます

https://developer.android.com/develop/ui/compose/tooling/previews#localinspectionmode

```kotlin
@Composable
fun EnablePreviewSample() {}

@Composable
fun UnablePreviewSample() {}

@Composable
fun Sample() {
    if (LocalInspectionMode.current) {
        // Preview時のみ表示される
        EnablePreviewSample()
    } else {
        // Preview時以外に表示される
        UnablePreviewSample()
    }
}

@Preview
@Composable
fun PreviewSample() {
    Sample()
}
```


## Preview関数の名前をPreviewで表示したい

`Thread.currentThread().getStackTrace()[2].methodName`のようにコードを記述すればPreview関数の名前を取得することができます。
`2`の部分は呼び出し元関数のインデックスの値になります。

https://stackoverflow.com/questions/4065518/java-how-to-get-the-caller-function-name

```kotlin
@Preview
@Composable
fun PreviewSampleAAAAAAAA() {
    Text(text = Thread.currentThread().getStackTrace()[1].methodName)
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587421/fb0d3ad7-9698-5068-2e33-4abb451f45fa.png)


## Preview関数を利用してVRT(画像回帰テスト)をしたい

２つのライブラリ `Showkase`、`Roborazzi`　を利用すれば比較的容易にできます

https://github.com/airbnb/Showkase

https://github.com/takahirom/roborazzi

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587421/7b0757ec-3261-2531-a6b2-5f72706cf74f.png)



以前、記事を書いたので興味ある方は見ていただけると嬉しいです。

https://qiita.com/KSND/items/8b285c54f1b56d598740


## Preview関数を作る効率を良くしたい

AndroidStudio で `prev`と書いて Enter を入力すると

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587421/05809916-c318-345e-e213-396a5cb934b0.png)

以下のようなコードを生成してくれます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587421/c3c9a39e-769b-5f2f-bb87-422fcaa88cd2.png)