[SwiftUI入門] 1.カウンターアプリをつくろう！

# はじめに
トクメモのiOS版の開発に携わりたい！！！
ということでSwiftUIほぼ初心者の私がこれからどのように勉強をしていったのかを記録に残していきます。
初めてQiitaを書くのでちょっと読みづらいかもしれないんですけど、一緒にがんばりましょう！

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

# つくるもの
**ボタンをタップしたらテキストの数字が1ずつ上がっていく簡単なアプリ**
[GitHubリポジトリ](https://github.com/rinngo0302/rinngo_practice/tree/task1)

![スクリーンショット 2025-03-31 11.30.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2735967/ed1d0fc5-a059-4884-bbfc-922c33761f91.png)

↓

![スクリーンショット 2025-03-31 11.30.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2735967/a4a9f5c5-8034-47f4-afb6-116bb681a33c.png)

# TODO
- [ ] `Text`と`Button`を設置する
- [ ] `Button`を押すと変数を1ずつ上げる機能を実装する
- [ ] 好きに装飾する

## 1.UIの設置
![スクリーンショット 2025-03-31 13.26.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2735967/dcd6ab44-b7f4-4949-8a2b-b668485f249f.png)

画像のように`Text`と`Button`を設置します。
このとき、VStackを設定することで2つのControlを綺麗に並べておくとよいと思います。

```swift
var body: some View {
    VStack {
        Text("0")
        Button("Tap") {
        }
    }
    .padding()
}
```

## 2.Buttonの処理
Buttonは下のような使い方です。
```swift
Button("Title") {
    // ボタンを押したときの処理
}
```
`中括弧{}`で囲まれた中にボタンを押したときの処理を書けばよいので、
```swift
Button("Tap") {
    count += 1
}
```
にするとよいです。

変数については、今回の場合だと`@State`をつけて宣言する必要があります(それについては[下](#stateについて)で書いてあります)。
よって
```swift
struct ContentView: View {
    @State var count: Int = 0
    var body: some View {
        VStack {
            Text("0")
            Button("Tap") {
                count += 1
            }
        }
        .padding()
    }
}
```
そして、この変数`count`を反映させるために
```swift
Text(String(count))
```
にしましょう。

よって
```swift
import SwiftUI

struct ContentView: View {
    @State var count: Int = 0
    var body: some View {
        VStack {
            Text(String(count))
            Button("Tap") {
                count += 1
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}
```
これで一旦は目的にあった動作をすると思います。

## 3.装飾
余裕があればここから`Text`や`Button`の装飾をしてもよいでしょう。
私は`Text`に装飾をしてみました。
```swift
Text(String(count))
    .font(.largeTitle)
    .fontWeight(.regular)
```
これで完成です:v:

# `Text`と`Label`について
最初、C#の.NET FrameworkとかJavaのノリでLabelとか使うのかなーと安易に考えてLabelを置いてみたんですけど、なんか思った挙動と違うぞ？！となりました。
調べてみると、Labelは文章と画像も一緒に表示するようなControlでした。

![スクリーンショット 2025-03-31 11.40.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2735967/3bce75be-8517-4cff-8037-0f0a3ad100db.png)
[Label | Apple Developer Documentation](https://developer.apple.com/documentation/swiftui/label)

そこで、
```swift
Label(String(count), image: "")
```
という書き方をしてみたんですが、

![スクリーンショット 2025-03-31 11.43.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2735967/44303b73-1914-4575-ba0e-a35ffd5219f5.png)

上の画像のように、ちょっと**ズレてる**んですね。
これは、画像の分の場所が空いているみたいです。
さらに、`Label`はあまり装飾ができないようです。

そこで、他に文字を設置できるControlを探したところ、`Text`がありました。
こいつは画像も挿入しない文字を設置できるようです。

![スクリーンショット 2025-03-31 12.21.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2735967/2ecfcfef-bd70-43ed-a35c-5f23f6f20f20.png)
[Text | Apple Developer Documentation](https://developer.apple.com/documentation/swiftui/text)

設置すると、うまくできました。

![スクリーンショット 2025-03-31 11.53.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2735967/d61a6aa3-b743-46a2-b9a6-bcccbd14a08d.png)

# `@State`について
変数を宣言し、Buttonを押したときに変数を1足す処理を書きました。

```swift
import SwiftUI

struct ContentView: View {
    var count: Int = 0
    var body: some View {
        VStack {
            Text(String(count))
                .font(.largeTitle)
                .fontWeight(.regular)
            Button("Tap") {
                count += 1    // Left side of mutating operator isn't mutable: 'self' is immutable
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

```
なんかエラーが出るんですよね。
```
構造体（struct）のプロパティを変更しようとしているが、そのselfが変更可能（mutable）ではない
```
という意味らしいです。
つまり、`count`が変更可能じゃないらしいです。

これについては、変数`count`を宣言するときに、**`@State`をつけるといいみたいです**。
```swift
var count: Int = 0
```
になっているのを
```swift
@State var count: Int = 0
```
にするといいみたいです。

この`@State`を指定した変数はその値が変わったら自動でUIにも反映されるらしいです。
そのため、今回のようなユーザの操作で値が変わってUIにも影響を与える変数に`@State`をつけるとよさそうです。
[State | Apple Developer Documentation](https://developer.apple.com/documentation/swiftui/state)

# できあがったソースコード
よって、最終的にできあがったソースコードがこちらになります。
```swift
import SwiftUI

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

#Preview {
    ContentView()
}

```

# まとめ
今回は簡単なカウンターアプリの開発をしました。
やってみた感想として、意外と簡単だったなという印象です。
これはまだ簡単でしたが、これからどんどん難しくなっていくと思います。
いっしょに頑張っていきましょうー！

次回: [[SwiftUI] 2.カウンターアプリの機能を増やそう！](https://qiita.com/rinngo0302/items/d2f864959e84cb920af5)