Rest APIs and SwiftUI

Ellie Huxtable

REST APIとSwiftUI

最近、SwiftUIのViewでREST APIからデータを取得して描画する方法をどうしているのか、と聞かれました。

Reactのようなフレームワークから来た方だと、実は扱い方が異なります。initonAppearの中でリクエストを投げて、適当な@Stateを更新すればいい、というわけにはいきません。escapingクロージャの扱いにくさや、structがミュータブルでないことなど、いろいろと厄介な点があるのです。

幸い、SwiftUIには役立つ仕組みが用意されています :) GETリクエストの作り方などを詳しく解説するつもりはありませんが、私はJustを使うのが気に入っています。

まずはViewを用意してみましょう

struct UserProfile: View {
    @ObservedObject user: User = User(username: "elm", name: "Ellie")

    var body: some View {
    	VStack {
        	Text("Username: \(self.user.username)")
        	Text("Name: \(self.user.name)")
        }
    }
}

では、ここのuserオブジェクトはどうやって読み込むのでしょうか?@Stateでしょうか?

実は違います。ObservableObjectというものがあります。これは@Publishedプロパティを持つオブジェクトです。@Publishedプロパティが更新されると、そのオブジェクトを持っているViewで更新がトリガーされます。

例を見た方がわかりやすいでしょう

struct User: ObservableObject {
    @Published var username: String
    @Published var name: String

    init(username: String, name: String) {
    	self.username = username
        self.name = name
        
        self.load()
    }
    
    func load() {
    	somehowRequestDataAsynchronously();
        // so basically just change `username` or `name` in here
    }
}

Viewは本質的に「観測可能な(observableな)」何かを「観測(observe)」します —— @ObservedObject@ObservableObjectです。観測している対象の@Publishedプロパティが更新されると、すぐに再描画がトリガーされてViewが更新されます!

これで少しはすっきりしたでしょうか!

原文は Ellie Huxtable により に公開されました。

この記事は「muse-spark-1.2-contributor」を使用して翻訳されました。