Compose開発で知っているとちょっとだけ幸せになれるかもしれないTips

# はじめに
Androiderのみなさん、楽しいComposeライフを送っていますか？
最近ではComposeを業務で触る機会も増えてきたという方が多いのではないでしょうか。
この記事では、私がCompose開発で使用しているTipsを紹介します。
どれもすぐに使えるものばかりなので、知らなかったTipsがあれば是非試してみてください。


## エディタ系

### Composable関数の入力補完
ASにはComposeのいつくかの頻出のワードに補完機能が追加されています。
それらをうまく活用することでテンプレを一瞬で書くことができます。

#### comp
`comp`と入力することで自動でComposable関数のテンプレを書いてくれます。

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/07985ac4-ba8a-ee26-4877-f9b88894386b.gif"/>

#### prev
`prev`と入力することで自動でPreview Composable関数のテンプレを書いてくれます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/d501bc96-7a5f-32ce-d8af-2c6e9c9659e8.gif"/>

#### paddp / weigth
`paddp`と入力することで自動でModifier.padding、
`weight`と入力することで自動でModifier.weightを書いてくれます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/5611f747-2a4d-5800-2af7-4d159d970143.gif"/>


### Composeネストの編集
宣言的UIであるComposeではUIを記述していくと自然とネストが深くなっていきます。
そのため手動で上位の階層のComposableを変更し、ネストを修正しようとすると少し面倒になります。

そこで`「Alt」 + 「Enter」 -> 「Surround With Widget」` を押すことで簡単にComposable関数のネストを編集することができます。
または、`W/WR/WC`を入力し補完機能を利用しても可能です。
Flutterの世界では割と馴染みがある機能かもしれません。

- Box/Column/Row

これらでwrapすることができます。

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/05998b32-b4d8-7d70-b9c7-50148c7cbb7e.gif"/>


### 補完候補に java.lang.reflect.modifier を表示させない
便利な補完機能ですが、Compose頻出のキーワードに別のパッケージのモノがヒットして、使いづらくなってしまう場合があります。
modifierを検索し、`java.lang.reflect.modifier`が出てきて、
「ちがう、お前じゃないw」という経験をした人はたくさんいるのではないでしょうか。

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/2c2dd76e-697a-015e-4cc1-dae46af7821e.png"/>

`.idea`の中に`codeInsightSettings.xml`というファイルを置いて設定することで、
特定のパッケージなどをIDEの補完候補から除外することができます。

```xml:codeInsightSettings.xml
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="JavaProjectCodeInsightSettings">
    <excluded-names>
      <name>java.lang.reflect.Modifier</name>
      <name>java.nio.file.WatchEvent.Modifier</name>
    </excluded-names>
  </component>
</project>
```

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/671ee415-1c66-4827-8ab0-6ae91b95fee3.png"/>

他にも除外しておくと便利なものがあるので、気になる方はこちらなどを参照してみてください。
https://www.jetpackcompose.app/snippets/CodeInsightSettings


## Preview系
### 複数の端末サイズのPreview
`@Preview`で簡単にUIを確認できるComposeですが、その引数でプレビューする端末の指定ができます。

```kotlin
@Composable
@Preview(device = Devices.PIXEL)
fun PreviewHomeScreen() {
...
```

また、`@Preview`は重ねることができるので、以下のようなアノテーションを用意しておくと便利です。
```kotlin
@Preview(device = Devices.NEXUS_5, name = "NEXUS_5", showSystemUi = true)
@Preview(device = Devices.NEXUS_6, name = "NEXUS_6", showSystemUi = true)
annotation class MultiDevicePreviews

@Composable
@MultiDevicePreviews
fun PreviewHomeScreen() {
...
```

<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/798348dd-1f86-9500-ffab-a8372f93a6e3.png"/>
このようなアノテーションを用意しておくことで、簡単に複数の端末のプレビューを確認することができるようになります。

うまく運用することで、開発メンバー間で動作担保を行う端末のルール決めができるので端末によるUI差分などのバグを減らすことができます。


### ファイルを開いたときにPreviewタブを開かないようにする
ASのデフォ設定だと、Composeのファイルを開いたときに、Splitタブが選択され、Previewが表示されます。
Previewがある状態ならまだしも、Previewのあるなしに関わらず、ファイルを開いた瞬間にSplitタブが選択されてしまうので少し不便です。特に定義ジャンプなどした際にコードが見えなくなり不便です。

<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/5be51040-a3b9-f592-5923-a0f93492ef94.png"/>

そこで、デフォで選択されるタブをsplitからcodeにすることでこれを防ぐことができます。

設定の`「Editor」 -> 「Design Tools」 -> 「Compose files」`をSplitからcodeに変更します。

<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/bd27832a-fbd2-9a60-8d3d-ade76c1956dd.png"/>


## プラグイン系

### Rainbow Brackets
##### 括弧(bracket)を色付けするプラグイン
HomePage: https://plugins.jetbrains.com/plugin/10080-rainbow-brackets

Composeなどの宣言的UIではネストが深くなり、コードが見づらくなりがちです。
そこでこのプラグインでカッコを色付けすることでネストが見やすくなり、どの階層かがわかりやすくなります。


| デフォルト | Rainbow Bracketあり |
|:------------:|:------------:|
| <img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/913614f4-2a77-a9cd-5e5a-fd44816a7574.png"/> | <img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/f8b3db9e-34f4-83c3-4a05-b777221b09c3.png"/> |

個人的にあまりテカテカしたものは好きじゃなかったんですが、入れてみたら案外便利で今では気に入っています。

### Compose Helper
##### Composeの編集を簡単にするショトカを提供するプラグイン
Page: https://plugins.jetbrains.com/plugin/18323-compose-helper

このプラグインは、上の方で紹介した、デフォ機能のComposeネストの編集の拡張版のようなものです。
- Box / Card / Column / LazyColumn ...

といったComposeでwrapでき、また簡単にComposableの削除ができます。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/9f41b048-28fe-7c5f-936a-abd7ecb72104.gif"/>

補完したComposableにModifierがデフォで入っているところもポイントが高いです。


# おわりに
私は仕事で結構Composeを書いていて開発者体験を求めた結果紹介したTipsなどを利用しています。
一つでも知らないTipsがあり、みなさんのComposeライフがより良いものとなれば嬉しいです。
良きComposeライフを！