SwiftUIにおけるObservationの説明

ObservationでSwiftUIのデータモデルを簡素化します。Observableマクロがどのようにモデルを簡素化し、アプリのパフォーマンスを向上させるかを紹介します。Observationを知り、マクロの基礎を学び、ObservableObjectからObservableへの移行方法を見つけます。

リソース

- HDビデオ
- SDビデオ

関連ビデオ

WWDC23

ダウンロード

♪ ♪

こんにちは Philippeです Swiftの不思議な新機能を紹介できて本当に嬉しいです Observation この機能により標準的なSwiftの構文を使用してモデルを定義しそのモデルへの変更にUIが応答するようにそれらの型を使用できますこれにより SwiftUIでの開発はシームレスで直感的なものになります今日はいくつかのトピックを取り上げます Observationが何であるかの概要 SwiftUIからのプロパティラッパーをいつ使うかについての便利な規則そしてobservableのより高度な使い方をいくつか取り上げますそして @ObservableObjectを使っていたコードを新しいObservableマクロに更新する方法の例をいくつか紹介します

Observationはプロパティの変更を追跡するためのSwiftの新機能です通常のSwiftの型を使って動作しマクロのマジックでそれらを変換します私たちはよくデータモデル型を書きますがそれらは最終的にSwiftUIで使いたい多くのプロパティを持っています @Observableを追加するだけでデータモデルの変更に UIが反応するようになると言ったらどうでしょう？ Swift 5.9の新機能によりこれまで以上にシンプルなモデルを作成できますこれはSwiftの新しいマクロシステムを使っていいます "@Observable" は Swiftコンパイラにあなたが書いたものから型を観察できる拡充形にコードを変換するように指示します SwiftUIのビューを動かすために observable型を使用できます驚くべき点は動作にプロパティーラッパーのようなものを必要としないことですドーナツ屋台アプリのおいしそうなサンプルがあるのでさっそく見てみましょうここではドーナツをシンプルに表示しています SwiftUIはボディコールを実行するときにモデルが特定のプロパティにアクセスすることを知っていますこの場合ドーナツメニュービューのボディを実行するときにプロパティ'donuts'にアクセスしたことを検出することができますボディが実行されるとき SwiftUIは 'Observable'型から使用されるプロパティへのすべてのアクセスを追跡します次にその追跡情報を取得しそれを使用して特定のインスタンスのプロパティに対する次の変更がいつ変更されるかを判断しますここでドーナツ追加ボタンをクリックしてドーナツ配列を変更するとドーナツメニュービューが無効になりそれに応じてUIも更新されます素晴らしいのはたとえば注文が追加された場合そのプロパティはビューのボディを実行するときに決定されたトラッキングされたプロパティの一部ではないのでビューが無効にならないことです次に計算プロパティを使うとどうなるかを説明します計算プロパティの追加は前と同じルールに従います使用されているプロパティが変更されると UIが更新されます新しく追加されたコンテンツではモデルのorderCountが呼び出され注文プロパティにアクセスしますつまりこの例では注文が変更されると orderCountが注文のプロパティにアクセスするためそのテキストが更新されるということです "@Observable"マクロを使用することで Observationをサポートする型が拡張されますこれにより SwiftUIはこれらのプロパティへのアクセスを追跡し次のプロパティがそのObservationからいつ変更されるかを観察できますこのようなトラッキングを行うことで特定のプロパティが変更されたときにのみ UIがビューのボディを再計算するようになりそれにより本当に素晴らしいパフォーマンスの向上が見られましたマクロについて詳しく知りたい場合は「Write Swift macros」と「Expand on Swift macros」のセッションを必ずチェックしてください Observableによって SwiftUIのプロパティラッパーは簡単になりました State environment bindableは SwiftUIで動作する 3つの主要なプロパティラッパーです SwiftUIでobservable型とインターフェイスするためにプロパティラッパーが必要ないケースはすでに取り上げましたが必要なケースを見てみましょうまずは@Stateから始めますビューの状態をモデルに格納する必要がある場合は @Stateプロパティを使用します観察可能なモデルオブジェクトDonutがシートプレゼンテーションで使われていますシートが表示されると donutToAdd ステート変数が編集可能フィールドに値をバインドするために使用されます "donutToAdd"プロパティはそれが含まれるビューのライフタイムによって管理されます次は@Environmentです Environmentは値をグローバルにアクセシブルな値として伝播させますこれにより多くの場所で物事を共有できます Observable型はアクセスに基づいて更新が作成されるためここでは非常に効果的ですフードトラックメニュービューのボディを呼び出すとアカウントオブジェクトの userNameプロパティにアクセスしますそのため userNameが変更されるとメニュービューが更新されますプロパティラッパーファミリーの中で最も新しいものは'@Bindable'ですバインド可能なプロパティラッパーは実に軽量ですその型からバインディングを作成できるようにすることだけですバインディング可能なラッププロパティからバインディングを取り出すのは実に簡単ですそのプロパティへのバインディングを取得するには $構文を使用するだけです多くの場合これは観測可能な型へのバインディングになりますドーナツビューでは名前をテキストで表示していますしかし実際にはその名前を編集できるようにしたいですそこで Textの代わりに TextFieldを使うことができますそのTextFieldはバインディングを取ります TextFieldの値を入力するためにバインディングから読み込みますがユーザーが値を変更するとバインディングに書き戻しますドーナツにバインドするために必要なのはドーナツプロパティに '@Bindable'プロパティラッパーを使うことだけですプロパティラッパーアノテーションを使用すると'donut.name'構文を使用でき使用時にバインディングが作成されますラッパーをまとめるとSwiftUIで observableモデルを使うために答える必要がある質問は3つだけですこのモデルはビュー自体の状態である必要がありますか？その場合は'@State'を使用しますこのモデルはアプリケーションのグローバル環境の一部である必要がありますか？その場合は'@Environment'を使用しますこのモデルに必要なのはバインディングだけですか？その場合は新しい'@Bindable'を使用しますこれらの質問のどれにも答えがイエスでない場合はモデルをビューのプロパティとして使用するだけですこれまでモデル内で保存された状態から始まるプロパティについて説明しました Observableはさらに多くのことが可能です SwiftUIはインスタンスごとにフィールドへのアクセスを追跡するので配列オプションまたはそれに関しては観測可能なモデルを含む任意の型を使用できることを意味しますドーナツリストビューはドーナツモデルの配列を持っています各モデル自体は'@Observable'ですこれらのドーナツの名前のいずれかが変更されたとき SwiftUIは特定のインスタンスでそのプロパティへのアクセスを検出しビューを無効にするタイミングを知るためにそれを追跡しますそのためここでランダム化ボタンによってドーナツの名前が変更されるとそれに応じてビューも更新されますこれによって好きなようにモデルを作ることができます観測されるモデルの配列を持つこともできまた他の観測可能なモデル型を含むモデル型を持つこともできます一般的なルールとして Observableの場合使用されているプロパティが変更されるとビューが更新されますそのルールが完全に適用されないケースがあります計算プロパティがそれを構成する保存プロパティを持たない場合 Observationで動作させるために 2つの特別な手順を踏む必要がありますこれは観測されるプロパティが観測可能な型に保存プロパティのある種のcompositionによって変更されない場合にのみ行われる必要がありますこの場合プロパティがアクセスされたときとプロパティが変更されたときに Observationに伝えるだけですこれは Observationが通常プロパティへのアクセスを組み込む方法ですがここでは監視できない場所を読み取って名前を保存できるようにカスタムアクセスポイントを手動で書き換えていますほとんどの場合このような手動ケースは必要ありませんなぜなら問題のモデルのプロパティは他の保存プロパティから構成されているからですしかしそのような高度な能力を必要とするまれなケースにおいて Observationは十分に柔軟でありながら自分自身で行うには十分簡単です SwiftUIはそれらのプロパティへのアクセスによって観測可能な型を追跡するので構成の変更を識別することができますつまり計算プロパティが他の保存プロパティから構成されている場合 Observationはそのまま機能しますしかしそうでない少数のケースでは Observationを直接使用しアクセスや変化にフラグを付ける呼び出しを手動で追加できます以前のFood Truckアプリでは ObservableObject を使用して新しい@Observableマクロと同じことを実現しました現在SwiftUIを使用しているアプリを持っている場合非常に似た状況にあるかもしれません Observableマクロはコードを単純化しパフォーマンスも向上させることができます変更前 FoodTruckModel型は ObservableObject適合性を持っており @Publishedプロパティラッパーでマークされたプロパティをいくつか持っていました @Observableマクロへの変更はとても簡単でした必要なのは ObservableObjectへの適合性を削除し '@Published'を削除し '@Observable'マクロでマークするだけですビューに関しては '@ObservedObject'と '@EnvironmentObject'プロパティラッパーが多数ありました '@ObservedObject'ラッパーのすべてのケースでバインディングがなくなるかバインディングだけが必要になり新しい'@Bindable'に変更されました '@EnvironmentObject' ラッパーは '@Environment'だけになりました ObservableObjectから新しい '@Observable'マクロへの変更はほとんどアノテーションを削除するだけですあるいは @State @Environment @Bindableの 3つの主要なプロパティラッパーに単純化することもできますこれにより考慮すべきオプションが少なくなるため新機能の作成が容易になります Observationにはちょうどいいレベルのマジックがあります @Observableマクロを使用することで簡単に開始できデータモデルを直接操作できます必要に応じて高度なユースケース用のマニュアルバージョンを書くことができます新規開発の場合 Observableを使用するのが最も簡単な方法ですまた既存のアプリケーションでは Observableの使用でモデルを簡素化し新しい機能を追加する際のパフォーマンスを向上できますぜひ試してみてマジックを活用してみることをおすすめします ♪ ♪

