Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SwiftUIのデータ管理

Sato Takeshi
December 09, 2020

 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/

Sato Takeshi

December 09, 2020
Tweet

More Decks by Sato Takeshi

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. SwiftUIのデータ管理

    View full-size slide

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

    View full-size slide

  6. Single Source of Truth

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    ○ @StateObject
    ○ @ObservedObject
    ○ @EnvironmentObject

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. @StateObjectと
    @ObservedObject
    の違い

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. 子Viewとして配置

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. 親Viewに
    .environmentObject

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. Key名を指定する

    View full-size slide

  38. これがValueになる

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide