<section><div><div><div><a><div><img></div><div>Swift</div></a><a><div><img></div><div>SwiftUI</div></a><a><div><img></div><div>combine</div></a><a><div><img></div><div>MVVM</div></a><a><div><img></div><div>tech</div></a></div><div><div><h1>
<a aria-hidden="true"></a> 1. ViewModelをViewでバケツリレー</h1>
<p><strong>メリット</strong> 簡単<br>
<strong>デメリット</strong> 小孫Viewの使い回しができない（ViewがViewModelに依存してしまう）</p>
<table>
<thead>
<tr>
<th>項目</th>
<th>特記事項</th>
</tr>
</thead>
<tbody>
<tr>
<td>Model</td>
<td>特になし</td>
</tr>
<tr>
<td>ViewModel</td>
<td>- <code>ObservableObject</code>プロトコルに準拠する<br>- modelに<code>@Published</code>アノテーションをつける</td>
</tr>
<tr>
<td>View</td>
<td>- 親ViewのviewModelに<code>@StateObject</code>アノテーションをつける<br>- 子孫ViewのviewModelには<code>@ObservedObject</code>アノテーションをつける</td>
</tr>
</tbody>
</table>
<div>
<div><span>App</span></div>
<pre><code>@main
struct SampleApp: App {
    var body: some Scene {
        WindowGroup {
            SampleView(viewModel: SampleViewModel(model: SampleModel()))
        }
    }
}
</code></pre>
</div><div>
<div><span>Model</span></div>
<pre><code>struct SampleModel {
    var count: Int = 0
    var stars: String = "★"
    
    mutating func changeStarsLength(_ len: Int) {
        self.stars = [String](repeating: "★", count: len).joined()
    }
}
</code></pre>
</div><div>
<div><span>ViewModel</span></div>
<pre><code>@MainActor
class SampleViewModel: ObservableObject {
    @Published var model: SampleModel
    
    init(model: SampleModel) {
        self.model = model
    }
    
    var count: Int {
        get {
            return model.count
        }
        set {
            model.count = newValue
        }
    }
    
    var stars: String {
        return model.stars
    }
    
    func changeStarsLength(_ len: Int) {
        model.changeStarsLength(len)
    }
}
</code></pre>
</div><div>
<div><span>View</span></div>
<pre><code>struct SampleView: View {
    @StateObject var viewModel: SampleViewModel
    
    var body: some View {
        VStack(spacing: 8) {
            Text("\(viewModel.count)")
            Button("Count Up") {
                viewModel.count += 1
            }
            SampleSubView(viewModel: viewModel)
        }
    }
}

struct SampleSubView: View {
    @ObservedObject var viewModel: SampleViewModel
    
    init(viewModel: SampleViewModel) {
        self.viewModel = viewModel
    }
    
    var body: some View {
        VStack(spacing: 8) {
            Text(viewModel.stars)
            Button("Change Stars Length") {
                viewModel.changeStarsLength(Int.random(in: 1 ..< 10))
            }
        }
    }
}
</code></pre>
</div><h1>
<a aria-hidden="true"></a> 2. プロパティはBinding、メソッドはクロージャーで保持</h1>
<p><strong>メリット</strong> 小孫Viewが使い回し可能になる<br>
<strong>デメリット</strong> とくになし？</p>
<table>
<thead>
<tr>
<th>項目</th>
<th>特記事項</th>
</tr>
</thead>
<tbody>
<tr>
<td>Model</td>
<td>特になし</td>
</tr>
<tr>
<td>ViewModel</td>
<td>- <code>ObservableObject</code>プロトコルに準拠する<br>- modelに<code>@Published</code>アノテーションをつける<br>- 子ViewでBindingしたいComputed Propertyにはsetterを定義する</td>
</tr>
<tr>
<td>View</td>
<td>- 親ViewのviewModelに<code>@StateObject</code>アノテーションをつける<br>- 小孫ViewでViewModelのメソッドを叩く時はクロージャーを保持するようにする</td>
</tr>
</tbody>
</table>
<p>パターン１からModelには変化なし</p>
<div>
<div><span>ViewModel</span></div>
<pre><code>@MainActor
class SampleViewModel: ObservableObject {
    @Published var model: SampleModel
    
    init(model: SampleModel) {
        self.model = model
    }
    
    var count: Int {
        get {
            return model.count
        }
        set {
            model.count = newValue
        }
    }
    
    // 子ViewでBindingするためにはsetterが必要
    var stars: String {
        get {
            return model.stars
        }
        set {
            model.stars = newValue
        }
    }
    
    func changeStarsLength(_ len: Int) {
        model.changeStarsLength(len)
    }
}
</code></pre>
</div><div>
<div><span>View</span></div>
<pre><code>struct SampleView: View {
    @StateObject var viewModel: SampleViewModel
    
    var body: some View {
        VStack(spacing: 8) {
            Text("\(viewModel.count)")
            Button("Count Up") {
                viewModel.count += 1
            }
	    // $をつけて渡す
            SampleSubView(stars: $viewModel.stars) { len in
	        // クロージャーで処理を渡す
                viewModel.changeStarsLength(len)
            }
        }
    }
}