1:26 - Using @Observable

@Observable class FoodTruckModel {    
    var orders: [Order] = []
    var donuts = Donut.all
}

2:12 - SwiftUI property tracking

@Observable class FoodTruckModel {    
  var orders: [Order] = []
  var donuts = Donut.all
}

struct DonutMenu: View {
  let model: FoodTruckModel
    
  var body: some View {
    List {
      Section("Donuts") {
        ForEach(model.donuts) { donut in
          Text(donut.name)
        }
        Button("Add new donut") {
          model.addDonut()
        }
      }
    }
  }
}

3:12 - SwiftUI computed property tracking

@Observable class FoodTruckModel {    
  var orders: [Order] = []
  var donuts = Donut.all   var orderCount: Int { orders.count }
}

struct DonutMenu: View {
  let model: FoodTruckModel
    
  var body: some View {
    List {
      Section("Donuts") {
        ForEach(model.donuts) { donut in
          Text(donut.name)
        }
        Button("Add new donut") {
          model.addDonut()
        }
      }
      Section("Orders") {
        LabeledContent("Count", value: "\(model.orderCount)")
      }
    }
  }
}

4:41 - Using @State

struct DonutListView: View {
    var donutList: DonutList
    @State private var donutToAdd: Donut?

    var body: some View {
        List(donutList.donuts) { DonutView(donut: $0) }
        Button("Add Donut") { donutToAdd = Donut() }
            .sheet(item: $donutToAdd) {
                TextField("Name", text: $donutToAdd.name)
                Button("Save") {
                    donutList.donuts.append(donutToAdd)
                    donutToAdd = nil
                }
                Button("Cancel") { donutToAdd = nil }
            }
    }
}

5:14 - Using @Environment

@Observable class Account {
  var userName: String?
}

struct FoodTruckMenuView : View {
  @Environment(Account.self) var account

  var body: some View {
    if let name = account.userName {
      HStack { Text(name); Button("Log out") { account.logOut() } }
    } else {
      Button("Login") { account.showLogin() }
    }
  }
}

6:27 - Using @Bindable

@Observable class Donut {
  var name: String
}

struct DonutView: View {
  @Bindable var donut: Donut

  var body: some View {
    TextField("Name", text: $donut.name)
  }
}

7:53 - Storing @Observable types in Array

@Observable class Donut {
  var name: String
}

struct DonutList: View {
  var donuts: [Donut]
  var body: some View {
    List(donuts) { donut in
      HStack {
        Text(donut.name)
        Spacer()
        Button("Randomize") {
          donut.name = randomName()
        }
      }
    }
  }
}

9:18 - Manual Observation

@Observable class Donut {
  var name: String {
    get {
      access(keyPath: \.name)
      return someNonObservableLocation.name 
    }
    set {
      withMutation(keyPath: \.name) {
        someNonObservableLocation.name = newValue
      }
    }
  } 
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

SwiftUIにおけるObservationの説明

関連する章

リソース

関連ビデオ

WWDC23