【swiftUI】MVVMでやりたい（ObservableObject）

概要

簡単なModel, ModelView, Viewを作って表示させる。
Listすらやらないほど簡単。

API叩いたりもう少しやりたい場合は ↓ の方がいい。

taopo.hatenablog.com

MVVMについて

Model

データの型や構造を定義する。
JSONの各キーに対してどんな値を取るかを定めていく感じ。

ViewModel

データを表示する形に整形したり、API通信でデータを取得する処理があったりする。
データの変更はViewにすぐ反映されて再描画される、つまりViewModelは監視されている（ObservableObject）。

View

見た目を司る。それだけ。

実際に作ってみる

ユーザーデータを表示するためのModel, ViewModel, Viewをつくる。

Model（UserModel.swift）

import Foundation

struct UserModel: Identifiable {

    var id: Int
    var name: String
    var age: Int
    var sex: String
    var location: String
    var job: String
    var email: String

}

ViewModel（UserViewModel.swift）

import Foundation

// モックデータ
let userMock: UserModel = UserModel(
    id: 1,
    name: "山田太郎",
    age: 20,
    sex: "男性",
    location: "東京都",
    job: "学生",
    email: "yamada@gmail.com"
)

final class UserViewModel: ObservableObject {
    
    // Viewで使用するデータは@Published
    @Published private(set) var user: UserModel
    
    // 今回はモックだが、実際にはAPIでデータを取得し格納する処理をinitで行うことが多い。
    init() {
        self.user = userMock
    }

}

View（UserView.swift）

import SwiftUI

struct UserView: View {
    
    // @ObservedObjectでViewModelのデータを監視する
    @ObservedObject var vm = UserViewModel()

    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text("氏名: \(vm.user.name)")
            Text("年齢: \(vm.user.age)")
            Text("性別: \(vm.user.sex)")
            Text("エリア: \(vm.user.location)")
            Text("職種: \(vm.user.job)")
            Text("Mail: \(vm.user.email)")
        }
    }
}

struct UserView_Previews: PreviewProvider {
    static var previews: some View {
        UserView()
    }
}