Slide 1
Slide 1 text
SwiftUIのデータ管理
2020 年 12 月 9 日
佐藤タケシ
集まれSwift好き！Swift愛好会 vol.56 @ オンライン
Slide 2
Slide 2 text
Who am I
● Name
● 佐藤タケシ(さとうたけし)
● Company
● Merpay, Inc.(2019/01 ~)
● Role
● Software Engineer (iOS)
● Account
● Twitter: @hatakenokakashi
● Facebook: 佐藤剛士
● GitHub: SatoTakeshiX
Slide 3
Slide 3 text
● SwiftUIを始める最適な一冊
● SwiftUIの基礎を徹底解説
○ レイアウトシステム
○ 座標空間
○ データ管理
○ UIコンポーネント
● 実践的なサンプルアプリ
○ GitHub API
○ お絵かきアプリ
○ 写真フィルターアプリ
● iOS 14対応
○ LazyVStack、LazyVGrid、
WidgetKit、@StateObjectなど
「SwiftUI開発レシピ amazon」で検
索！
Slide 4
Slide 4 text
SwiftUIのデータ管理
Slide 5
Slide 5 text
@State
@Binding
@Environment
@ObservedObject
@StateObject
@EnvironmentObject
@SceneStorage
@AppStorage
Slide 6
Slide 6 text
Single Source of Truth
Slide 7
Slide 7 text
Single Source of Truth
● 情報システムにおいて、データの更新は一か所に限定
し、他のシステムからは参照のみに留める考え方
仕様書のマスターは〇〇で管理しています。
他ファイルへのコピーは禁止です。
Slide 8
Slide 8 text
UIKitでよくある問題
Switchボタンのオンオフに連動させてTextを更新したい
Slide 9
Slide 9 text
UIKitでよくある問題
Switchボタンのオンオフに連動させてTextを更新したい
データの発生源が２つある
Slide 10
Slide 10 text
UIKitでよくある問題
Switchボタンのオンオフに連動させてTextを更新したい
同期する処理が必要
Slide 11
Slide 11 text
SwiftUIでSingle Source of Truth
@Stateを使う
Slide 12
Slide 12 text
SwiftUIでSingle Source of Truth
@Stateを使う
データの発生源は１つのみ
Slide 13
Slide 13 text
SwiftUIでSingle Source of Truth
$をつけるとBinding型へ変更できる
（@StateのprojectedValue）
バインディングする
Slide 14
Slide 14 text
SwiftUIでSingle Source of Truth
ToggleViewがisOnを更新するとisOnを参照しているTextが
自動的に更新される
値が更新されるとSwiftUIが
Viewを更新する
Slide 15
Slide 15 text
バグが少ないコードがかんたんに実装できる！
Slide 16
Slide 16 text
SwiftUIで使える
データ管理の
PropertyWrapper
Slide 17
Slide 17 text
データ管理のProperty Wrapper利用方針
● データはなにか？
○ 値型のデータ
○ 参照型のデータ
● データをどのように処理するか？
○ 読み込みだけ
○ 更新する
● データはどこからくるか？
○ View自身から
○ 親Viewから
○ 環境から
Slide 18
Slide 18 text
プロパティ
● 値型データ
● 読み込みのみ行う
● データの出どころはView自身でも親ViewからでもOK
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
@State
● 値型データ
● データを更新する
● データの出どころはView自身から
○ 他からアクセスできないようにprivateをつけるといい
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
@Binding
● 値型データ
● データを更新する
● データの出どころは親Viewなど外から渡される
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
@Environment
● Viewの環境値を読み取ることができる
● どんな値があるかはEnvironmentValuesに定義
○ スクリーン解像度
○ 言語設定
○ アプリ起動状態などなど
● ViewからはKeyPathを指定して読み込む
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
ObservableObjectプロトコル
● SwiftUIが参照型データオブジェクトを監視できるようにす
るプロトコル
● 下記PropertyWrapperを使うときにはクラスに準拠が必
要
○ @StateObject
○ @ObservedObject
○ @EnvironmentObject
Slide 27
Slide 27 text
@StateObject
● 参照型データオブジェクト
● データの出どころはView自身
○ privateをつけるとよい
● データオブジェクトのライフサイクルはViewが表示してか
ら非表示になるまで
Slide 28
Slide 28 text
@ObservedObject
● 参照型データオブジェクト
● 親Viewから渡されるときに使うと良い
● データオブジェクトのライフサイクルはViewのbodyが更
新されるまで
Slide 29
Slide 29 text
@StateObjectと
@ObservedObject
の違い
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
View自身でデータモデ
ルを保持している
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
View自身でデータモデ
ルを保持している
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
ボタンタップすると
親Viewのプロパティが更
新する。
すると親Viewのbodyが更
新される
Slide 36
Slide 36 text
子Viewとして配置
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
@ObservedObjectは親Viewから渡す時に使う
Slide 39
Slide 39 text
@EnvironmentObject
● 参照型データオブジェクト
● 親Viewに.environmentObject修飾子でデータオブジェ
クトを渡すと子孫Viewがデータにアクセスできる
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
親Viewに
.environmentObject
Slide 43
Slide 43 text
使いたい子孫Viewに
@EnvironmentObject
Slide 44
Slide 44 text
.environmentObject忘れでランタイムエラー
になるので注意
Slide 45
Slide 45 text
@SceneStorageと@AppStorage
@SceneStorage
● 値型データ
● macOS、iPadOSで複数ウィンド
ウのシーンごとにデータを保存
する
● データはシステムが管理
● シーン破棄でデータ破棄
@AppStorage
● 値型データ
● アプリがアンインストールされる
まで保存
● 保存先はUserDefault
Slide 46
Slide 46 text
Senceとは？
● macOS, iPadOSの複数ウィンドウ
● 各ウィンドウは別のメモリ空間
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
Key名を指定する
Slide 49
Slide 49 text
これがValueになる
Slide 50
Slide 50 text
SwiftUI のデータ管理フローチャート
Slide 51
Slide 51 text
Sample Code
● https://github.com/SatoTakeshiX/SwiftUICatalog/tr
ee/master/
● https://github.com/SatoTakeshiX/SwiftUICatalog/tr
ee/master/
Slide 52
Slide 52 text
● SwiftUIを始める最適な一冊
● SwiftUIの基礎を徹底解説
○ レイアウトシステム
○ 座標空間
○ データ管理
○ UIコンポーネント
● 実践的なアプリサンプル
○ GitHub API
○ お絵かきアプリ
○ 写真フィルターアプリ
● iOS 14対応
○ LazyVStack、LazyVGrid、
WidgetKit、@StateObjectなど
「SwiftUI開発レシピ amazon」で検
索！
Slide 53
Slide 53 text
豊富なサンプル
アプリ
● GitHubリポジトリー検索
● お絵かきアプリ
● 写真フィルターアプリ
● TodoアプリをWidget対応
「SwiftUI開発レシピ amazon」で検
索！