SwiftUIのデータ管理

集まれSwift好き！Swift愛好会 vol.56 @ オンライン
発表資料
https://love-swift.connpass.com/event/196031/

「SwiftUI開発レシピ」はこちらから
https://nextpublishing.jp/book/12491.html

サンプルコード
https://github.com/SatoTakeshiX/SwiftUICatalog/tree/master/
https://github.com/SatoTakeshiX/SwiftUICatalog/tree/master/

Transcript

1. SwiftUIのデータ管理
   2020 年 12 月 9 日
   佐藤タケシ
   集まれSwift好き！Swift愛好会 vol.56 @ オンライン
   

   View Slide

2. Who am I
   ● Name
   ● 佐藤タケシ(さとうたけし)
   ● Company
   ● Merpay, Inc.(2019/01 ~)
   ● Role
   ● Software Engineer (iOS)
   ● Account
   ● Twitter: @hatakenokakashi
   ● Facebook: 佐藤剛士
   ● GitHub: SatoTakeshiX
   

   View Slide

3. ● SwiftUIを始める最適な一冊
   ● SwiftUIの基礎を徹底解説
   ○ レイアウトシステム
   ○ 座標空間
   ○ データ管理
   ○ UIコンポーネント
   ● 実践的なサンプルアプリ
   ○ GitHub API
   ○ お絵かきアプリ
   ○ 写真フィルターアプリ
   ● iOS 14対応
   ○ LazyVStack、LazyVGrid、
   WidgetKit、@StateObjectなど
   「SwiftUI開発レシピ amazon」で検
   索！
   

   View Slide

4. SwiftUIのデータ管理
   

   View Slide

5. @State
   @Binding
   @Environment
   @ObservedObject
   @StateObject
   @EnvironmentObject
   @SceneStorage
   @AppStorage
   

   View Slide

6. Single Source of Truth
   

   View Slide

7. Single Source of Truth
   ● 情報システムにおいて、データの更新は一か所に限定
   し、他のシステムからは参照のみに留める考え方
   仕様書のマスターは〇〇で管理しています。
   他ファイルへのコピーは禁止です。
   

   View Slide

8. UIKitでよくある問題
   Switchボタンのオンオフに連動させてTextを更新したい
   

   View Slide

9. UIKitでよくある問題
   Switchボタンのオンオフに連動させてTextを更新したい
   データの発生源が２つある
   

   View Slide

10. UIKitでよくある問題
    Switchボタンのオンオフに連動させてTextを更新したい
    同期する処理が必要
    

    View Slide

11. SwiftUIでSingle Source of Truth
    @Stateを使う
    

    View Slide

12. SwiftUIでSingle Source of Truth
    @Stateを使う
    データの発生源は１つのみ
    

    View Slide

13. SwiftUIでSingle Source of Truth
    $をつけるとBinding型へ変更できる
    （@StateのprojectedValue）
    バインディングする
    

    View Slide

14. SwiftUIでSingle Source of Truth
    ToggleViewがisOnを更新するとisOnを参照しているTextが
    自動的に更新される
    値が更新されるとSwiftUIが
    Viewを更新する
    

    View Slide

15. バグが少ないコードがかんたんに実装できる！
    

    View Slide

16. SwiftUIで使える
    データ管理の
    PropertyWrapper
    

    View Slide

17. データ管理のProperty Wrapper利用方針
    ● データはなにか？
    ○ 値型のデータ
    ○ 参照型のデータ
    ● データをどのように処理するか？
    ○ 読み込みだけ
    ○ 更新する
    ● データはどこからくるか？
    ○ View自身から
    ○ 親Viewから
    ○ 環境から
    

    View Slide

18. プロパティ
    ● 値型データ
    ● 読み込みのみ行う
    ● データの出どころはView自身でも親ViewからでもOK
    

    View Slide

19. View Slide

20. @State
    ● 値型データ
    ● データを更新する
    ● データの出どころはView自身から
    ○ 他からアクセスできないようにprivateをつけるといい
    

    View Slide

21. View Slide

