SwiftDataでアプリを構築

SwiftDataがアプリでデータを持続するのにどのように役立つかを見ていきます。マルチプラットフォームのSwiftUIアプリをSwiftDataとともに一緒に開発していきます。既存のモデルクラスをSwiftDataモデルに変換し、環境をセットアップし、モデルレイヤーの変更をUIに反映し、SwiftDataストレージに支えられたドキュメントベースのアプリケーションを構築する方法を学びます。このセッションを最大限に活用するためには、SwiftDataに精通している必要があります。紹介についてはWWDC23の「Meet SwiftData」をご覧ください。

リソース

関連ビデオ

WWDC23

ダウンロード

こんにちは！私はJuliaです SwiftUIのエンジニアです最近 Swiftでモデルレイヤーを持続する新しい方法である SwiftDataを導入しました今日のセッションでは SwiftUIアプリで SwiftDataを円滑に統合する方法を見ていきましょう SwiftDataモデルとのスムーズな統合を可能にするSwiftUIの新しい機能について説明します基本的なことをカバーするために「Meet SwiftData」のセッションをまだ視聴していない場合はまずそちらを見てください SwiftDataとSwiftUIがどのように連携するかを見るためにフラッシュカードのアプリを作りましょう以前から偉大な発明の日付や作者を記憶するのに役立つツールを作りたいと思っていました SwiftDataはこのタスクに最適ですフラッシュカードデッキを保存しておくのに役立つので時間があるときにいつでも開いてクリックできます私はこのアプリをMac iPhone Watch TVなどどこでも動作させたいと思っていますが SwiftDataがサポートしてくれますすべてのプラットフォームで利用可能ですこれはcode alongですこのセッションではみなさんと一緒にアプリを作ります今すぐ一時停止を押してセッションのResourceにあるの Xcodeプロジェクトをダウンロードしてくださいスタータープロジェクトを開き ContentViewファイルに移動しますこのセッションでは Xcodeの新機能であるインタラクティブなLive Previewsを活用します Previewsのセクションにはフラッシュカードが何枚か並んだグリッドがあります任意のカードをクリックするとカードを1枚ずつスクロールできるビューに遷移します誰がコンパイラを発明したか覚えていますか？カードをクリックしてくださいカードがめくられ答えが表示されます！アプリにはメモリに保存されたサンプルカードが読み込まれておりアプリを実行して新しいカードを追加してもアプリを閉じると消えてしまいますそこでSwiftDataの出番です作成したフラッシュカードを持続させるために使います今日は SwiftDataを使い始めるために知っておく必要があるすべてのことについて私がまとめたこのやることリストの項目を次々にチェックしながらお話しますあなたは今私たちが作るアプリに出会ったところです次にスタータープロジェクトとそのモデルクラスを見てみましょうそれから手順を追って SwiftDataをストレージとして使用するように変換し修正しますモデルクラスを拡張して SwiftDataモデルにする方法データを照会してモデルレイヤーのすべての変更でビューを更新する方法モデルを作成して保存する方法またUI要素をバインドする方法を学びますそして最後にはボーナスとして SwiftDataがストレージを管理するとき文書ベースのアプリを作成するのがいかに簡単かを見ていきますスタータープロジェクトでは時間を節約するために 1枚のフラッシュカードといくつかのビューおよびサポートファイルを表す Cardモデルを定義しましたすべてのカードには表面と裏面のテキストと作成日が保存されますかなり典型的なモデルです SwiftDataがそれを保存できるように更新しましょう最初に SwiftDataをこのファイルにインポートしますそして次に必要な主な変更は @Modelマクロを定義に追加することですそして今クラスはSwiftDataで完全に永続化可能ですもうタイプする必要はありませんこれだけです！さらに @Modelを使うとカードは Observableプロトコルに一致するようになり ObservableObjectの代わりにそれを使うようになります ObservableObjectと @Publishedプロパティラッパーへの一致を削除します以前 ObservedObject一致を使って CardEditorViewファイルのUIから直接カードを編集していましたここでObservableを採用するために "ObservedObject"プロパティラッパーを "Bindable"に置き換えますこれによりテキストフィールドをカードの表面と裏面のテキストに直接バインドできます完了しました！新しいObservableマクロと Bindableプロパティラッパーにより以前よりもさらに少ないコードでアプリ内のデータフローを簡単に設定できるようになりました ViewがそのボディでObservable型のプロパティを使用する場合指定されたプロパティが変更されると自動的に更新されますそしてモデルの変更可能な状態を UI要素にバインドするのがこれほど簡単だったことはありません！ WWDC23 セッション「Discover Observation with SwiftUI」をぜひご覧ください SwiftDataの有無にかかわらず Observableがデータフローのコードをいかに単純化するか驚くことでしょうモデルについて知る必要があるのはこれだけですそれ以上何もありませんなんて素晴らしいんでしょう次に SwiftDataからモデルを照会して UIに表示するために ContentViewに切り替えましょう SampleDeck.contentsの代わりに SwiftDataが持っているカードを表示します

