SwiftUIでURL通信を伴うアプリを実装してみる

Introduction

WWDCで大きな発表がありましたね、そうSwiftUI。
ただSwiftUIでAPIを使ったアプリはどう実装するんだと思い、
デモアプリを作ってみました。

Coding

• 実装したこと
  • ContentViewにNetworkManagerをStateとしてプロパティにもつ
  • NetworkManagerのinitでリクエストを行う
  • レスポンスをNetworkManagerのプロパティにupdateする
  • updateされた時にViewへの通知を行う

※APIとModelに関してはお持ちのAPIで書き換えお願いします。

ContentView

struct ContentView : View {
    @State var networkManager = NetworkManager()

    var body: some View {
        NavigationView {
            List (
                networkManager.models.identified(by: \.name)
            ) {
                Text($0.name)
            }
            .navigationBarTitle(Text("Model"))
        }
    }
}

NetworkManager

class NetworkManager: BindableObject {
    var didChange = PassthroughSubject<NetworkManager, Never>()

    var models: [Model] = [] {
        didSet {
            didChange.send(self)
        }
    }

    init() {
        guard let url = URL(string: "https://xxx.json") else { return }

        URLSession.shared.dataTask(with: url) { (data, _, _) in
            guard let data = data else { return }
            let models = try! JSONDecoder().decode([Model.self], from: data)
            DispatchQueue.main.async {
                self.models = models
            }
        }.resume()
    }
}

Model

struct Model: Decodable {
    let name: String
}

Figure

Impression

SwiftUIでAPIからのView生成まで作ることができました。
既存のフレームワークより大分簡潔にコード量も少なく書くことができます。
まだまだ出来ることが未知なフレームワークですが、今後が楽しみです！

Reference

https://developer.apple.com/videos/play/wwdc2019/204/
SwiftUI Fetching JSON and Image Data with BindableObject - YouTube