SwiftUIでの並行処理

SwiftUIでの並行処理

Swiftの並行処理機能を使用して、さらに優れたSwiftUI Appを構築する方法を確認しましょう。並行処理のワークフローがObservableObjectsとどのように相互作用するかを示し、SwiftUIのビューとモデルで直接使用する方法を探ります。SwiftUIのランループ上でAppをスムーズに動作させるawaitの使い方を確認し、AsyncImage APIを使用してリモート画像を素早く取得する方法を確認します。また、カスタムビューで追加の非同期フローを有効にするプロセスも紹介します。

リソース
- AsyncImage
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC22
- 効率的なawait：SwiftUIのバックグラウンドタスク
- Swiftの並行処理でデータ競合を排除する
WWDC21
WWDC20
- Swift UIにおけるデータの重要事項
ダウンロード

「SwiftUIでの並行処理」 SwiftUIチームのCurt Cliftonです同僚のJessicaも後で参加します Swift 5.5はSwiftのコードで並行処理を管理するための様々なツールを導入しました今回の改善は Swift Appにどのように作用するのでしょうか新しいツールがデータモデルをさらに改善するのにどのように役立つのか SwiftUIがどのように機能するか説明します次にデータモデルをSwiftUIビューに接続する方法を示し SwiftUIの新しい並行処理ツールを利用する優れた最新のAPIを紹介しますこれからお話しする情報を最大限に活用するには Swiftの新しい並行処理サポートの背景を理解することが大切ですこのビデオを観る前に「Swiftのasync/awaitについて」と「Swiftにおける構造化並行処理」の動画をご覧ください子供のころいつも宇宙飛行士になりたいと夢見てましたいつか宇宙船で仕事をしたい残念ながら幼少期の夢が叶うことはありませんでしたしかし今でも宇宙への熱意は変わりませんそこでSwiftUIのエンジニアとして自分のスキルを活かし宇宙関連の画像をダウンロードします計画しているAppをご覧ください様々な宇宙の画像が並んでいます美しい色彩ですねお気に入りの画像を見つけて後で見るために保存できます美しい画像を取得するため私のAppはREST APIを使用して Webサービスと対話します Swiftの新しい並行処理機能を使うのに最適ですデータモデルから始めましょう SpacePhoto structを使ってある写真の情報を得ますこの構造体にはタイトルや写真の説明　投稿された日付実際の画像のURLなどのフィールドがありますサーバーの応答から簡単にインスタンス化できるように Codableにしましたそしてディスクに保存し識別可能にしてデータ駆動型ビューで使用できるようにします次にこれらのエントリのリストを表示しますそのためにはコレクションを取得して保持するモデルが必要ですこれにはPhotosクラスを使用します Photosクラスを ObservableObject に準拠させることによりデータが更新されるたびに SwiftUIビューが自動的に更新されます公開されたプロパティを使用して SpacePhotosの配列を格納します
RESTエンドポイントから更新アイテムを得るために UpdateItemsメソッドを使います後でもっと詳しく説明しますまず基本的なユーザー･インターフェースについて
これは私が構築したいUIですこれまでのところタブビューと基本的な PhotoViewがあります
PhotoViewは宇宙の写真とタイトルを表示しますデータモデルの動作を確認するのにこれで十分です次に CatalogViewで見てみましょう CatalogViewに写真のリストが表示されますこれには StateObject を追加して PhotosのObservable Objectを使ってインスタンス化します Viewの本体に NavigationViewを追加します NavigationViewを使うとすぐに大きなナビゲーションタイトルを追加できます次に NavigationViewにリストを追加しますリストにはForEachを使って写真をマッピングしてそれぞれの写真にPhotoViewを表示します
これでサンプルデータを見られます
基本の説明はここまでですがもう少し磨きをかけてみましょう
最初にナビゲーションのタイトルですデフォルトのインセットリストも見栄えがしますが宇宙の写真をより際立たせるために Plain Styleに切り替えて黒の背景に写真が映えるようにしたいと思います
新しいenumのstaticメンバー構文で listStyleをプレーンにしますこの構文ではSwiftUIのスタイル修飾子は Xcode 13の自動補完サポートが向上してサポートが向上しより簡潔なスペルになります最後に今年追加された新機能であるリストセパレーターの制御を使用します
ForEach内で listRowSeparator修飾子を使用して区切り文字を非表示にできます
ユーザーインターフェイスを磨き上げるのはいくらでも時間を費やせるのでこの辺で終わりにします私がデータモデルを完成させたら Jessicaが仕上げてくれる計画ですデータモデルを掘り下げる前に SwiftUIがObservableObjectとどのように相互作用するか少しお話しします Swift5.5の新しい並行処理機能によりこの相互作用をこれまで以上に簡単に実現できるようになりました「Swift UIにおけるデータの重要事項」で Rajが更新ライフサイクルについて話しましたこのライフサイクルを推進するコードを「実行ループ」と呼びます実行ループはMainActorで実行されますアクター全般の詳細については「Swiftアクターによるミュータブルステートの保護」という動画をご覧ください僕たちはMainActorに焦点を絞ります SwiftUI実行ループはイベントを受信しモデルを更新してから SwiftUIビューを画面にレンダリングしますこれらの更新を「実行ループの目盛り」と呼びます展開すると複数のティックを連続して見られます
ObservableObjectsはいくつかの興味深い方法で SwiftUI実行ループと対話できます Photos ObservableObject に戻り updateItemsメソッドを見てみましょう SwiftUIビューから updateItemsを呼び出すと MainActorで実行されますこの青い長方形を使用してupdateItemsが実行されている時間を示しましょうフェッチした写真を itemsプロパティに割り当てるこのコード行に焦点を当てたいと思います "items"はPublishedのプロパティなのでこの割り当てによって objectWillChangeイベントが発生してすぐにフェッチされた写真が "items"のストレージに書き込まれます SwiftUIがobjectWillChangeを確認して itemsのスナップショットを取得しますスナップショット後の実行ループの次のティックで SwiftUIはスナップショットを現在の値と比較しますこれらの値が異なるため SwiftUIは Photosに依存するビューを更新することを認識しています objectWillChange ストレージの更新および実行ループティックはすべてMainActorで発生するため順番に発生することに注意してください 2020年の「Data Essentials」でビューが本体で機能しすぎると更新が遅くなるという説明があります
同様にモデルコードがMainActorに対して作業を行いすぎた場合も遅くなります
たとえばダウンロードが完了するのを待っている間に fetchPhotos関数がブロックされ接続速度が遅くなったとします私はMainActorをブロックしているので実行ループのこのティックを見逃しますユーザーには遅延に見えます以前は作業を実行するため別のキューにディスパッチした可能性があるため高価なfetchPhotos がメインスレッドから発生します一見大丈夫そうだが厄介な問題を抱えています ObservableObjectを MainActorから変更したので変更と実行ループティックがインターリーブする可能性がありますたとえばアイテムに割り当てたときに SwiftUIがobjectWillChange スナップショットを取得すると実行ループのティックの直前に発生する可能性があります状態の変化はまだ起こっていないため SwiftUIはスナップショットを変更されていない値と比較します実際の状態の変化は、実行ループティックの後に発生しますが SwiftUIはその変化を認識しないためビューは更新されません正しく更新するには次のイベントが順番に発生する必要があります objectWillChangeと ObservableObjectの状態が更新され実行ループが次のティックに到達しますこれらすべてが MainActorで発生することを確認できればこの順序を保証できます Swift 5.5以前は状態を更新するためにメインキューにディスパッチしていたかもしれません今でははるかに簡単になっています awaitを使いましょう！ awaitを使用してMainActorから非同期呼び出しを行うことで MainActorで他の作業を続けられますこれはMainActorのyeildと呼ばれます
updateItemsではawaitを使用して長時間実行しているI / O中に MainActorをSwiftUIに戻すことができるため実行ループを維持して UIの不具合を避けることができます非同期作業が完了すると SwiftはMainActorで updateItemsメソッドを再入力するため状態を更新できますどのように機能するか見てみましょう別のキューにディスパッチする代わりに長時間実行された操作の結果を待つだけです私がawaitと書くと updateItems関数が実行ループを続行できるように MainActorの制御を生成します待機中のフェッチが完了すると MainActorが関数に再入力します公開されたプロパティを安全に更新し objectWillChangeをトリガーして新しい値をSwiftUIで使用できるようになります Xcodeにジャンプしてフェッチを実行します updateItemsメソッドは次のとおりです fetchPhotosを実行するには写真をフェッチするコードを追加してみましょう fetchPhotoメソッドに残りのエンドポイントから写真のURLを取得させ SpacePhotoを返します
URLSessionの便利なdataメソッドの新しい非同期バージョンを使って URLからデータを取得してみます
これをスタブ化するために強制的な試行を行っています後ほど説明します
dataメソッドは非同期なので awaitを使用します
つまり fetchPhotoメソッドを非同期にする必要があります
できましたデータを取得したので Decodableイニシャライザを使用して写真をインスタンス化し返します
次にfetchPhotosを見てみましょう日付をランダムに選択してループするためにいくつかのコードをスタブしました配列を作成したいのでダウンロードした変数を作成し日付変数をループに追加します
ループ内では特定の日付を取得するための RESTエンドポイントの URLを構築するためにヘルパーメソッドを呼び出します
FetchPhotoメソッドを呼び出して結果を配列に追加します
作ってみましょう FetchPhotoは非同期なので結果を待つ必要があります
つまりfetchPhotosは非同期である必要があります
簡単にするためにFetchPhotoの呼び出しを連続して行っています Swift 5.5のタスクグループにはさらに強力なオプションが用意されていますスライドで示したように fetchPhotosを待つだけです
これで更新ロジックが整いましたフェッチを実現するための強制的な試みに不安を感じるかもしれません整理しましょうダウンロードに失敗したら nilをリターンします
そして fetchPhotosでは nilでない値だけを配列に追加します
Photosはasync-awaitを使用しているので MainActor上で実行する限り
厄介なobjectWillChangeのバグに遭遇しないことを確信できますどうしたら確実でしょうか？ Swiftのコンパイラが助けてくれます新しい@MainActorアノテーションを Photosに追加することによりコンパイラは Photosのプロパティとメソッドが MainActorからのみアクセスされることを保証しますそれが終わるとモデルが完成します次にJessicaがビューをモデルに接続し Appで並行処理を活用するための新しいSwiftUI APIを紹介します Jessica
Curt ありがとう CatalogViewに切り替えましょう Curtが見せてくれた updateItemsメソッドを使用します
カタログが表示されるたびに updateItemsを呼び出す時以前はonAppearを使用したかもしれません今年からSwiftUIでタスク修飾子を使用します Taskを使用すると非同期タスクをビューに関連付けることができますタスクはビューのライフタイムの最初に開始されますタスクはデフォルトで非同期であるためそのクロージャ内で myPhotosオブジェクトで updateItemsを呼び出して結果を待つことができます
これはタスクの優れた使用法ですがこの新しい修飾子はさらに活用できますタスクの有効期間はビューの寿命に関連付けられているため非同期シーケンスを待機したりその値に応答することができますまたビューの有効期間が終了するとタスクは自動的にキャンセルされますビューの有効期間の詳細については「SwiftUIの徹底解説」を確認してくださいライブプレビューを使うとエントリが更新されていますしかしまだ美しい画像が欠けています Curtが見せてくれたPhotoViewはすでに更新されていますタイトルの後ろに背景を追加しますそれでは画像を追加しましょう新しいAsyncImage APIを使用するとリモートサーバーからの画像の読み込みがこれまでになく簡単になります私がしなければならないのはエントリからフェッチしたい画像のURLを取得しそれをAsyncImageに渡すことだけです
フルサイズでは少し大きすぎるので AsyncImageのオーバーロードを使用して画像を調整しプレースホルダーを表示してユーザーに画像を読み込み中と知らせます
次に画像のサイズを変更しペースを埋めるようにアスペクト比を設定します
最後に幅と高さの最小値を追加して画像に柔軟性を持たせます最小の高さをゼロ以外にすることで ProgressViewがタイトル領域から顔を出します
SwiftUIの他の部分と同様にAsyncImageはデフォルトで構築されているので画像の読み込み中にエラーが発生した場合でもプレースホルダーが引き続き表示されますエラー処理の動作をカスタマイズできますこれを行うには「AsyncImage」「AsyncImagePhase」をご覧くださいまたユーザーがお気に入りの画像を保存して後で表示できると便利ですこのタイトル領域にボタンを追加しましょうボタンは非同期アクションをトリガーしてイメージエントリをディスクに保存しますそして Appの保存済みタブに表示されますこれを行うためのビューをすでにスタブしていますここに追加してコードを見てみましょう
保存ボタンのスタブインバージョンです写真を保存するアクションを追加しましょう SwiftUIのボタン操作は同期的ですが私の保存メソッドは非同期的ですメソッドを呼び出すために非同期タスクを起動します
次にクロージャー内で写真の保存メソッドを呼び出します非同期なのでawaitを使用します
保存中に ProgressViewを表示すると良いと思いますそのために＠State プロパティを追加します
保存するための＠Stateを更新していきます
ボタンのラベルを更新して保存が行われているときに ProgressViewを表示します opacityを使って「保存」ラベルを隠しオーバーレイを使って ProgressViewを表示しますこの組み合わせにより「保存」という単語のローカリゼーションに基づきボタンのサイズを保ちます
最後に保存中はボタンを無効にします
ライブプレビューで見てみましょう
素晴らしいです！カタログビューへ戻って総括します
SwiftUIには今年素晴らしい修飾子が追加されユーザーがデータを手動で更新する機能を提供できるようになりました Listに refreshable修飾子を追加することでこのコンテンツは更新可能と通知します refreshableに非同期のクロージャを提供し updateItemsメソッドを呼び出してListを更新します taskで示したようにこの非同期メソッドにはawaitを使います
非同期の作業が終了するとリフレッシュ･インジケータは自動的に解除されますこれでプルダウンして画像を更新したり「保存」をタップして気に入った画像を保存したり保存タブに切り替えて画像を確認できます
Swiftの新機能によりデータを簡単に並行処理できます SwiftUIは Swiftの並行処理機能をうまく統合しデフォルトで最高の動作を提供します多くの場合 awaitを使用して並行処理機能を利用します ObservableObjectに @MainActorをマークするとオブジェクトがビューとうまく連動して更新されるか厳密にチェックすることができます
SwiftUIの追加APIを利用して安全でパフォーマンスの高い並行処理Appを最小限の労力で書くことができます AsyncImageを使用して画像を同時に読み込みます refreshable修飾子をビュー階層に追加してデータを手動で更新します保存ボタンで説明したように Swiftの新しい並行処理機能を独自のカスタムビューで使用することができます
並行処理は厄介なものです難しい問題ですがこれらの新しい言語機能と SwiftUI APIを使用すると Appの複雑さを管理するためのツールを利用できるようになります Swift 5.5とSwiftUIに新しく搭載された素晴らしい並行処理ツールについて楽しく学んでいただけたと思います皆さんがAppの厄介な問題に取り組むためにこれらのツールがどのように使用されるのか楽しみにしています [音楽]