そしてカードの配列をSwiftData ストレージにバインドするために必要な変更が1つあります @Stateプロパティのラッパーを @Queryに置き換えることですそれだけです！プレビューでわかるようにこれ以上表示するカードはありませんおそらく何も保存していないためです SwiftDataによって管理されるモデルを UIに表示したいときはいつでも@Queryを使います @QueryはSwiftDataからモデルに問い合わせる新しいプロパティラッパーですまた@Stateの場合と同様にモデルが変更されるたびにビューの更新も作動しますすべてのビューは必要な数のクエリされたプロパティーを持つことができますクエリは並べ替え順序付けフィルタリングさらには変更のアニメーションを設定するための lightweight syntaxを提供します内部ではビューのmodel contextをデータソースとして使用します @Queryにmodel contextを提供するにはどうすればいいでしょうか？ ModelContainerから1つ取ってきます SwiftUIはビューのModelContainerを便利に設定するための新しいビューとシーンModifierを提供します SwiftDataを使うのにアプリは最低でも1つのModelContainerを準備します @Queryが使用するcontextを含むストレージスタック全体を作成しますビューは1つのModelContainerを持ちますがアプリはビュー階層ごとに必要な数のコンテナを作成し使用できますアプリがmodelContainerを設定しない場合ウィンドウと作成するビューは SwiftData経由でモデルを保存したりクエリしたりできません多くのアプリは単一の ModelContainerを必要としますこの場合ウィンドウグループ全体のシーンに対して設定できますウィンドウとそのビューはコンテナを継承し同じグループから作成された他のウィンドウも継承しますこれらのビューはすべて単一のコンテナから書き込みと読み込みを行いますアプリによってはいくつかのストレージスタックを必要としウィンドウごとに複数の ModelContainerを設定できます SwiftUIはまたビューレベルできめ細かい設定が可能です同じウィンドウ内の異なるビューは別々のコンテナを持つことができ 1つのコンテナで保存しても他のコンテナには影響しませんそれでは Queryにデータソースを提供する modelContainerを設定しましょうアプリの定義を開いて

