Code Along：Swiftの並行処理によるアプリの強化

Code Along：Swiftの並行処理によるアプリの強化

Swiftの並行処理によって既存のサンプルアプリをアップデートして、アプリのユーザー体験を最適化する方法を学びます。まずメインアクターのアプリから始め、必要に応じて非同期コードを段階的に導入していきます。タスクを使用してメインアクター上で実行されるコードを最適化し、バックグラウンドにタスクをオフロードすることでコードを並列処理する方法を確認します。データ競合に対する安全性のメリットと、データ競合安全性に関するエラーの解釈と修正の方法について説明し、最後にアプリの観点で構造化された並行処理を最大限に活用する方法を紹介します。

関連する章
- 0:00 - イントロダクション
- 2:11 - アプローチしやすい並行処理の構成
- 2:51 - サンプルアプリのアーキテクチャ
- 3:42 - フォトライブラリからの写真の非同期読み込み
- 9:03 - 写真からのステッカーとカラーの抽出
- 12:30 - バックグラウンドスレッドでのタスク実行
- 15:58 - タスクの並列処理
- 18:44 - Swift 6によるデータ競合の回避
- 27:56 - 構造化された並行処理における非同期コードの制御
- 31:36 - まとめ
リソース
関連ビデオ

WWDC25
- Swiftの並行処理の活用
- SwiftUIの並行処理の詳細
WWDC23
- 構造化並行処理の基本を超えて
- Instrumentsによるハング分析
こんにちは SwiftとSwiftUI担当のSimaですこの動画では Swiftの並行処理を使いアプリをレベルアップする方法を学びますアプリデベロッパが書くコードはほとんどがメインスレッドにあります
シングルスレッドコードはわかりやすくメンテナンスも簡単ですただ最新のアプリではネットワークリクエストや負荷の高い演算など時間のかかるタスクが必要なケースは珍しくありませんこのような場合はアプリの応答性を維持するためメインスレッドから作業を移動させます Swiftは並行処理コードを書くのに必要なすべてのツールを備えていますこのセッションでは皆さんとアプリを構築しながらその方法を説明しますまずシングルスレッドアプリから始め必要に応じて徐々に非同期コードを導入していきます次に負荷の高いタスクの一部をオフロードして並列処理することでアプリのパフォーマンスを向上させます次に発生の恐れがあるデータ競合の安全対策シナリオについて説明しその対処方法を確認します最後に構造化並行処理を取り上げ TaskGroupなどのツールを使用して並行処理コードをきめ細かく制御する方法を紹介します早速始めましょう！私は日記をつけたりページをステッカーで飾りつけるのが大好きです任意の写真セットからステッカーパックを作成するためのアプリの構築方法を説明しますアプリには2つのメインビューがあります最初のビューにはオリジナルの写真の色を反映したグラデーションのステッカーが入ったカルーセルが表示され 2番目のビューにはステッカーパック全体のグリッドプレビューが表示されエクスポートできますサンプルアプリをダウンロードして一緒に始めてみましょう！プロジェクトを作成した際 Xcodeで並行処理の適用を容易にするための機能を有効にしましたデフォルトのメインアクターモードなど追加予定の新機能が含まれますこれらの機能は Xcode 26の新規アプリプロジェクトではデフォルトです
使いやすい並行処理構成では Swift 6の言語モードは準備ができるまで並行処理を導入せずデータ競合の安全性を確保しますこれらの機能を既存のプロジェクトで有効にする場合は Swift移行ガイドで手順を確認できます
アプリのコードには StickerCarouselと StickerGridというメインビューがありますこれらのビューは PhotoProcessor構造体が抽出するステッカーを使用します
PhotoProcessorはステッカーを返す前にフォトライブラリから生の画像を取得します
StickerGridビューにはステッカーを共有するためのShareLinkがあります
PhotoProcessor型はステッカーの抽出とドミナントカラー演算という 2つの負荷の高い演算を実行します Swiftの並行処理機能がスムーズなユーザー体験を実現しつつデバイスで負荷の高いタスクを実行するため最適化する方法を見ていきましょう！まず StickerCarouselビューから始めますこのビューではステッカーが水平スクロールビューで表示されますスクロールビュー内には ForEachがありビューモデルに保存されているフォトライブラリから選択された写真の配列を反復処理します viewModelのprocessedPhotos ディクショナリをチェックしてフォトライブラリ内の選択に対応する処理済みの写真を取得しますここでは写真ピッカーから画像を取得するためのコードを実際に書いていないため処理済みの写真はありませんここでアプリを実行するとスクロールビューに表示されるのは StickerPlaceholderビューのみです「command」キーを押しながらクリックして StickerViewModelにナビゲートします StickerViewModelはフォトライブラリから選択されている写真の配列を SelectedPhoto型として表示しますこの型は「option」キー+クリックで開く Quick Helpで詳細を確認できます
SelectedPhotoは PhotosUIフレームワークからの PhotosPickerItemとその関連IDを格納する識別可能な型ですこのモデルには選択された写真のIDを SwiftUIの画像にマッピングする「processedPhotos」という名前の辞書も含まれていますここでは選択された写真を表示する loadPhoto関数の実装を開始していますただここでは保存されている写真ピッカーからデータは読み込まれません PhotosPickerItemはSDKのTransferable プロトコルに準拠しているため asynchronous loadTransferable関数を使用して要求した表現を非同期で読み込むことができますここでデータ表現をリクエストします
コンパイラエラーが発生しました
「loadTransferable」呼び出しが非同期でそれを呼び出す「loadPhoto」関数が非同期呼び出しの処理用として設定されていないからですそこで Swiftは「loadPhoto」に「async」キーワードを付けることを提案していますこの案を適用します
この関数は非同期コードを処理できますがまだエラーが残っています「loadPhoto」は非同期呼び出しを処理できますが何を待機するかの指定が必要ですそのためには「loadTransferable」への呼び出しを「await」キーワードでマークする必要がありますこの修正案を適応します
StickerCarouselビューでこの関数を呼び出します「command+shift+O」キーでXcodeの「Open Quickly」を使用して StickerCarouselに戻ることができます
StickerPlaceholderビューが表示されたら loadPhoto関数を呼び出しますこの関数は非同期であるためこのビューが表示されたら SwiftUIタスク修飾子を使用して写真の処理を開始します
私のデバイスでチェックしてみましょう
いいですね動いています試しに写真を何枚か選択してみましょう
いいですね画像は私のフォトライブラリから読み込まれていますねこのタスクによりデータから画像が読み込まれている間もアプリのUIの応答性を維持できます画像の表示にLazyHStackを使用しているため画面でレンダリングが必要なビューに対してのみ写真の読み込みタスクを開始していますつまりアプリは必要以上の作業を実行していません async/awaitがアプリの応答性を向上させる理由について説明しましょう
「loadTransferable」メソッドを呼び出す際「await」キーワードを追加し「loadPhoto」関数に「async」の注釈を付けました「await」キーワードは可能性のある一時停止ポイントをマークしますつまり最初にloadPhoto関数がメインスレッドで開始され awaitで loadTransferableを呼び出すと loadTransferableが完了するまでの待機中は一時停止になります loadPhotoが一時停止の間 Transferableフレームワークはバックグラウンドスレッドで loadTransferableを実行します loadTransferableが完了すると loadPhotoはメインスレッドで実行を再開し画像を更新します loadPhotoが一時停止の間メインスレッドはUIイベントに応答し他のタスクを実行できます関数が一時停止されている間 awaitキーワードは他の作業を実行できるコード内のポイントを示しますこれでフォトライブラリからの画像の読み込みが完了しましたその過程で非同期コードとは何かどのように書き考えるかを学びました次にアプリにコードを追加して写真からステッカーを抽出しプライマリカラーを抽出しますがこのカラーはカルーセル表示で背景のグラデーションに使用できます
「command」キーを押しながらクリックすると loadPhotoに戻りこれらの効果を適用します
プロジェクトにはすでに PhotoProcessorが含まれておりデータを取得して色とステッカーを抽出し処理済みの写真を返しますデータから基本画像を提供するのではなく代わりに PhotoProcessorを使用します
PhotoProcessorが処理された写真を返すので辞書の型を更新します
このProcessedPhotoは写真から抽出されたステッカーとグラデーションを構成する色の配列を提供します
プロジェクトにはすでに processedPhotoを受け取るGradientStickerビューがあります「Open Quickly」を使用してそこに移動します
このビューでは ZStackの線形グラデーションで処理済みの写真に保存されたステッカーが表示されます
このGradientStickerをカルーセルに追加します
現在 StickerCarouselでは写真のサイズを変更しているだけですが処理済みの写真があるので代わりにGradientStickerを使用します
アプリを構築して実行しステッカーを確認しましょう
うまく行っています
ああダメですねステッカーを抽出している間のカルーセルのスクロールがギクシャクしています
画像処理は負荷が高いからでしょうこれを確認するため Instrumentsでアプリのプロファイルを作成しましたトレースにはアプリに重大なハングが発生していることが示されています
ズームインして最も重いスタックトレースを確認すると写真プロセッサが負荷の高い処理タスクで 10秒以上もメインスレッドをブロックしています！アプリにハング分析についてはセッション「Instrumentsによるハング分析」をご覧ください次にこのアプリがメインスレッドで実行する作業について詳しくお話ししましょう
「loadTransferable」の実装ではメインスレッドで読み込みが発生しないように作業をバックグラウンドにオフロードする処理が行われました
メインスレッドで実行され完了まで時間を要する画像処理コードを追加したのでメインスレッドはスクロールジェスチャーへの応答など UI更新を受信できずアプリのユーザー体験が低下します
以前は SDKから非同期APIを適用していたので代行で作業がオフロードされていました今度はハングを修正するため独自のコードを並列処理します画像変換の一部を背景に移動することができます画像の変換は3つの演算で構成されています生の画像を取得し画像を更新するには UIの操作が必要であるためこの作業をバックグラウンドに移動させることはできませんが画像処理をオフロードすることはできますこれで負荷の高い画像処理が行われている間メインスレッドが他のイベントに自由に応答できるようになりますその方法を理解するにはまず PhotoProcessor構造体を見てみましょう
このアプリはデフォルトでメインアクターモードであるため PhotoProcessorは @MainActorに関連づけられておりすべてのメソッドはメインアクターで実行する必要があります「process」メソッドはextract stickerと extract colorsメソッドを呼び出すのでこの型の全メソッドをメインアクターから実行可能としてマークする必要がありますこれを実行するには PhotoProcessor型全体を非隔離としてマークしますこれは Swift 6.1で導入された新機能です型が非隔離としてマークされている場合そのすべてのプロパティとメソッドは自動的に非隔離になります
PhotoProcessorがMainActorに関連付けられなくなったのでプロセス関数に新しい「@concurrent」属性を適用し「async」でマークしますこれで Swiftがこのメソッドを実行する際はバックグラウンドスレッドに切り替わります「Open Quickly」を使って PhotoProcessorに戻ります
まず型にnonisolatedを適用して PhotoProcessorをメインアクターから分離しそのメソッドを並行コードから呼び出せるようにします
PhotoProcessorが非隔離になったのでバックグラウンドスレッドからプロセスメソッドが呼び出されるように @concurrentとasyncを適用します
ここで「Open Quickly」を使用して StickerViewModelに戻りましょう
Swiftが推奨するようにloadPhotoメソッドは「await」キーワードを使用して processメソッドを呼び出すことでメインスレッドを終了する必要がありますこの案を適用します
アプリを構築して実行しこの作業をメインアクターから移動することでハングが軽減されたか確認しましょう
スクロールのハングは解消されたようです
ただ UIは操作できてもスクロール中に画像がUIに表示されるまで時間がかかりますユーザー体験を向上させる要素はアプリの応答性だけではありませんメインスレッドから作業を移動させても結果が出るまで時間がかかるのでユーザーにとってはアプリで体験するイライラは解消されません
画像処理の演算はバックグラウンドスレッドに移しましたがそれでも完了までかなり時間がかかります並行処理でこの演算を最適化し完了するまでの時間を短縮できるかを見てみましょう画像処理にはステッカーとドミナントカラーの抽出が必要ですがこの演算はお互いに独立していますそこで async letを使用すればこれらのタスクを並列処理できますすべてのバックグラウンドスレッドを管理する並行処理スレッドプールは 2つのタスクが別々のバックグラウンドスレッドで同時に開始するように設定しますこれで携帯電話のマルチコアを有効活用できます
「command」キーを押しながらクリックして async letを適用します
「control+shift」キーを押しながら下矢印でマルチラインカーソルを使用してステッカーとカラー変数の前に asyncを追加します
この2つの呼び出しを並列処理したのでその結果を待ってプロセス関数を再開します「Editor」メニューを使用して問題をすべて修復しましょう
まだもう1つエラーがあります今度はデータ競合です！少し時間をとってこのエラーについて説明しましょう
このエラーが発生したのは私のPhotoProcessor型は並行処理タスク間の共有が危険であることを意味しますその理由を知るためストアドプロパティを見てみましょう PhotoProcessorが保存する唯一のプロパティは写真から色を抽出するのに必要な ColorExtractorのインスタンスです ColorExtractorクラスは画像に表示されるドミナントカラーを計算しますこの計算はピクセルバッファを含む低レベルの可変画像データに対して実行されるので color extractor型の同時アクセスは危険です
すべての色抽出演算はColorExtractorの同じインスタンスを共有しますこれにより同じメモリへの並行アクセスが発生します
これは「データ競合」と呼ばれクラッシュや予期しない動作などランタイムバグにつながります Swift 6の言語モードではコンパイル時にこれを識別し並列処理コードを記述する際にバグのセットを除外しますこれによって難しいランタイムバグがすぐに対処できるコンパイラエラーに移行しますエラーメッセージのボタンクリックすると SwiftのWebサイトでこのエラーの詳細を確認できますデータ競合を解決する際に検討するオプションは複数ありますどれを選ぶかはコードが共有データを使用する方法によって異なりますまず確認しましょうこの変更可能な状態は並行処理コード間で共有する必要があるでしょうか？ほとんどの場合ただ共有を避けるだけですがただしこうしたコードで状態の共有が必要なケースもありますその場合は共有する必要があるものを安全に送信できる値の型に抽出してみましょうこれらの解決策を適用できない場合のみこの状態をMainActorなどのアクターに隔離することを検討してください最初の解決策がこのケースで有効か見てみましょうこの型をリファクタリングして複数の並列処理に対応するように変更することもできますが代わりに extractColors関数の色抽出関数をローカル変数に移動し処理中の写真に独自の色抽出関数のインスタンスを持たせます色抽出関数が処理するのは 1回につき写真1枚であるためこのコード変更は正しいですねつまり色抽出タスクごとに個別のインスタンスが必要ですこのコード変更により extractColors関数の外部からは色抽出にアクセスできなくなるのでデータ競合が回避されます
この変更を行うには色抽出プロパティを extractColors関数に移動します
いいですねコンパイラを活用しアプリのデータ競合を検出し排除することができましたでは実行してみましょう
アプリの動作が速く感じます！
Instrumentsでプロファイラトレースを収集し開くともうハングはありません Swiftの並行処理による最適化を簡単にまとめましょう「@concurrent」属性を適用することで画像処理コードをメインスレッドから隔離できましたまた「async let」を使用してステッカーと色の抽出演算を相互に並列化しアプリのパフォーマンスが向上しました Swiftの並行処理による最適化はタイムプロファイラインストルメントなど分析ツールのデータに基づいて行う必要があります並行処理を適応しなくてもコードを効率的にできる場合は先にそれを実行してくださいアプリの動きがシャープですね！画像処理は少し休憩して楽しい要素を追加しましょう
処理済みのステッカーに視覚効果を追加してステッカーをスクロールするとフェードアウトしてぼやけるようにします Xcodeに切り替えて書いてみましょう！
Xcodeプロジェクトナビゲータを使用して StickerCarouselに戻ります
ここで visualEffect修飾子を使用してスクロールビューの各画像に視覚効果を適用します
ここではビューにエフェクトを適用しますスクロールビューの最後のステッカーのみオフセット、ぼかし、不透明度を変更したいので最後のステッカーに視覚効果が適用されているか確認するには viewModelの選択プロパティにアクセスする必要があります
VisualEffectクロージャからメインアクターの保護されたビュー状態にアクセスしようとしているためコンパイラエラーが発生しています視覚効果の計算は負荷の高い演算であるため SwiftUIはアプリパフォーマンス向上のため演算をメインスレッドからオフロードします
好奇心旺盛でもっと詳しく知りたいという方はセッション「SwiftUIの並行処理の詳細」をご覧ください以上のことがこのエラーからわかりましたこのクロージャは後でバックグラウンドで評価されますこれを「visualEffect」の定義を見て確認しましょう「command」キーを押しながらクリックします
定義ではこのクロージャは @Sendableです SwiftUIからの指示でこのクロージャがバックグラウンドで実行されることを示します
この場合 SwiftUIは選択が変更されると視覚効果を再度呼び出すためクロージャのキャプチャリストを使用してコピーを作成できます
SwiftUIがこのクロージャを呼び出すと選択値のコピーに演算が実行されるためこの演算にはデータ競合が発生しません
視覚効果をチェックしてみましょう
きれいにできていますスクロールすると前の画像がぼやけてフェードアウトするのがわかります
ここまで見てきた2つのデータ競合シナリオの解決策は変更の可能性があるデータを並行処理コードから共有しないことでした両者の主な違いはコードの一部を並列処理することでデータ競合を独自に導入したことです 2番目の例では SwiftUI APIを使用してバックグラウンドスレッドに作業をオフロードしました
変更可能な状態を共有する場合は他に保護する方法があります Sendable値の型は並行処理のコード間で型が共有されるのを防ぎますたとえば extractStickerメソッドと extractColorsメソッドは並列処理されどちらも同じ画像のデータを取得しますただしデータはSendable値型でありこの場合はデータ競合は発生しませんデータはコピーオンライトを実装しており変更された場合のみコピーされます値型を使用できない場合は状態をメインアクターに隔離する方法もありますデフォルトモードではメインアクターがすでにその処理を実行していますたとえばモデルはクラスであり並行タスクからアクセスできますモデルは暗黙的に MainActorでマークされているので並行処理コードから参照しても安全です状態にアクセスするにはコードをメインアクターに切り替える必要がありますこの場合クラスはメインアクターによって保護されますがコード内の他のアクターにも同じことが適用されます今のところアプリはいい感じですただまだ未完成です
ステッカーをエクスポートするには未処理の写真ごとに写真処理タスクを開始しすべてのステッカーを一括表示するステッカーグリッドビューを追加しますステッカーをエクスポートできる共有ボタンもありますではコードに戻りましょう
まず「command」キー+クリックで StickerViewModelに移動します
モデルに別のメソッド「processAllPhotos()」を追加します
ここではモデルに保存されている処理済み写真をすべて反復処理し未処理の写真がある場合は一括処理を開始するための複数の並列タスクを設定します
以前は async letを使用しましたがこの場合はステッカーと色抽出というタスクが2つのみであるためスムーズに機能したのです配列内のすべての未処理写真に対して新しいタスクを作成する必要がありますが処理タスクは任意の数だけ存在します
TaskGroupなどのAPIを使用するとアプリで実行する必要のある非同期作業を細かく管理できます
タスクグループは子ども用タスクとその結果を細かく管理しますタスクグループでは並行処理できる任意の数の子タスクを開始できます
それぞれの子タスクは完了までに要する時間が異なるので処理される順序が異なる可能性がありますこの場合では処理された写真は辞書に保存されるため順序は重要ではありません
TaskGroupは AsyncSequenceに準拠しているため完了したら結果を反復処理して辞書に格納することができます最後にグループ全体が子タスクを完了するまで待機しますコードに戻ってタスクグループを適用してみましょうタスクグループを適用するにはまず宣言から始めます
クロージャには画像処理タスクを追加できるグループへの参照がありますモデルに保存された選択範囲を反復処理します
この写真が処理済みならタスクを作成する必要はありません
データの読み込みと写真の処理という新しいタスクを開始します
グループは非同期シーケンスであるため処理済みの写真の準備ができたらそれを反復処理して processedPhotos辞書に保存することができます
これで完了ですこれで StickerGridにステッカーが表示されるようになります
「Open Quickly」を使用して StickerGridに戻ります
ここにはすべての写真の処理が完了したことを示す状態プロパティ「finishedLoading」があります
写真が未処理の場合は進捗状況ビューが表示されます先ほど実装した processAllPhotos()メソッドを呼び出します
すべての写真が処理されたら状態変数を設定できます最後にツールバーに共有リンクを追加してステッカーを共有します
共有リンクアイテムに選択済みの各写真のステッカーを入力していきます
アプリを実行してみましょう！
StickerGridボタンをタップすると TaskGroupによりプレビューグリッドが写真の一括処理を開始します準備ができたらすべてのステッカーを一括で確認できます最後にツールバーのボタンを使えばすべてのステッカーを保存可能なファイルとしてエクスポートできます
このアプリではステッカーは処理された順序で回収されますタスクグループには順序をトラッキングするなどさまざまな機能があります詳細はセッション「構造化並行処理の基本を超えて」をご参照ください
おめでとう！アプリが完成したのでこれでステッカーを保存できますアプリに追加した機能とそれが UIに影響を与えるタイミングを把握し応答性とパフォーマンスの向上に必要な並行処理を使用しましたまた構造化並行処理のほかデータ競合を防ぐ方法についても学びました
手順に従わなかった場合でもアプリの最終バージョンをダウンロードして自分の写真からステッカーを作成できますこの動画で紹介した新しいSwiftの並行処理機能とテクニックに慣れるためアプリの最適化や調整を行ってくださいここで紹介したテクニックをアプリに適用できるか試してみましょうまずはプロファイリングを行います！ Swiftの並行処理モデルの概念をさらに深く理解するにはセッション「Swiftの並列処理の活用」をご覧ください既存のプロジェクトを移行して新しい並行処理機能を適用するには「Swift移行ガイド」をご覧ください今回最高だったのはノート用のステッカーができたことです！ご視聴ありがとうございました