/// A SpacePhoto contains information about a single day's photo record
/// including its date, a title, description, etc.
struct SpacePhoto {
    /// The title of the astronomical photo.
    var title: String

    /// A description of the astronomical photo.
    var description: String

    /// The date the given entry was added to the catalog.
    var date: Date

    /// A link to the image contained within the entry.
    var url: URL
}


extension SpacePhoto: Codable {
    enum CodingKeys: String, CodingKey {
        case title
        case description = "explanation"
        case date
        case url
    }

    init(data: Data) throws {
        let decoder = JSONDecoder()
        decoder.dateDecodingStrategy =
            .formatted(SpacePhoto.dateFormatter)

        self = try JSONDecoder()
            .decode(SpacePhoto.self, from: data)
    }
}

extension SpacePhoto: Identifiable {
    var id: Date { date }
}

extension SpacePhoto {
    static let urlTemplate = "https://example.com/photos"
    static let dateFormat = "yyyy-MM-dd"

    static var dateFormatter: DateFormatter {
        let formatter = DateFormatter()
        formatter.dateFormat = Self.dateFormat
        return formatter
    }

    static func requestFor(date: Date) -> URL {
        let dateString = SpacePhoto.dateFormatter.string(from: date)
        return URL(string: "\(SpacePhoto.urlTemplate)&date=\(dateString)")!
    }

