集まれSwift好き！Swift愛好会スピンオフ WWDC20セッション要約会 @オンライン

1. Ryoya Ito(@ry-itto) 2020/07/09
Data Essentials in SwiftUI集まれSwift好き！Swift愛好会スピンオフ WWDC20セッション要約会 @オンライン
1

2. 自己紹介
伊藤凌也(@ry-itto)
会津大学学部4年生
カピバラが好き

3. セッションの内容
• SwiftUI でのデータフロー
• アプリのデータモデル設計
• 実際にアプリに取り入れる際のテクニック

4. セッションの内容
• SwiftUI でのデータフロー
• アプリのデータモデル設計
• 実際にアプリに取り入れる際のテクニック

5. SwiftUI でのデータフロー
ビューを作る時に考えたい３つの質問
• 作成するビューで必要なデータは何か？
• 作成するビューではデータをどのように操作するか？
• データはどこから来る（渡される）のか？

6. SwiftUI でのデータフロー
ビューを作る時に考えたい３つの質問
• 作成するビューで必要なデータは何か？
book という Book 型の値
progress という Double 型の値
それぞれがあればビューを表示できそう。
• 作成するビューではデータをどのように操作する
か？
特になさそう
• データはどこから来る（渡される）のか？
このビューを使うビューで渡されることになりそう。
struct BookCard : View {
let book: Book
let progress: Double
var body: some View {
HStack {
Cover(book.coverName)
VStack(alignment: .leading) {
TitleText(book.title)
AuthorText(book.author)
}
Spacer()
RingProgressView(value: progress)
}
}
}

7. SwiftUI でのデータフロー
ビューを作る時に考えたい３つの質問
• 作成するビューで必要なデータは何か？
book という Book 型の値
progress という Double 型の値
それぞれがあればビューを表示できそう。
• 作成するビューではデータをどのように操作す
るか？
特になさそう
• データはどこから来る（渡される）のか？
このビューを使うビューで渡されることになりそう。
struct BookCard : View {
let book: Book
let progress: Double
var body: some View {
HStack {
Cover(book.coverName)
VStack(alignment: .leading) {
TitleText(book.title)
AuthorText(book.author)
}
Spacer()
RingProgressView(value: progress)
}
}
}
Source of Truth という言葉でセッション内では扱われる

8. SwiftUI でのデータフロー
ビューでのデータ保持、それぞれどんな時に使う？
プロパティ => ビューによって変更されないデータ
@State => ビューによって保持される一時的なデータを扱う
@Binding => 他のビューによって保持されているデータを変更したい場合

9. セッションの内容
• SwiftUI でのデータフロー
• アプリのデータモデル設計
• 実際にアプリに取り入れる際のテクニック

10. アプリのデータモデル設計
データモデル定義
• ObservableObject を使う
• @Published を使う
• ２つ目の質問
(作成するビューではデータをどのように操作す
るか？)
に答えるのは容易
class CurrentlyReading: ObservableObject {
let book: Book
@Published var progress = ReadingProgress()
@Published var isFinished = false
var currentProgress: Double {
isFinished ? 1.0 : progress.progress
}
}

11. アプリのデータモデル設計
ビューで作ったモデルを使う
• 他の２つの質問については？
• 作成するビューで必要なデータは何か？
• 作成するビューではデータをどのように操作するか？
• データはどこから来る（渡される）のか？

12. アプリのデータモデル設計
ビューで作ったモデルを使う
• 扱うための PropertyWrapper が３つ
• @ObservedObject
• @EnvironmentObject
• @StateObject (New!)

13. アプリのデータモデル設計
ビューで作ったモデルを使う
@ObservedObject
データの依存関係を作る
@EnvironmentObject
ビュー階層間の ObservableObject の扱いを便利にする
@StateObject (New!)
ObservableObject をビューのライフサイクルに結びつける

14. セッションの内容
• SwiftUI でのデータフロー
• アプリのデータモデル設計
• 実際にアプリに取り入れる際のテクニック

15. 実際にアプリに取り入れる際のテクニック
問題
• 子のビューでモデルをプロパティで
持っていて、そこで初期化している
場合
• ReadingListViewer が際レンダリングさ
れるたびにモデルのインスタンスが生成
されてしまう
struct ReadingListViewer: View {
var body: some View {
NavigationView {
ReadingList()
Placeholder()
}
}
}
struct ReadingList: View {
@ObservedObject var store = ReadingListStore()
var body: some View {
// ...
}
}

16. 実際にアプリに取り入れる際のテクニック
解決策
• @StateObject を代わりに使うこと
で解決ができる（らしい）
• @StateObject を使用すると SwiftUI が
適切なタイミングでインスタンス化をし
てくれるとのこと
struct ReadingListViewer: View {
var body: some View {
NavigationView {
ReadingList()
Placeholder()
}
}
}
struct ReadingList: View {
@StateObject var store = ReadingListStore()
var body: some View {
// ...
}
}

17. 実際にアプリに取り入れる際のテクニック
誰がデータを持つのか
• 共通の祖先に持つ
• @StateObject を使ってそのビュー自身が持つ
• アプリ内のグローバルなデータとして持つ
• App を継承したビューに @State などを利用して宣言してあげる

18. 実際にアプリに取り入れる際のテクニック
データの永続化
• SceneStorage
• SwiftUI が管理しているビューでしか使えない
• 項目の選択状態などを保存
• AppStorage
• UserDefault を使用したグローバルストレージ
• 設定などの小さなデータを保存

19. おまけ
新しく追加されたイベントソース
• onChange
• onOpenURL
• onContinueUserActivity