6:29 - Asynchronously loading the selected photo from the photo library

func loadPhoto(_ item: SelectedPhoto) async {
    var data: Data? = try? await item.loadTransferable(type: Data.self)

    if let cachedData = getCachedData(for: item.id) { data = cachedData }

    guard let data else { return }
    processedPhotos[item.id] = Image(data: data)

    cacheData(item.id, data)
}

6:59 - Calling an asynchronous function when the SwiftUI View appears

StickerPlaceholder()
    .task {
        await viewModel.loadPhoto(selectedPhoto)
    }

9:45 - Synchronously extracting the sticker and the colors from a photo

func loadPhoto(_ item: SelectedPhoto) async {
    var data: Data? = try? await item.loadTransferable(type: Data.self)

    if let cachedData = getCachedData(for: item.id) { data = cachedData }

    guard let data else { return }
    processedPhotos[item.id] = PhotoProcessor().process(data: data)

    cacheData(item.id, data)
}

9:56 - Storing the processed photo in the dictionary
```
var processedPhotos = [SelectedPhoto.ID: ProcessedPhoto]()
```

10:45 - Displaying the sticker with a gradient background in the carousel

import SwiftUI
import PhotosUI

struct StickerCarousel: View {
    @State var viewModel: StickerViewModel
    @State private var sheetPresented: Bool = false

    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: 16) {
                ForEach(viewModel.selection) { selectedPhoto in
                    VStack {
                        if let processedPhoto = viewModel.processedPhotos[selectedPhoto.id] {
                            GradientSticker(processedPhoto: processedPhoto)
                        } else if viewModel.invalidPhotos.contains(selectedPhoto.id) {
                            InvalidStickerPlaceholder()
                        } else {
                            StickerPlaceholder()
                                .task {
                                    await viewModel.loadPhoto(selectedPhoto)
                                }
                        }
                    }
                    .containerRelativeFrame(.horizontal)
                }
            }
        }
        .configureCarousel(
            viewModel,
            sheetPresented: $sheetPresented
        )
        .sheet(isPresented: $sheetPresented) {
            StickerGrid(viewModel: viewModel)
        }
    }
}

