Property Wrappers
SwiftUIのpropertyWrapperの前に、そもそもpropertyWrapperとは何かを説明させてください。
変数をラッピングして、アクセス（get/set）を制御するための仕組みです。
簡単な例を見てみましょう。
@propertyWrapper
struct HelloWorld {
private var text: String
init() {
text = ""
}
var wrappedValue: String {
get { return text }
set {
if newValue == "世界" {
text = "こんにちは, \(newValue)!"
return
}
text = "Hello, \(newValue)!"
}
}
}
クラスや構造体、enumに@peopertyWrapperをつけることで定義できます。
定義したら、それを以下のように変数に適用することができます。
@HelloWorld var name: String
nameに何らかの値をセットすると、"Hello, (name)!"という値に変換してセットされるようになります。日本語で"世界"とセットしたときだけ、"こんにちは, 世界!"となるようにしてみました。
wrappedValue
propertyWrapperはラッピングした値を返す変数であるwrappedValueを実装する必要があります。この値のget/setで、ラッピングした値を変更したりします。
projectedValue
追加でprojectedValueという変数を実装することもできます。ラッピングした値の状態を示したり、wrappedValueに関するなんらかの情報を返すことができます。外からこの値にアクセスするには$を頭につけなければいけません。例えば、
@propertyWrapper
struct HelloWorld {
var projectedValue: Bool
init() {
projectedValue = false
}
var wrappedValue {
// ... get ..
set {
if newValue == "世界" {
text = "こんにちは, \(newValue)!"
projectedValue = true
return
}
text = "Hello, \(newValue)!"
projectedValue = false
}
}
}
とすると、$nameで、Bool値が返ります。
class Hello {
@HelloWorld(text: "Hello, World!") var str: String
func sayHello() {
print(str) // Hello, World!
print("\($str)") // false
str = "世界"
print(str) // こんにちは, 世界!
print("\($str)") // true
}
}
「世界」という値をセットしたときだけ、projectedValueがtrueになるようにしています。
このようにprojectedValueを使ってwrappedValueの追加情報(投影値?)を返すことができます。
SwiftUI の propertyWrapper
以降はSwiftUIで定義されたpropertyWrapperについてみていこうと思います。
State
SwiftUIのviewは構造体（値）のため、変更不可です。ですが、変数に@Stateをつけると、その変数に変更が入ったら自動でviewを再構築してくれます。なのでviewで変更する必要があるものは@Stateをつけます。
struct GreetingView: View {
@State var message: String = ""
var body: some View {
VStack {
Text(message)
}
}
}
StateはprojecteValueとして、後述するBindingを返します。上記の例だと、 $message で、StringをBindingでラップした値を返してくれます。
Binding
双方向データバインディングというやつです。Bindingの値を変更すると、その情報源（変数）に、値の変更を反映してくれます。逆に情報源を更新すれば、Bindingから取得できる値も更新されています。
StateのprojectedValue（$）は、自身の値と結びつくBindingを返してくれるので、自身の値を更新してほしいときに渡します。
struct GreetingView: View {
@State var message: String = "ボタンは押さないでね★"
var body: some View {
VStack {
Text(message)
// Bindingする例
GreetingButton(message: $message)
// Bindingしない例
StateGreetingButton(message: message)
}
}
}
struct GreetingButton: View {
@Binding var message: String
var body: some View {
Button(action: {
self.message = "ボタン...押しましたね..."
}) {
Text("絶対に押すな！")
}
}
}
struct StateGreetingButton: View {
@State var messageState: String
var body: some View {
Button(action: {
self.messageState = "Bindingではないです"
}) {
Text("押してもいいですよ")
}
}
}
GreetingButtonで、Bindingであるmessageを更新すると、情報源であるGreetingViewのmessageに変更が反映されます。
しかし、StateGreetingButtonのボタンを押して、messageStateを変更しても、情報源であるGreetingView.messageには反映されません。
もう一つの例をあげると、Toggleの引数isOnにBindingを渡しますよね。これは、Toggle自身がisOnに渡したBindingの情報源を変更するためです。
@State var onOff: Bool = true
var body: some View {
Toggle(isOn: $onOff) {
Text("情報源(var onOff)の値を変えますよ: \(onOff.description)")
}
}
ObservedObject
ObservedObjectはObservableObjectを実装したクラスをwrappedValueとして持ちます。
struct PlayerViewView: View {
@ObservedObject var user: PlayerViewModel = PlayerViewModel()
var body: some View {
VStack {
Text("あなたは \(user.age) 歳です")
Button(action: {
self.user.haveBirthday()
}) {
Text("何歳ですか？")
}
}
}
}
final class PlayerViewModel: ObservableObject {
private(set) var age: Int = 0 {
willSet {
objectWillChange.send()
}
}
func haveBirthday() {
age += 1
}
}
上記の例だと、ボタンを押すたびに、PlayerViewへPlayerViewModelの変更が通知され、viewが更新されます。
データフローは@Stateと変わらないのですが、@ObservedObjectの場合は、wrappedValueがObservableObjectのオブジェクトでないといけない、という点が異なります。
ObservableObject
ObservableObjectはCombineフレームワークに含まれるプロトコルです。オブジェクトの変更を通知できることを表します。objectWillChangeというPublisher（変更イベントの発行元）を持っており、これを購読していれば、ObservableObjectの変更を検知できます。
ObservableObjectが自身に変更が入った、ということを通知するには、以下のようにobjectWillChange.send()を実行します。
class SomeObservableObject: ObservableObject {
var hello: String {
willSet {
// ObservableObjectに適合するクラスは objectWillChangeを持っている
objectWillChange.send()
}
}
}
以下のように購読すれば、変更が入ったことを検知できます。
class Hoge {
var cancellable: AnyCancellable?
init() {
cancellable = someObservalbeObject.objectWillChange.sink { _ in
// objectWillChange.send() が呼ばれた！
}
}
}
@ObservedObjectのpropertyWrapperを使うと、SwiftUIがObservableObjectを購読し、変更が入るたびにviewを更新してくれます。
Published
SwiftUIではなく、Combineで定義されたpropertyWrapperですが、ObservableObjectでよく使われるので説明します。
変数に@Publishedを付与すると、その変数のprojectedValueは自身の変更を通知する Publisher を返してくれます。
class Dog {
@Published var name: String = "Pero"
private var cancellable: AnyCancellable?
init() {
self.cancellable = $name.sink { newName in
print("あなたの名前: \(newName)")
}
}
}
let dog = Dog() // あなたの名前: Pero
dog.name = "John" // あなたの名前: John
dog.name = "Taro" // あなたの名前: Taro
sink で購読し、値の変更を監視しています。変更が入るたびにログ出力しています。
ObservableObjectというプロトコルに適合したクラスで、@Publishedの変数を持っている場合、それに対して変更すると、ObservableObjectの変更を自動で通知してくれます。
class Dog: ObservableObject {
@Published var name: String = "Pero"
private var cancellable: AnyCancellable?
init() {
self.cancellable = objectWillChange.sink {
print("名前、変わりましたね...")
}
}
}
let dog = Dog()
dog.name = "John" // 名前、変わりましたね...
なので、@Publishedを使えば、自前でwillSetにてobjectWillChange.send()なんて書かずによいので楽です。
EnvironmentObject
ObservableObjectを子ビューでも使いまわしたい場合は、@ObservedObjectではなく、@EnvironmentObjectを使用します。
struct ContentView: View {
@EnvironmentObject var setting: PlayerSettings
var body: some View {
VStack {
Text("あなたの通知設定: \(setting.isNotificationEnable.description)")
SubView()
}
}
}
struct SubView: View {
@EnvironmentObject var setting: PlayerSettings
var body: some View {
VStack {
Button(action: {
self.setting.isNotificationEnable.toggle()
}) {
Text("通知設定を変更")
}
}
}
}
/// View間で共有するオブジェクト
final class PlayerSettings: ObservableObject {
@Published var isNotificationEnable: Bool = false
}
上記の例だと、SubViewのsettingは親View(ContentView)のsettingが自動でインジェクトされます。なので、子View側で、変更したら、親Viewにも反映されます。
ただし、最初に@EnvironmentObjectを使用しているViewの生成時に、オブジェクトを生成して渡す必要があります。渡さないとクラッシュします。
let contentView = ContentView().environmentObject(PlayerSettings())
もう一つ注意する点は、sheetなどで表示した親子関係でない別のViewには自動でインジェクトされないということです。共有したい場合は、明示的に渡す必要があります。
struct ContentView: View {
@EnvironmentObject var setting: PlayerSettings
@State var showModal: Bool = false
var body: some View {
VStack {
Text("あなたの通知設定: \(setting.isNotificationEnable.description)")
Button(action: {
self.showModal = true
}) {
Text("べつのがめん")
}.sheet(isPresented: $showModal) {
// 親子関係でないViewでも共有したい場合は、明示的に渡す必要がある
SubView().environmentObject(self.setting)
}
}
}
}
Environment
SwiftUIで定義されたViewの設定値を取得することができます。
struct SubView: View {
@Environment(\.isEnabled) var enable: Bool
var body: some View {
VStack {
Text("活性状態? \(enable.description)")
}
}
}
例えば上記画面の表示時に、以下のようにdisabled(true)とすれば、@Environment(\.isEnabled)はfalseになります。
SubView().disabled(true)