SwiftUIの@Stateと@Bindingの違いを解説してみました！

SwiftUIを学び始めると、必ず出てくるのが@Stateと@Binding。
なんとなく使っているけどよく違いが分からないいう方も多いと思います。
この記事では、@Stateと@Binding2つの違いとデータの流れを分かりやすく解説したいと思います！

@Stateとは？

• 役割：そのViewが持つデータの保存場所

• Viewの中で完結する状態を管理するときに使う。

ポイント: @StateはそのView自身の持ち物というイメージです

struct CounterView: View {
    @State  var count = 0
    
    var body: some View {
        VStack {
            Text("カウント: \(count)")
            Button("＋1") {
                count += 1
            }
        }
    }
}

• countはCounterViewだけが管理している

@Bindingとは？

• 役割：親Viewから渡されたデータを参照する

• データを所有せず、外部の状態を借りて使うイメージで、子Viewが親の状態を変更できます！

struct ChildrenView: View {
    @Binding var count: Int
    
    var body: some View {
        Stepper("Count: \(count)", value: $count)
    }
}

@Stateと@Bindingの関係を図解

(イメージ)

親View: @State -----------------> 子View: @Binding
（データを所有）                 （データを参照）

ポイント

• 親Viewがデータのオーナー

• 子Viewはそのデータを借りて編集できる

実際の使用例

struct ContentView: View {
    @State private var count = 0
    
    var body: some View {
        VStack {
            Text("親で管理: \(count)")
            ChildrenView(count: $count)  // Bindingを渡す
        }
    }
}

struct ChildrenView: View {
    @Binding var count: Int
    
    var body: some View {
        Stepper("子で操作: \(count)", value: $count)
    }
}

• 子Viewから操作しても、ContentViewの状態が更新される。

まとめ

@State = Viewが持つデータ

@Binding = 他のViewから借りるデータ

データの流れは親 → 子に流れるイメージ

状態管理の基本を押さえると、SwiftUIの理解が一気に深まるると思います！

以上、@Stateと@Bindingの違いでした！ぜひ参考にしてみてください！🙌