目次
データバインディングとは
データバインディングとは、UIとデータの間での双方向の同期を可能にする仕組みです。
ビュー内での状態変更が自動的にUIに反映され、逆にUI上での操作もデータの状態に反映されます。
@Stateについて
@Stateは、ローカルな状態を管理するためのプロパティラッパーです。
ビュー内で状態を保持し、変更する際にUIが自動的に再描画されます。
@Stateの使い方
struct CounterView: View {
// カウンターの値を管理する状態。初期値は0
@State private var count = 0
var body: some View {
VStack {
// 現在のカウントを表示するテキスト
Text("Count: \(count)")
Button("Increment") {
// ボタンを押すとカウントを+1
count += 1
}
}
}
}
@Bindingについて
@Bindingは、他のViewから状態を共有するためのプロパティラッパーです。
親ビューから子ビューにデータを渡し、双方向の通信を可能にします。
データをViewから直接操作します。
@Bindingの使い方
struct ChildView: View {
// 親ビューから渡されるカウンターの値を受け取るBinding
@Binding var count: Int
var body: some View {
Button("Increment") {
// ボタンを押すとカウントを+1
count += 1
}
}
}
struct ParentView: View {
// このビュー内で管理されるローカルなカウンターの値を定義
@State private var count = 0
var body: some View {
VStack {
Text("Count: \(count)")
// ChildViewに親ビューのカウンターの値をバインドして渡す
ChildView(count: $count)
}
}
}
ObservableObjectについて
ObservableObjectは、データの変更を監視し、その変更をUIに反映させるためのプロトコルです。主にViewModelで使用され、アプリケーションの状態やビジネスロジックを管理します。
ObservableObjectを準拠するクラスや構造体では、@Publishedプロパティラッパーを使用して、プロパティの変更を自動的に通知します。これにより、プロパティの値が変更されると、それに関連するビューが自動的に再描画されます。
ObservableObjectの使い方
class MyViewModel: ObservableObject {
// ユーザー名を管理するObservableObject。@Publishedを使ってプロパティの変更を自動的に通知
@Published var username: String = ""
}
struct ContentView: View {
// MyViewModelを監視し、その状態の変化を検知する
@ObservedObject var viewModel = MyViewModel()
var body: some View {
// ユーザー名を入力するテキストフィールド。viewModelのusernameをバインドしている
TextField("Enter username", text: $viewModel.username)
.padding()
// テキストが変更されるたびにコンソールに出力
.onChange(of: viewModel.username) { newValue in
print("New username: \(newValue)")
}
}
}
まとめ
データバインディングは、UIとデータの間での双方向の同期を実現します。
@State、@Binding、ObservableObjectなどのプロパティラッパーを使用することで、状態の管理やデータの共有を容易にします。
@State: ビュー内でローカルな状態を管理し、UIの変更を自動的に反映します。
@Binding: 親ビューから子ビューにデータを渡し、双方向の通信を実現します。
ObservableObject: ViewModelで使用され、データの変更を監視し、UIに反映させます。
iOS17以降からはObservationという新たな状態監視のFrameworkが使用できるみたいです！
詳しくはこちらの記事に書いてあります！
さいごに
弊社では、経験の有無を問わず採用を行っています。
興味のある方は是非カジュアル面談しましょう！
https://jambo-support.com/recruit_engineer/
参考文献