@State と再描画 ― カウンターを作る

導入

「ボタンを押すたびに数が増える」。この当たり前の動きを支えるのが @State です。SwiftUIでは、状態が変わると画面が 自動で描き直され ます。

説明

画面が持つ「変わる値」には @State を付けます。その値を変えると、SwiftUIが関係する部分を自動で更新します。

struct ContentView: View {
    @State private var count = 0

    var body: some View {
        VStack(spacing: 24) {
            Text("カウント: \(count)")
                .font(.largeTitle)
                .fontWeight(.bold)
            HStack(spacing: 16) {
                Button("－1") {
                    count -= 1
                }
                Button("＋1") {
                    count += 1
                }
                .buttonStyle(.borderedProminent)
            }
        }
        .padding()
    }
}

ポイントはこの流れです。

graph LR
  A["ボタンをタップ"] --> B["count を +1"]
  B --> C["@State が変化を検知"]
  C --> D["body を再計算<br/>（自動で再描画）"]
  D --> E["画面のカウントが更新"]

自分で「画面を更新して」と命令する必要はありません。状態を変えれば、画面は勝手に追いつく。これがSwiftUIの考え方です。private は「この画面の中だけで使う」という印で、@State では定番の書き方です。

やってみよう

プレビューの「＋1」「－1」ボタンを押して、数が変わるのを確かめましょう。初期値 count = 0 を別の数にすると、最初の表示が変わります。

演習

「＋1」ボタンを押すと count が 10ずつ 増えるように変えてください。