shintaro

@ObservedObjectとは、インスタンスのプロパティが更新されたら、View(見え方)も更新するものです

ただし、元になるクラスに@publishedがついたプロパティのみが対象です

この記事では、SwiftUIでviewを更新する仕組みについて解説します。

サンプルコードを載せていますので、ぜひ自分の手で動かしてみてください!

実際に書いてみる(サンプルコード)

今回は@ObservedObjectを使って、ポケモンを進化させる簡単なコードを書いてみたいと思います!

STEP1:クラスを定義する

まずは、クラスを定義する必要があるので、新しいSwiftUIファイルを開いて、下記のように入力。

import SwiftUI

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

このコードでは、ポケモンの型を定義しています。

具体的には、名前とレベルという2つの変数(プロパティ)を持ったクラスです。

クラス名は、PokemonDataです。この型に、ObservableObjectプロトコルを定義します。

次に、クラス内で定義する変数に、@publishedをつけて変数を定義します。

最後にイニシャライザも忘れずに。

STEP2:ContentViewにインスタンスを作る

import SwiftUI

struct ContentView: View {
    
    @ObservedObject var pokemonData = PokemonData(name: "ピカチュウ", level: 20)
    
    var body: some View {
        VStack {
            Button(action: {
                pokemonData.name = "ライチュウ"
            })
            {
                Text("進化")
                    .padding()
            }
            Button(action: {
                pokemonData.level += 1
            })
            {
                Text("レベルを上げる")
                    .padding()
            }
                Text("\(pokemonData.name)のレベルは\(pokemonData.level)")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

ContentViewに、インスタンスを作成します。

インスタンスを作る時には、@ObservedObjectを冒頭につけます。

こうすると、PokemonDataクラスを持ったインスタンスのプロパティを更新したら、Viewが更新される仕組みの土台ができました。

実際にそうなっているかを確かめるために、body内に、”進化”というボタンを作り、このボタンを押すと、ポケモンの名前が更新され、それがViewにも反映されるというサンプルアプリを作りました。

また同様に、”レベルを上げる”ボタンを押すと、数字が更新されます。

動画で動作を確認する

shintaro

この記事に掲載したサンプルコードを実際に動かしている動画もありますので、こちらも合わせて見てください〜

(*8/16時点で動画はまだアップできず。しばしお待ちを)

最後まで読んでいただきありがとうございました!