そしてアプリのウィンドウの ModelContainerを設定しますサブビューが作成読み込み更新削除できるのはビューmodifierにリストされたモデルタイプだけなことに注意してくださいこれで設定は完了です！しかし追加の手順を1つ実行してプレビューにサンプルデータを提供しますアプリの中でサンプルカードを入れたインメモリコンテナを定義しました "PreviewSampleData"ファイルを開き対象に組み込みましょうこのファイルにはサンプルデータを含むコンテナの定義が含まれていますこれをContentViewで使いプレビューをサンプル・カードで満たします [音声なし］

これで@Queryにデータのソースができたのでプレビューにカードが表示されます！これがSwiftDataスタックを準備しプレビューを生成するために必要なすべての設定です次に SwiftDataが私が作成した新しいカードと既存のカードに加えられた変更を追跡して保存することを確認しますそのためにビューのmodel contextを使います model contextにアクセスするために SwiftUIは新しい環境変数を提供します ModelContainerと同様に各ビューは1つのcontextを持ちますが一般的にアプリは必要な数だけ contextを持つことができますこのアプリでは contextはすでに設定されていますこの環境変数は先に ModelContainerを設定したときに自動的に設定されました Xcodeに戻りましょうカードを保存したり更新したりするには modelContextにアクセスする必要があります [音声なし］

[音声なし］

SwiftDataに保存したいモデルを認識させるために model contextに新しく作成されたカードを挿入します

モデルを挿入した後 "modelContext.save()"を呼び出して contextを保存する必要があると思うかもしれませんがその必要はありません SwiftDataの素晴らしい点は model contextを自動保存することです自動保存は UI関連のイベントやユーザー入力によって動作します保存は SwiftDataがやってくれるので心配する必要はありません例えば SwiftDataストレージを共有したり送信したりする前にすべての変更がすぐに持続することを確認したい場合はほとんどありませんこのような場合は明確に"save()"を呼び出しますカードを保存して照会できるようになったのでカードを作ってみましょう！アプリを起動してプラスボタンを押してカードを作ります前に見たCompilerカードを追加しましょう [音声なし］ではアプリを終了してもう一度起動し新しいカードがあるか確認してみましょう

ここにありました！これでビューのmodel contextにアクセスしてカードを追加する方法がわかりました完了しました！新しいウィンドウを開きましょう最初のデッキと同じデッキが表示されますこれは両方のウィンドウが同じModelContainerを使い同じデータにアクセスするため当然のことですしかしこのアプリが別のウィンドウで別のフラッシュカードデッキを開くことができれば素晴らしいでしょう基本的にはすべてのデッキを個別の文書として扱いたいということですそしてこれらの文書を友人と共有できます文書ベースのアプリは macOS iOS iPadOSで使われている概念ですユーザーが異なるタイプの文書を作成したり開いたり閲覧したり編集したりを可能にする特定のタイプのアプリについて説明しますすべての文書はファイルでありユーザーはそれらを保存コピー共有できますそして SwiftUIがSwiftDataでバックアップされた文書アプリをサポートしていることをお知らせできて嬉しいですこの方法を試してみましょう FlashCardAppファイルを開きます文書ベースのアプリはiOSとmacOSに存在しこのプラットフォームでは DocumentGroupの initializerの使用に切り替えます

[音声なし］

モデルタイプ Card.self コンテンツタイプビュービルダーを渡します少し回り道をして 2番目のパラメータであるコンテンツタイプについて詳しく説明しましょう！ SwiftData文書ベースのアプリは custom content型を宣言する必要がありますそれぞれのSwiftData文書は固有のモデルのセットから構築されディスク上で固有の表現を持っています文書のcontextではコンテンツタイプは JPEGのようなバイナリファイル形式と考えることができます文書のもう一つのタイプであるパッケージは Xcodeプロジェクトのようにディスク上に固定された構造を持つディレクトリです例えばすべてのJPEG画像は同じバイナリ構造を持っていますそうでなければ写真編集者はその読み方を知らないでしょう同様にすべてのXcodeプロジェクトは特定のディレクトリとファイルを含みますユーザーがデッキを開くときオペレーティングシステムがデッキのフォーマットとファイル拡張子をアプリに関連付ける必要がありますそのためコンテンツタイプを宣言する必要があります SwiftData文書はパッケージです "externalStorage"属性で SwiftDataモデルのいくつかのプロパティをマークするとすべての外部保存項目は文書パッケージの一部になります UTType+FlashCardsファイルには新しいコンテンツタイプの定義があるのでコードで便利に使うことができます同じ定義をInfo.plistにも記述します

これからオペレーティングシステムに新しいコンテンツタイプを宣言しますアプリが作成したカードデッキを他の文書と区別するためにファイルの拡張子を指定する必要がありますこのサンプルアプリでは "sampledeck"を拡張子として使用します

フラッシュカードデッキのような簡単な説明も加えます

識別子はコード内のものと全く同じでなければいけません

SwiftData文書はパッケージなのでタイプがcom.apple.package.SwiftDataに準拠していることを確認する必要がありますでは宣言したコンテンツタイプを使ってみましょうアプリの定義に戻りコンテンツタイプを DocumentGroupに渡していますビュービルダーは同じように見えます

注目すべきは ModelContainerを設定しないことです文書インフラは文書ごとに1つずつ設定しますアプリを実行してどのように見えるか見てみましょう！アプリはパネルを開いた状態で起動します文書ベースのアプリの標準動作で新しい文書を作成してそこにカードを追加します文書には未保存の変更があることを示すツールバーのサブタイトルが表示されます Command+Sを押すと保存ダイアログが表示されますデッキは先ほどInfo.plistに入れたのと同じ拡張子で保存されることに注意してください新しいデッキを保存するとデスクトップに初めてのフラッシュカードデッキができあがりました Command+Nで新しいデッキを作ることもできますし Command+Oでデッキを開くこともできますこれらのショートカットは他の多くの機能と同様に文書ベースのアプリが自動的に取得します要約すると SwiftUIアプリでSwiftData ストレージを使用する方法を学びました新しい@Modelマクロ @Queryプロパティラッパー model contextのための新しい Environment変数について説明し SwiftDataを文書のストレージとして使用することがいかに簡単であるかを確認しました今日はありがとうございましたアプリ作りを楽しんでください！ ♪ ♪

3:33 - Defining a SwiftData model

@Model
final class Card {
    var front: String
    var back: String
    var creationDate: Date

    init(front: String, back: String, creationDate: Date = .now) {
        self.front = front
        self.back = back
        self.creationDate = creationDate
    }
}

4:25 - Binding to a SwiftData model
```
@Bindable var card: Card
```
5:52 - Query models from SwiftData storage
```
@Query private var cards: [Card]
```
8:27 - Setting up a model container for the window group
```
WindowGroup {
    ContentView()
}
.modelContainer(for: Card.self)
```

9:24 - Providing a preview with sample data

#Preview {
    ContentView()
        .frame(minWidth: 500, minHeight: 500)
        .modelContainer(previewContainer)
}

10:30 - Accessing the model context of the ContentView
```
@Environment(\.modelContext) private var modelContext
```

10:51 - Insert a new model in the context

let newCard = Card(front: "Sample Front", back: "Sample Back")
modelContext.insert(object: newCard)

13:34 - Start document-based application setup

@main
struct SwiftDataFlashCardSample: App {
    var body: some Scene {
        #if os(iOS) || os(macOS)
        DocumentGroup(editing: Card.self, contentType: <#UTType#>) {
            <#code#>
        }
        #else
        WindowGroup {
            ContentView()
                .modelContainer(for: Card.self)
        }
        #endif
    }
}

16:51 - Finish document-based application setup

@main
struct SwiftDataFlashCardSample: App {
    var body: some Scene {
        #if os(iOS) || os(macOS)
        DocumentGroup(editing: Card.self, contentType: .flashCards) {
            ContentView()
        }
        #else
        WindowGroup {
            ContentView()
                .modelContainer(for: Card.self)
        }
        #endif
    }
}

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

SwiftDataでアプリを構築

関連する章

リソース

関連ビデオ

WWDC23