struct SampleSubView: View {
    @Binding private var stars: String
    private var handler: (Int) -> Void
    
    init(stars: Binding<String>, action handler: @escaping (Int) -> Void) {
        self._stars = stars
        self.handler = handler  // クロージャーを保持
    }
    
    var body: some View {
        VStack(spacing: 8) {
            Text(stars)
            Button("Change Stars Length") {
                handler(Int.random(in: 1 ..< 10))
            }
        }
    }
}
</String></code></pre>
</div><h1>
<a aria-hidden="true"></a> 3. EnvironmentObjectでシングルトンなViewModelにアクセス</h1>
<p><strong>メリット</strong> バケツリレーしなくていい<br>
<strong>デメリット</strong> 小孫Viewの使い回しができない（ViewがViewModelに依存してしまう）</p>
<table>
<thead>
<tr>
<th>項目</th>
<th>特記事項</th>
</tr>
</thead>
<tbody>
<tr>
<td>App</td>
<td>- <code>.environmentObject()</code>でViewにViewModelを渡しておく</td>
</tr>
<tr>
<td>Model</td>
<td>特になし</td>
</tr>
<tr>
<td>ViewModel</td>
<td>- <code>ObservableObject</code>プロトコルに準拠する<br>- modelに<code>@Published</code>アノテーションをつける</td>
</tr>
<tr>
<td>View</td>
<td>- ViewModelが必要な各Viewで<code>@EnvironmentObject</code>アノテーションをつけてviewModelを定義</td>
</tr>
</tbody>
</table>
<div>
<div><span>App</span></div>
<pre><code>@main
struct Sample3App: App {
    var body: some Scene {
        WindowGroup {
            SampleView()
                .environmentObject(SampleViewModel(model: SampleModel()))
        }
    }
}
</code></pre>
</div><p>パターン１からModel、ViewModelには変化なし</p>
<div>
<div><span>View</span></div>
<pre><code>struct SampleView: View {
    @EnvironmentObject var viewModel: SampleViewModel
    
    var body: some View {
        VStack(spacing: 8) {
            Text("\(viewModel.count)")
            Button("Count Up") {
                viewModel.count += 1
            }
            SampleSubView()
        }
    }
}

struct SampleSubView: View {
    @EnvironmentObject var viewModel: SampleViewModel
    
    var body: some View {
        VStack(spacing: 8) {
            Text(viewModel.stars)
            Button("Change Stars Length") {
                viewModel.changeStarsLength(Int.random(in: 1 ..< 10))
            }
        }
    }
}
</code></pre>
</div><h1>
<a aria-hidden="true"></a> 番外：ViewModelとModelのやりとりをCombineでやる</h1>
<p>Computed PropertyではなくCombineのPublisherを使ってViewModelとModelのやりとりをやる。</p>
<div>
<div><span>Model</span></div>
<pre><code>// class にしてプロパティに@Publishedアノテーションをつける
final class SampleModel {
    @Published var count: Int = 0
    @Published var stars: String = "★"
    
    func changeStarsLength(_ len: Int) {
        self.stars = [String](repeating: "★", count: len).joined()
    }
}
</code></pre>
</div><div>
<div><span>ViewModelの例１</span></div>
<pre><code>@MainActor
class SampleViewModel: ObservableObject {
    @Published var count: Int
    @Published var stars: String
    
    private var model: SampleModel

    init(model: SampleModel) {
        self.model = model	
	// 初期値を渡す
        self.count = model.count
        self.stars = model.stars

        // modelの値が変わったらviewModelに反映させる
        self.model.$count.assign(to: &$count)
        self.model.$stars.assign(to: &$stars)
    }
    
    func changeStarsLength(_ len: Int) {
        model.changeStarsLength(len)
    }
}
</code></pre>
</div><p><code>assign</code>ではなく<code>sink</code>を使う手もある。</p>
<div>
<div><span>ViewModelの例２</span></div>
<pre><code>@MainActor
class SampleViewModel: ObservableObject {
    @Published var count: Int
    @Published var stars: String
    
    private var model: SampleModel
    private var cancellables = Set<AnyCancellable>()

    init(model: SampleModel) {
        self.model = model
        self.count = model.count
        self.stars = model.stars
                
        self.model.$count
            .sink(receiveValue: { count in
                self.count = count
            })
            .store(in: &cancellables)

        self.model.$stars
            .sink(receiveValue: { stars in
                self.stars = stars
            }).store(in: &cancellables)
    }
    
