【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が変更されます。