[SwiftUI] 2.カウンターアプリの機能を増やそう！

# はじめに
この記事は[SwiftUI入門 1.カウンターアプリをつくろう](https://qiita.com/rinngo0302/items/eef239af05683765c04a)の続きになります。まだ読んでいないという人は先にこっちを読むのをおすすめします。

それでは今回もがんばっていきましょう！

# 環境
- Mac mini 2020
- **チップ**: Apple M1
- **メモリ**: 16GB
- **OS**: macOS Sequoia
- **ツール**: Xcode v16.2

# つくるもの
![スクリーンショット 2025-04-06 14.54.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2735967/5df743b6-048e-4e91-b73a-036c174db58c.png)
![スクリーンショット 2025-04-06 14.55.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2735967/f87ef7be-c6a7-4384-bbb6-0448ce3bfeed.png)

- Resetボタンで数字を0にする
- 数字が3の倍数のときは数字を赤色にする

GitHubのリポジトリ

https://github.com/rinngo0302/rinngo_practice/tree/task2

# TODO
- [ ] Resetボタンを設置する
- [ ] Resetボタンを押すと数字を0にする
- [ ] 3の倍数のとき数字を赤にする

# 開発
それではTODOに沿って開発をしていきましょう！！

## Resetボタンを設置する
![スクリーンショット 2025-04-06 14.54.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2735967/5df743b6-048e-4e91-b73a-036c174db58c.png)

上の画像のように配置します。
このとき、ResetボタンとTapボタンを`HStack`で並べると綺麗に並ぶと思います。

https://developer.apple.com/documentation/swiftui/hstack

ソースコードはこうなります。
```Swift
import SwiftUI

struct ContentView: View {
    @State var count: Int = 0
    var body: some View {
        VStack {
            Text(String(count))
                .font(.largeTitle)
                .fontWeight(.regular)
            HStack {
                Button("Reset") {
                }

                Button("Tap") {
                    count += 1
                }
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}
```

これでResetボタンを設置できましたね！
では、次にResetボタンの処理を書きましょう。

## Resetボタンを押すと数字を0にする
Resetボタンを押すと数字を0にする機能を実装していきます。

数字は変数`count`で管理しているため、これを`0`にすればよさそうですね。
```Swift
Button("Reset") {
    count = 0
}
```
こうすればよさそうです。
```Swift
import SwiftUI
struct ContentView: View {
    @State var count: Int = 0
    var body: some View {
        VStack {
            Text(String(count))
                .font(.largeTitle)
                .fontWeight(.regular)
            HStack {
                Button("Reset") {
                    count = 0
                }

                Button("Tap") {
                    count += 1
                }
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}
```

## 3の倍数のとき数字を赤にする
まず、数字が3の倍数であるかを調べるには
```Swift
if (count % 3 == 0) {
}
```
でよさそうですね。

次は色を変更する方法について考えてみましょう。
Textの文字の色は
```Swift
.foregroundColor(_ color: Color?)
```
を使えばよさそうです。

https://developer.apple.com/documentation/swiftui/text/foregroundcolor(_:)

つまり、今回の場合テキストを赤にするなら
```Swift
Text(String(count))
    .foregroundColor(.red)
```
にすればよさそうですね。

そして、色を変数で管理するようにし3の倍数のときに赤にしてそれ以外は黒にするようなプログラムを書けばいいわけです。
それでは書いてみましょう。
```Swift
struct ContentView: View {
    @State var count: Int = 0
    @State var textColor: Color = .black
    var body: some View {
        VStack {
            Text(String(count))
                .font(.largeTitle)
                .fontWeight(.regular)
                .foregroundColor(textColor)
            HStack {
                Button("Reset") {
                    count = 0
                    
                    textColor = .black
                }

                Button("Tap") {
                    count += 1
                    
                    if (count % 3 == 0) {
                        textColor = .red
                    } else {
                        textColor = .black
                    }
                }
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

```

少し細かく説明しますね。

```Swift
    @State var textColor: Color = .black
```
で`Color`型の変数を宣言し、`.black`で初期化しておきます。この型は名前の通り色を管理する`enum`です。
`@State`をつけているのは、前回同様UIに変更を自動で反映させるためです。

https://developer.apple.com/documentation/swiftui/color

次に
```Swift
Button("Tap") {
    count += 1
                    
    if (count % 3 == 0) {
        textColor = .red
    } else {
        textColor = .black
    }
}
```
これがメインとなるコードですね。
ここでは`count`が`3`の倍数であるときに`textColor`を`.red`、それ以外のときは`.black`にしています。これにより、3の倍数のときは赤、それ以外のときは黒にすることができます。

```Swift
import SwiftUI

struct ContentView: View {
    @State var count: Int = 0
    @State var textColor: Color = .black
    var body: some View {
        VStack {
            Text(String(count))
                .font(.largeTitle)
                .fontWeight(.regular)
                .foregroundColor(textColor)
            HStack {
                Button("Reset") {
                    count = 0
                }

                Button("Tap") {
                    count += 1
                    
                    if (count % 3 == 0) {
                        textColor = .red
                    } else {
                        textColor = .black
                    }
                }
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

```
次は最後の仕上げです。

このまま実行してみてください。
なにかおかしい点があると思います。

3の倍数になると、数字が赤色になりますよね。その状態でResetボタンを押してください。
そうすると、0なのに赤色になってしまいました！

なぜなら、Resetボタンを押すときの処理の中には数字の色を変更するプログラムを記述していないからです。

では、Resetボタンを押したときの処理の中で、`Text`を`.black`にするソースコードを書いてみましょう。
```Swift
Button("Reset") {
    count = 0
                    
    textColor = .black
}
```
こうすることでResetボタンを押すたびにTextを黒にできますね。

これで全ての機能を実装できました！

# さいごに
これで全てのTODOを終わらせることができました！！

ソースコードはこちらです。
```Swift
import SwiftUI

struct ContentView: View {
    @State var count: Int = 0
    @State var textColor: Color = .black
    var body: some View {
        VStack {
            Text(String(count))
                .font(.largeTitle)
                .fontWeight(.regular)
                .foregroundColor(textColor)
            HStack {
                Button("Reset") {
                    count = 0
                    
                    textColor = .black
                }

                Button("Tap") {
                    count += 1
                    
                    if (count % 3 == 0) {
                        textColor = .red
                    } else {
                        textColor = .black
                    }
                }
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}
```

というわけで、これで完成です:v:

今回は前回に比べて結構簡単だったと思います。
そして、私は今回のようにちょっとした機能のならとても少ないコードで実装できることがSwiftUIのよいところだと思いました。SwiftUIって結構便利なんですねー

それでは、これからも頑張っていきましょう！！

お疲れ様でした！

次回: [[SwiftUI入門] 3.タスクキルしても情報を保存するようにしよう！](https://qiita.com/rinngo0302/items/22f533051c8694b14648)
前回: [SwiftUI入門 1.カウンターアプリをつくろう](https://qiita.com/rinngo0302/items/eef239af05683765c04a)