22. @Binding
    ● 値型データ
    ● データを更新する
    ● データの出どころは親Viewなど外から渡される
    

    View Slide

23. View Slide

24. @Environment
    ● Viewの環境値を読み取ることができる
    ● どんな値があるかはEnvironmentValuesに定義
    ○ スクリーン解像度
    ○ 言語設定
    ○ アプリ起動状態などなど
    ● ViewからはKeyPathを指定して読み込む
    

    View Slide

25. View Slide

26. ObservableObjectプロトコル
    ● SwiftUIが参照型データオブジェクトを監視できるようにす
    るプロトコル
    ● 下記PropertyWrapperを使うときにはクラスに準拠が必
    要
    ○ @StateObject
    ○ @ObservedObject
    ○ @EnvironmentObject
    

    View Slide

27. @StateObject
    ● 参照型データオブジェクト
    ● データの出どころはView自身
    ○ privateをつけるとよい
    ● データオブジェクトのライフサイクルはViewが表示してか
    ら非表示になるまで
    

    View Slide

28. @ObservedObject
    ● 参照型データオブジェクト
    ● 親Viewから渡されるときに使うと良い
    ● データオブジェクトのライフサイクルはViewのbodyが更
    新されるまで
    

    View Slide

29. @StateObjectと
    @ObservedObject
    の違い
    

    View Slide

30. View Slide

31. View自身でデータモデ
    ルを保持している
    

    View Slide

32. View Slide

33. View自身でデータモデ
    ルを保持している
    

    View Slide

34. View Slide

35. ボタンタップすると
    親Viewのプロパティが更
    新する。
    すると親Viewのbodyが更
    新される
    

    View Slide

36. 子Viewとして配置
    

    View Slide

37. View Slide

38. @ObservedObjectは親Viewから渡す時に使う
    

    View Slide

39. @EnvironmentObject
    ● 参照型データオブジェクト
    ● 親Viewに.environmentObject修飾子でデータオブジェ
    クトを渡すと子孫Viewがデータにアクセスできる
    

    View Slide

40. View Slide

41. View Slide

42. 親Viewに
    .environmentObject
    

    View Slide

43. 使いたい子孫Viewに
    @EnvironmentObject
    

    View Slide

44. .environmentObject忘れでランタイムエラー
    になるので注意
    

    View Slide

45. @SceneStorageと@AppStorage
    @SceneStorage
    ● 値型データ
    ● macOS、iPadOSで複数ウィンド
    ウのシーンごとにデータを保存
    する
    ● データはシステムが管理
    ● シーン破棄でデータ破棄
    @AppStorage
    ● 値型データ
    ● アプリがアンインストールされる
    まで保存
    ● 保存先はUserDefault
    

    View Slide

46. Senceとは？
    ● macOS, iPadOSの複数ウィンドウ
    ● 各ウィンドウは別のメモリ空間
    

    View Slide

47. View Slide

48. Key名を指定する
    

    View Slide

49. これがValueになる
    

    View Slide

50. SwiftUI のデータ管理フローチャート
    

    View Slide

51. Sample Code
    ● https://github.com/SatoTakeshiX/SwiftUICatalog/tr
    ee/master/
    ● https://github.com/SatoTakeshiX/SwiftUICatalog/tr
    ee/master/
    

    View Slide

52. ● SwiftUIを始める最適な一冊
    ● SwiftUIの基礎を徹底解説
    ○ レイアウトシステム
    ○ 座標空間
    ○ データ管理
    ○ UIコンポーネント
    ● 実践的なアプリサンプル
    ○ GitHub API
    ○ お絵かきアプリ
    ○ 写真フィルターアプリ
    ● iOS 14対応
    ○ LazyVStack、LazyVGrid、
    WidgetKit、@StateObjectなど
    「SwiftUI開発レシピ amazon」で検
    索！
    

    View Slide

53. 豊富なサンプル
    アプリ
    ● GitHubリポジトリー検索
    ● お絵かきアプリ
    ● 写真フィルターアプリ
    ● TodoアプリをWidget対応
    「SwiftUI開発レシピ amazon」で検
    索！
    

    View Slide