【Android】Jetpack Composeでカウントアップアプリを作る

## 概要
画面内に設置された画像をクリックするとカウントアップされ回数が表示されるアプリを実装します。

## 画像を用意
今回使う画像はこの二つです。

Star
![icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2747809/e19fd109-2566-d9f3-7ad5-408235626e76.png)

Triangle
![triangle.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2747809/cc8148e4-40d0-bd61-c20b-daa6c28cab39.png)

## クリック回数記憶変数定義

クリック回数を記憶する変数をそれぞれ初期値０で定義します。
Starクリック回数
```
 var countTapStar by remember{
            mutableStateOf(0)
        }
```

Triangleクリック回数
```
  var countTapTriangle by remember{
            mutableStateOf(0)
        }
```

テキストにクリック回数変数の値を適応させます。以下のコードでは`Star:クリック回数` `Triangle:クリック回数`と表示されます。
```
Text(
        text = "Star:$countTapStar ,",
        fontSize = 16.sp,
        color = colorResource(id = R.color.cherry_rose)
        )
Text(
        text = "Triangle:$countTapTriangle",
        fontSize = 16.sp,
        color = colorResource(id = R.color.moegi)
        )
        
```

## 画像のクリックを受け付けるようにする

Imageの中にclickableを追加すればクリックしたときの処理を画像に与えることができます。このコードでは、Starをクリックしたときの処理を記述しています。
Modifierの中にclickableを記述し、さらにその中に変数の値を+1する処理を書きます。こうすることでクリック時の処理を画像に簡単に持たせることができます。

```
Image(
                painter = painterResource(id = R.drawable.icon_svg), contentDescription = "",
                modifier = Modifier
                    .size(108.dp)
                    .border(1.dp, color = colorResource(id = R.color.moegi))
                    //ここにクリック時処理追加
                    .clickable { countTapStar++ },
                contentScale = ContentScale.Crop,
            )
```

## 画像を配置

```
@Composable
fun showImage() {
    //このColumnでテキストと画像を縦方向に並べる
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        var countTapStar by remember {
            mutableStateOf(0)
        }
        var countTapTriangle by remember {
            mutableStateOf(0)
        }
        //Rowでクリック回数表示のテキストを隣に並ばせる
        Row {
            Text(
                text = "Star:$countTapStar ,",
                fontSize = 16.sp,
                color = colorResource(id = R.color.cherry_rose)
            )
            Text(
                text = "Triangle:$countTapTriangle",
                fontSize = 16.sp,
                color = colorResource(id = R.color.moegi)
            )
        }
        //RowでStarとTriangleを隣に並ばせる
        Row {
        //Star
            Image(
                painter = painterResource(id = R.drawable.icon_svg), contentDescription = "",
                modifier = Modifier
                    .size(108.dp)
                    .border(1.dp, color = colorResource(id = R.color.moegi))
                    .clickable { countTapStar++ },
                contentScale = ContentScale.Crop,
            )
            //Triangle
            Image(
                painter = painterResource(id = R.drawable.triangle),
                contentDescription = "",
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .size(108.dp)
                    .clickable { countTapTriangle++ })
        }
    }

```

## 動かしてみた
https://youtube.com/shorts/mU9O46sE5yM?si=FCPah1Xh3Zl8bOnw

↑youtube shortにされてしまったので埋め込みできませんでした。

## 作った感想
一つのソースファイルで画像の配置からクリック動作までを決定できるのは、とても便利かつメンテナンスコストを下げられそうだなと感じました。

ただ、ロジックと画面生成のメソッドがぐちゃぐちゃにならないように注意を払う必要もありそうだとも感じます。
まだまだ勉強中ですが、**正しく使えばjetpack composeは開発スピードを上げる一因になってくれる頼もしいツール**だと考えています。

## 次の目標
ViewModelに挑戦してみるつもりです。

## Repository

https://github.com/jtakumi/jetpackComposebasic/tree/clickableImage