    private static func parseDate(
        fromContainer container: KeyedDecodingContainer<CodingKeys>
    ) throws -> Date {
        let dateString = try container.decode(String.self, forKey: .date)
        guard let result = dateFormatter.date(from: dateString) else {
            throw DecodingError.dataCorruptedError(
                forKey: .date,
                in: container,
                debugDescription: "Invalid date format")
        }
        return result
    }

    private var dateString: String {
        Self.dateFormatter.string(from: date)
    }
}

extension SpacePhoto {
    init(from decoder: Decoder) throws {
        let container = try decoder.container(keyedBy: CodingKeys.self)
        title = try container.decode(String.self, forKey: .title)
        description = try container.decode(String.self, forKey: .description)
        date = try Self.parseDate(fromContainer: container)
        url = try container.decode(URL.self, forKey: .url)
    }

    func encode(to encoder: Encoder) throws {
        var container = encoder.container(keyedBy: CodingKeys.self)
        try container.encode(title, forKey: .title)
        try container.encode(description, forKey: .description)
        try container.encode(dateString, forKey: .date)
    }
}

2:39 - Photos

/// The current collection of space photos.
class Photos: ObservableObject {
    @Published private(set) var items: [SpacePhoto] = []

    /// Updates `items` to a new, random list of photos.
    func updateItems() async {
        let fetched = fetchPhotos()
        items = fetched
    }

