【SwiftUI超入門】@ObservedObjectの使い方

@ObservedObject

@ObservedObjectはインスタンス版の@Stateです。

@ObservedObjectが付いたインスタンスのプロパティが変更された時にViewを更新します。

インスタンスのプロパティと言っても全てのプロパティではなく、インスタンスの基となったクラスで@Publishedが付いているプロパティだけです。

@ObservedObjectの使い方は、まず、インスタンスの基となるクラスには『ObservableObject』プロトコルを付けます。

変更された時にViewが更新されるようにしたいプロパティには『@Published』を付けます。

class クラス名 : ObservableObject {
    @Published プロパティ    @Published プロパティ    …}

このような記述ですね。

ObservableObjectプロトコルが付いたクラスを使って、インスタンスを作る時には『@ObservedObject』を付けます。

@ObservedObject var 変数名 = クラス名()

このように記述します。

@ObservedObjectを実際に使ってみる

それでは、実際に使ってみましょう。

SwiftUIのプロジェクトを作成してください。

今回はnameとageというプロパティを作り、これらが変更された時Viewが更新されるようにしましょう。

まずはクラスを作るためのファイルを作成しましょう。

『File > New > File…』と押していきます。

『SwiftUI View』を選択した状態で 

『Next』を押しましょう。

するとファイルの名前が聞かれるので『UserData』を入力し、

『Create』を押しましょう。

すると、新しく

『UserData.swift』というファイルが作成されます。

UserData.swiftの『import SwiftUI』以外は不要なので消しておきましょう。

それではこのファイルに『ObservableObject』プロトコルを付けたクラスを作りましょう。

class UserData: ObservableObject {
    @Published var name : String
    @Published var age : Int
   
    init(name : String, age : Int) {
        self.name = name
        self.age = age
    }
}

と記述しましょう。

『ObservableObject』プロトコルと

それぞれのプロパティに『@Published』が

付いているのがポイントです。

そのほかは普通にクラスを作るのと変わりません。

次にこのクラスを使ってインスタンスを作りましょう。

『ContentView.swift』の

『ContentView』に

@ObservedObject var userData = UserData(name: “鈴木”, age: 20)

と記述しましょう。

@ObservedObjectを付けたことで、

このインスタンスの

@Publishedが付いたプロパティの値が変化した時にViewが更新されるようになります。

今回だと、そのプロパティというのは『name』と『age』のことです。

それでは、実際にこれらのプロパティの値が変わったらViewが更新されるのか確かめてみましょう。

名前が変わるボタンと、歳が増えるボタンを作って押してみようと思います。

『ContentView.swift』に

VStack{
            Button(action: {
                userData.name = “佐藤”
            })
            {
                Text(“名前を変える”)
                    .padding()
            }
           
            Button(action: {
                userData.age += 1
            })
            {
                Text(“歳を増やす”)
                    .padding()
            }
           
            Text(“\(userData.name)の年齢は『\(userData.age)』歳”)
        }

と記述しましょう。

PreViewを見てみるとこのような表示になります。

コードについて説明しておきましょう。

VStackの中にuserDataの『name』プロパティと『age』プロパティを表示するテキストを記述しています。

また、VStackには『name』プロパティを『佐藤』に変えるボタンと

『age』プロパティを『+1』するボタンを

記述しています。

これらのボタンを押すと@Publishedが付いたプロパティである『name』と『age』がそれぞれ変わるので、Viewが更新されて表示内容が変わるはずです。

実際にボタンを押して確かめてみましょう。

『LIvePreview』ボタンを押してください。

名前を変えるボタンを押すと、名前が『佐藤』に変わります。

『歳を増やす』ボタンを押すと、歳が一つ増えます。

どちらもボタンを押して値が変わるとViewが更新されて、表示内容が変わりましたね。

このように、@ObservedObjectがついたインスタンスの@Publishedが付いたプロパティが変更されるとViewが変更されます。