    func changeStarsLength(_ len: Int) {
        model.changeStarsLength(len)
    }
}
</AnyCancellable></code></pre>
</div></div></div><span></span><aside><div><a><img alt="Kyome" height="80" referrerPolicy="no-referrer" width="80"></a><div><a>Kyome</a></div><div><p><span>月に住む犬です。１日１Zenn。</span></p><div><span></span><a aria-label="@kyome22" data-tooltip-for-desktop="true" data-tooltip-position="bottom" role="tooltip"><svg x="0px" y="0px" viewBox="0 0 27 27" xml:space="preserve" aria-label="GitHub"><path fill="currentColor" d="M13.4,1.2C7,1,1.8,6,1.7,12.4c0,0.1,0,0.4,0,0.5c0,5.1,3.2,9.8,8.2,11.5c0.6,0.1,0.7-0.2,0.7-0.6s0-1.8,0-2.9 c0,0-3.3,0.6-4-1.5c0,0-0.6-1.3-1.3-1.8c0,0-1.1-0.7,0.1-0.7c0.7,0.1,1.5,0.6,1.8,1.2c0.6,1.2,2.2,1.7,3.4,1h0.1 c0.1-0.6,0.4-1.2,0.7-1.6C8.7,17.1,6,16.9,6,12.3c0-1.1,0.5-2.1,1.2-2.8c0-1.1,0-2.2,0.3-3.2c1-0.4,3.3,1.3,3.3,1.3c2-0.6,4-0.6,6,0 c0,0,2.2-1.6,3.2-1.2c0.5,1,0.5,2.2,0.1,3.2c0.7,0.7,1.2,1.8,1.2,2.8c0,4.5-2.8,5-5.5,5.2c0.6,0.6,0.9,1.3,0.7,2.2c0,1.7,0,3.5,0,4 s0.2,0.6,0.7,0.6c4.9-1.7,8.2-6.2,8-11.5c0.1-6.4-5.1-11.6-11.6-11.6C13.5,1.2,13.4,1.2,13.4,1.2z"></path></svg></a><a aria-label="@kyomesuke" data-tooltip-for-desktop="true" data-tooltip-position="bottom" role="tooltip"><svg width="27" height="28" viewBox="0 0 27 28" fill="none" aria-label="X(Twitter)"><g clip-path="url(#clip0_1_18)"><path d="M16.0687 11.7356L26.12 0H23.7382L15.0106 10.1899L8.03988 0H0L10.5411 15.4089L0 27.7155H2.38199L11.5985 16.9546L18.9601 27.7155H27L16.0681 11.7356H16.0687ZM12.8062 15.5447L11.7382 14.0103L3.24025 1.80106H6.89884L13.7568 11.6543L14.8248 13.1887L23.7393 25.9963H20.0807L12.8062 15.5452V15.5447Z" fill="currentColor"></path></g><defs><clipPath><rect width="27" height="27.7297" fill="white"></rect></clipPath></defs></svg></a><a aria-label="kyome.io" data-tooltip-for-desktop="true" data-tooltip-position="bottom" role="tooltip"><svg x="0px" y="0px" viewBox="0 0 27 27" xml:space="preserve" aria-label="リンク"><path fill="currentColor" d="M9.6,23.9c-3.6,0-6.5-3-6.5-6.6c0-1.7,0.7-3.4,1.9-4.6l2.3-2.3c0.5-0.4,1.2-0.4,1.6,0.1c0.4,0.4,0.4,1,0,1.5l-2.3,2.3 c-1.7,1.7-1.7,4.4,0,6.1s4.4,1.7,6.1,0l2.3-2.3c0.5-0.4,1.2-0.4,1.6,0.1c0.4,0.4,0.4,1,0,1.5L14.3,22C13,23.2,11.4,23.9,9.6,23.9z  M10.6,17.5c-0.6,0-1.1-0.5-1.1-1.1c0-0.3,0.1-0.6,0.3-0.8l5.8-5.8c0.4-0.4,1.1-0.4,1.6,0c0.4,0.4,0.4,1.1,0,1.6l-5.8,5.8 C11.2,17.4,10.9,17.5,10.6,17.5z M18.9,16.9c-0.3,0-0.6-0.1-0.8-0.3c-0.4-0.4-0.4-1.1,0-1.6l2.3-2.3c1.7-1.7,1.7-4.4,0-6.1 c-1.7-1.7-4.4-1.7-6.1,0L12,8.9c-0.5,0.4-1.2,0.4-1.6-0.1c-0.4-0.4-0.4-1,0-1.5L12.7,5c2.6-2.6,6.7-2.6,9.2,0s2.6,6.7,0,9.2 l-2.3,2.4C19.4,16.8,19.1,16.9,18.9,16.9z"></path></svg></a></div></div></div></aside><span></span></div></div><div><div></div></div></section>

Viewの状態を管理し、Modelとのやりとりを行うこと

Viewの見た目を直接変更すること

Modelのデータを永続化すること

Viewのイベント処理を全て行うこと

Modelのプロパティが変更された際にViewに通知するため

Modelのプロパティを定数にするため

Modelのプロパティを非同期にするため

@StateObjectは親Viewで、@ObservedObjectは子Viewで使用する

@StateObjectはViewModelを永続化し、@ObservedObjectは一時的に使用する

@StateObjectは非同期処理に使用され、@ObservedObjectは同期処理に使用される

Modelのデータを直接操作できる

Publisherを使用してModelの値をViewModelに反映させる

Modelのプロパティを直接変更する

ViewModelとModelの間に中間層を作る