    /// Fetches a new, random list of photos.
    func fetchPhotos() -> [SpacePhoto] {
        let downloaded: [SpacePhoto] = []
        for _ in randomPhotoDates() {
        }
        return downloaded
    }
}

3:24 - CatalogView

struct CatalogView: View {
    @StateObject private var photos = Photos()

    var body: some View {
        NavigationView {
            List {
                ForEach(photos.items) { item in
                    PhotoView(photo: item)
                        .listRowSeparator(.hidden)
                }
            }
            .navigationTitle("Catalog")
            .listStyle(.plain)
        }
    }
}

10:09 - Make fetch happen

/// An observable object representing a random list of space photos.
@MainActor
class Photos: ObservableObject {
    @Published private(set) var items: [SpacePhoto] = []

    /// Updates `items` to a new, random list of `SpacePhoto`.
    func updateItems() async {
        let fetched = await fetchPhotos()
        items = fetched
    }

    /// Fetches a new, random list of `SpacePhoto`.
    func fetchPhotos() async -> [SpacePhoto] {
        var downloaded: [SpacePhoto] = []
        for date in randomPhotoDates() {
            let url = SpacePhoto.requestFor(date: date)
            if let photo = await fetchPhoto(from: url) {
                downloaded.append(photo)
            }
        }
        return downloaded
    }

