Xcode13のConcurrency関連の新機能を使ってアプリを作ってみた

iOSエンジニアの石田です。

WWDC2021では、ConcurrrencyにまつわるSwiftの新しい文法やSwiftUIの新しいViewが紹介されました。

本記事では、それらを使ったアプリを作りながら、新機能を紹介したいと思います。

作るアプリは、GitHubのAPIを使って、ユーザの画像をUICollectionViewのような形式で表示するものです。ユーザ情報は https://api.github.com/users から取得でき、ユーザ画像は avatar_url で定義されています。

f:id:trill_tech:20210810093258p:plain:w300

async/await

まず、API経由でユーザ情報を取得します。

URLSessionを使って非同期通信を行う場合、コールバックでレスポンスを処理していました。しかし、Swift5.5で追加されたasync/awaitを使うことでコールバックが不要になります。

async/await自体は他の言語でも実装されている文法で、非同期処理をより簡潔に記述することができます。

以下が例となります。簡単のためにエラーハンドリングなどは全て無視しています。

func fetch() async {
    let users = try! await fetchUsers()
}

func fetchUsers() async throws -> [User] {
    let url = URL(string: "https://api.github.com/users")!
    let (data, _) = try await URLSession.shared.data(from: url)
    let users = try JSONDecoder().decode([User].self, from: data)
    return users
}

関数の返り値として非同期処理の結果を返すことができます。

URLSessionの処理をawaitをつけて呼び出し、関数自体をasyncで定義しています。 asyncをつけた関数を呼ぶ際は、awaitをつけて呼びます。

async/awaitを利用することでコールバックを使うことなく、同期処理と同じ記述で非同期処理を書くことができます。

AsyncImage

もともとSwiftUIにはImageという画像表示のためのViewがありましたが、URLを直接入力することはできず、HTTP通信で画像をダウンロードする場合はひと手間加える必要がありました。

Xcode13で登場したAsyncImageではそういった手間は不要で、URLを入力すると画像が自動でダウンロードされます。

使い方は極めてシンプルで、例えば以下のようになります。

AsyncImage(url: URL(string: "https://example.com/icon.png"))

プレースホルダーを指定し、画像をリサイズする場合は以下のようになります。

AsyncImage(url: url) { image in
    image.resizable()
} placeholder: {
    ProgressView()
}
.frame(width: 100, height: 100)

AsyncImageの引数はURL?型なので、unwrapすることなく気軽に使えるのも良いところだと思います。

async/awaitとAsyncImageを使ったサンプル

上述したasync/awaitとAsyncImage、そしてLazyVGridを使ってGitHubのユーザ画像をUICollectionViewのように2カラムでユーザ画像を表示します。

import SwiftUI

struct User: Decodable, Identifiable {
    let id: Int
    let avatarUrl: String
}

struct ContentView: View {
    @State var users = [User]()

    let columns: [GridItem] = Array(repeating: .init(.flexible()), count: 2)

    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns) {
                ForEach(users) { user in
                    AsyncImage(url: URL(string: user.avatarUrl)) { image in
                        image
                            .resizable()
                            .scaledToFill()
                    } placeholder: {
                        ProgressView()
                    }
                }
            }
        }
        .task {
            users = try! await fetchUsers()
        }
    }

    private func fetchUsers() async throws -> [User] {
        let url = URL(string: "https://api.github.com/users")!
        let (data, _) = try await URLSession.shared.data(from: url)
        let decoder = JSONDecoder()
        decoder.keyDecodingStrategy = .convertFromSnakeCase
        let users = try decoder.decode([User].self, from: data)
        return users
    }
}