14:13 - Allowing photo processing to run on the background thread

nonisolated struct PhotoProcessor {
 
    let colorExtractor = ColorExtractor()

    @concurrent
    func process(data: Data) async -> ProcessedPhoto? {
        let sticker = extractSticker(from: data)
        let colors = extractColors(from: data)

        guard let sticker = sticker, let colors = colors else { return nil }

        return ProcessedPhoto(sticker: sticker, colorScheme: colors)
    }

    private func extractColors(from data: Data) -> PhotoColorScheme? {
        // ...
    }

    private func extractSticker(from data: Data) -> Image? {
        // ...
    }
}

15:31 - Running the photo processing operations off the main thread

func loadPhoto(_ item: SelectedPhoto) async {
    var data: Data? = try? await item.loadTransferable(type: Data.self)

    if let cachedData = getCachedData(for: item.id) { data = cachedData }

    guard let data else { return }
    processedPhotos[item.id] = await PhotoProcessor().process(data: data)

    cacheData(item.id, data)
}

20:55 - Running sticker and color extraction in parallel.

nonisolated struct PhotoProcessor {

    @concurrent
    func process(data: Data) async -> ProcessedPhoto? {
        async let sticker = extractSticker(from: data)
        async let colors = extractColors(from: data)

        guard let sticker = await sticker, let colors = await colors else { return nil }

        return ProcessedPhoto(sticker: sticker, colorScheme: colors)
    }

    private func extractColors(from data: Data) -> PhotoColorScheme? {
        let colorExtractor = ColorExtractor()
        return colorExtractor.extractColors(from: data)
    }

    private func extractSticker(from data: Data) -> Image? {
        // ...
    }
}

