@Binding ― 状態を子ビューに渡す

導入

画面が大きくなると、部品を別の View に切り出して整理します。そのとき「親の状態を子から操作したい」場面が出てきます。ここで使うのが @Binding です。

説明

@State は「その値の持ち主（親）」が宣言します。子ビューには、その値への 参照 を @Binding として渡します。子で変えると、親の @State も変わります。

// 子ビュー：状態は持たず、@Binding で「借りる」
struct CounterButton: View {
    @Binding var count: Int

    var body: some View {
        Button("＋1") {
            count += 1
        }
    }
}

// 親ビュー：@State の持ち主
struct ContentView: View {
    @State private var count = 0

    var body: some View {
        VStack {
            Text("カウント: \(count)")
                .font(.largeTitle)
            CounterButton(count: $count)   // $ で参照を渡す
        }
    }
}

• 親は @State private var count（持ち主）。
• 子は @Binding var count（借り物）。
• 親は子に $count を渡す（$ が「参照」の印）。

こうすると、子ビューの中でボタンを押しても、親の count が増え、親の Text が更新されます。状態の持ち主は1か所、操作は複数の場所から――これがSwiftUIの状態設計の基本です。

graph TD
  P["親 ContentView<br/>@State count（持ち主）"] -->|"$count を渡す"| C["子 CounterButton<br/>@Binding count（参照）"]
  C -->|"count += 1"| P

このコースのプレビューは1つのViewを描くため、複数ビューにまたがる @Binding は実機（Xcode）で試すのがおすすめです。考え方だけここでしっかり押さえておきましょう。

まとめ

• 状態の 持ち主は @State、それを 借りて操作するのが @Binding。
• 親から子へは $値 で参照を渡す。
• 状態は1か所に集約し、いろいろな場所から安全に変更する。