    /// Fetches a `SpacePhoto` from the given `URL`.
    func fetchPhoto(from url: URL) async -> SpacePhoto? {
        do {
            let (data, _) = try await URLSession.shared.data(from: url)
            return try SpacePhoto(data: data)
        } catch {
            return nil
        }
    }
}

14:07 - CatalogView

struct CatalogView: View {
    @StateObject private var photos = Photos()

    var body: some View {
        NavigationView {
            List {
                ForEach(photos.items) { item in
                    PhotoView(photo: item)
                        .listRowSeparator(.hidden)
                }
            }
            .navigationTitle("Catalog")
            .listStyle(.plain)
            .refreshable {
                await photos.updateItems()
            }
        }
        .task {
            await photos.updateItems()
        }
    }
}

15:11 - PhotoView with image

struct PhotoView: View {
    var photo: SpacePhoto

    var body: some View {
        ZStack(alignment: .bottom) {
            AsyncImage(url: photo.url) { image in
                image
                    .resizable()
                    .aspectRatio(contentMode: .fill)
            } placeholder: {
                ProgressView()
            }
            .frame(minWidth: 0, minHeight: 400)

            HStack {
                Text(photo.title)
                Spacer()
                SavePhotoButton(photo: photo)
            }
            .padding()
            .background(.thinMaterial)
        }
        .background(.thickMaterial)
        .mask(RoundedRectangle(cornerRadius: 16))
        .padding(.bottom, 8)
    }
}

18:06 - SavePhotoButton

struct SavePhotoButton: View {
    var photo: SpacePhoto
    @State private var isSaving = false

    var body: some View {
        Button {
            Task {
                isSaving = true
                await photo.save()
                isSaving = false
            }
        } label: {
            Text("Save")
                .opacity(isSaving ? 0 : 1)
                .overlay {
                    if isSaving {
                        ProgressView()
                    }
                }
        }
        .disabled(isSaving)
        .buttonStyle(.bordered)
    }
}

20:28 - CatalogView

struct CatalogView: View {
    @StateObject private var photos = Photos()

    var body: some View {
        NavigationView {
            List {
                ForEach(photos.items) { item in
                    PhotoView(photo: item)
                        .listRowSeparator(.hidden)
                }
            }
            .navigationTitle("Catalog")
            .listStyle(.plain)
            .refreshable {
                await photos.updateItems()
            }
        }
        .task {
            await photos.updateItems()
        }
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC22

WWDC21

WWDC20