24:20 - Applying the visual effect on each sticker in the carousel

import SwiftUI
import PhotosUI

struct StickerCarousel: View {
    @State var viewModel: StickerViewModel
    @State private var sheetPresented: Bool = false

    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: 16) {
                ForEach(viewModel.selection) { selectedPhoto in
                    VStack {
                        if let processedPhoto = viewModel.processedPhotos[selectedPhoto.id] {
                            GradientSticker(processedPhoto: processedPhoto)
                        } else if viewModel.invalidPhotos.contains(selectedPhoto.id) {
                            InvalidStickerPlaceholder()
                        } else {
                            StickerPlaceholder()
                                .task {
                                    await viewModel.loadPhoto(selectedPhoto)
                                }
                        }
                    }
                    .containerRelativeFrame(.horizontal)
                    .visualEffect { [selection = viewModel.selection] content, proxy in
                        let frame = proxy.frame(in: .scrollView(axis: .horizontal))
                        let distance = min(0, frame.minX)
                        let isLast = selectedPhoto.id == selection.last?.id
                        
                        return content
                            .hueRotation(.degrees(frame.origin.x / 10))
                            .scaleEffect(1 + distance / 700)
                            .offset(x: isLast ? 0 : -distance / 1.25)
                            .brightness(-distance / 400)
                            .blur(radius: isLast ? 0 : -distance / 50)
                            .opacity(isLast ? 1.0 : min(1.0, 1.0 - (-distance / 400)))
                    }
                }
            }
        }
        .configureCarousel(
            viewModel,
            sheetPresented: $sheetPresented
        )
        .sheet(isPresented: $sheetPresented) {
            StickerGrid(viewModel: viewModel)
        }
    }
}

