[SwiftUI] ObservableObject, @ObservedObject, @Published を理解する

@State と同様によく使われる ObservableObject, @ObservedObject, @Published を説明します。

Sponsor Link

@State は struct にしか使えない
@ObservedObject
ObservableObject とは？ @Published とは？
まとめ

@State は struct にしか使えない

@State は、struct (というか、value-type) にしか使えないんです。

見てみます。

example code


struct IntValueStruct {   // (1)
  var intValue:Int = 0
}

struct ContentView: View {
  @State private var stateValue:IntValueStruct = IntValueStruct()
  var body: some View {
    VStack {
      Spacer()
      Text("stored value: \(stateValue.intValue)")
      Stepper("value \(stateValue.intValue)", value: $stateValue.intValue)
      Button(action: {print("\(stateValue.intValue)")}, label: {Text("check stateValue")})
      Spacer()
    }
    .padding()

  }
}

struct IntValueStruct { // (1)

var intValue:Int = 0

}

struct ContentView: View {

@State private var stateValue:IntValueStruct = IntValueStruct()

var body: some View {

VStack {

Spacer()

Text("stored value: \(stateValue.intValue)")

Stepper("value \(stateValue.intValue)", value: $stateValue.intValue)

Button(action: {print("\(stateValue.intValue)")}, label: {Text("check stateValue")})

Spacer()

}

.padding()

}

(1) で、@State の対象は、struct として定義しています。

[@State は、struct と組み合わせるとうまく動きます。]

Text で表示される値と、Stepper で変更する値が同期することが確認できます。

class に変えてみます。

example code


class IntValueClass { // (1) class に変えました
  var intValue:Int = 0
}

struct ContentView: View {
  @State private var stateClassValue:IntValueClass = IntValueClass()
  var body: some View {
    VStack {
      Spacer()
      Text("stored value: \(stateClassValue.intValue)")
      Stepper("value \(stateClassValue.intValue)", value: $stateClassValue.intValue)
      Button(action: {print("\(stateClassValue.intValue)")}, label: {Text("check Value")})
      Spacer()
    }
    .padding()

  }
}

class IntValueClass { // (1) class に変えました

var intValue:Int = 0

}

struct ContentView: View {

@State private var stateClassValue:IntValueClass = IntValueClass()

var body: some View {

VStack {

Spacer()

Text("stored value: \(stateClassValue.intValue)")

Stepper("value \(stateClassValue.intValue)", value: $stateClassValue.intValue)

Button(action: {print("\(stateClassValue.intValue)")}, label: {Text("check Value")})

Spacer()

}

.padding()

}

[@State は、class に適用するとうまく動かない]

class に変えただけなのですが、値が変更されなくなります。実際には、値は変更されているのですが、変更されたことによるビューの更新がされなくなります。

“Check Value” ボタンでその時点での値を、Xcode のコンソールに出力することができます。出力してみると Stepper の＋ボタンを押した数分増えた数値が、コンソールに表示されることが確認できます。ですので、値が変更されていないのではなく、ビューが更新されていないと確認できます。

つまり、@State は、class に対して使用すると、@Binding と組み合わせることで、値のリファレンスを渡すことはできていますが、その変更をフェッチし、ビューを更新することができていないことがわかります。

まさしく、このケースが、@ObservedObject を使うケースとなります。

@ObservedObject

@ObservedObject の property wrapper を付与するためには、class が ObservableObject を conform していなければなりません。

@ObservedObject を使ったものを追記すると以下のようになります。

example code


class IntValueClass :ObservableObject { // ObservableObject に 準拠
  @Published var intValue:Int = 0       // @Published で変更を検知するプロパティを設定
}

struct ContentView: View {
  @ObservedObject var obsClassValue:IntValueClass = IntValueClass()
  var body: some View {
    VStack {
      Spacer()
      Text("stored value: \(obsClassValue.intValue)")
      Stepper("value \(obsClassValue.intValue)", value: $obsClassValue.intValue)
      Spacer()
    }
    .padding()

  }
}

class IntValueClass :ObservableObject { // ObservableObject に準拠

@Published var intValue:Int = 0 // @Published で変更を検知するプロパティを設定

}

struct ContentView: View {

@ObservedObject var obsClassValue:IntValueClass = IntValueClass()

var body: some View {

VStack {

Spacer()

Text("stored value: \(obsClassValue.intValue)")

Stepper("value \(obsClassValue.intValue)", value: $obsClassValue.intValue)

Spacer()

}

.padding()

}

実行してもらうとわかりますが、下側の UI は、期待通りに動作します。

「ObservableObject は class とうまく動作する」

ObservableObject とは？ @Published とは？

ObservableObject とは、内部にobjectWillChange というプロパティを持つことを要求する Protocol です。objectWillChange のタイプは、Publisher です。

Apple のドキュメントは、こちら。

@Published は、そのプロパティの変更について、上記の Publisher を使って、通知します。

@Published の projectedValue は、@Binding

なお、@Published が付与されたプロパティの $ を渡すと、@Binding になります。

まとめ

@State と @ObserervedObject

	設定対象
@State	struct, enum
@ObserervedObject	class

ObservableObject と @Published

@ObservedObject として使用される class は、ObservableObject プロトコルに準拠するように定義されなければいけない
変更を監視するプロパティに、@Published を付与する
@ObservedObject に含まれる @Published が付与されているプロパティは、@Binding で受ける

説明は以上です。
不明な点やおかしな点ありましたら、ご連絡いただけるとありがたいです。

Sponsor Link

@State は struct にしか使えない

@ObservedObject

ObservableObject とは？ @Published とは？

まとめ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル