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

はじめに

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

環境

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

つくるもの

ボタンをタップしたらテキストの数字が1ずつ上がっていく簡単なアプリ
GitHubリポジトリ

↓

TODO

• TextとButtonを設置する
• Buttonを押すと変数を1ずつ上げる機能を実装する
• 好きに装飾する

1.UIの設置

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

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

2.Buttonの処理

Buttonは下のような使い方です。

Button("Title") {
    // ボタンを押したときの処理
}

中括弧{}で囲まれた中にボタンを押したときの処理を書けばよいので、

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

にするとよいです。

変数については、今回の場合だと@Stateをつけて宣言する必要があります(それについては下で書いてあります)。
よって

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

そして、この変数countを反映させるために

Text(String(count))

にしましょう。

よって

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に装飾をしてみました。

Text(String(count))
    .font(.largeTitle)
    .fontWeight(.regular)

これで完成です

TextとLabelについて

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

Label | Apple Developer Documentation

そこで、

Label(String(count), image: "")

という書き方をしてみたんですが、

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

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

Text | Apple Developer Documentation

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

@Stateについて

変数を宣言し、Buttonを押したときに変数を1足す処理を書きました。

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をつけるといいみたいです。

var count: Int = 0

になっているのを

@State var count: Int = 0

にするといいみたいです。

この@Stateを指定した変数はその値が変わったら自動でUIにも反映されるらしいです。
そのため、今回のようなユーザの操作で値が変わってUIにも影響を与える変数に@Stateをつけるとよさそうです。
State | Apple Developer Documentation

できあがったソースコード

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

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()
}

まとめ

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