26:15 - Accessing a reference type from a concurrent task

Task { @concurrent in
    await viewModel.loadPhoto(selectedPhoto)      
}

29:00 - Processing all photos at once with a task group

func processAllPhotos() async {
    await withTaskGroup { group in
        for item in selection {
            guard processedPhotos[item.id] == nil else { continue }
            group.addTask {
                let data = await self.getData(for: item)
                let photo = await PhotoProcessor().process(data: data)
                return photo.map { ProcessedPhotoResult(id: item.id, processedPhoto: $0) }
            }
        }

        for await result in group {
            if let result {
                processedPhotos[result.id] = result.processedPhoto
            }
        }
    }
}

30:00 - Kicking off photo processing and configuring the share link in a sticker grid view.

import SwiftUI

struct StickerGrid: View {
    let viewModel: StickerViewModel
    @State private var finishedLoading: Bool = false

    var body: some View {
        NavigationStack {
            VStack {
                if finishedLoading {
                    GridContent(viewModel: viewModel)
                } else {
                    ProgressView()
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .padding()
                }
            }
            .task {
                await viewModel.processAllPhotos()
                finishedLoading = true
            }
            .toolbar {
                ToolbarItem(placement: .topBarTrailing) {
                    if finishedLoading {
                        ShareLink("Share", items: viewModel.selection.compactMap {
                            viewModel.processedPhotos[$0.id]?.sticker
                        }) { sticker in
                            SharePreview(
                                "Sticker Preview",
                                image: sticker,
                                icon: Image(systemName: "photo")
                            )
                        }
                    }
                }
            }
            .configureStickerGrid()
        }
    }
}

関連する章

リソース

関連ビデオ

WWDC25

WWDC23