DeNAのヘルスケアアプリの一部をチラ見せします！

1. 令和最新！
SwiftUI+async/awaitで自分は
こう設計・実装している！
野瀬田 裕樹（@ynoseda）

2. 簡単な自己紹介
● 野瀬田 裕樹（のせだ ゆうき）
● 平成元年生まれ
● 京都出身のiOS/Androidエンジニア
● 性格はValues Cardの結果↓ 参照
twitter

3. 話す内容
● 実際のコードをベースに設計や実装についてちょろちょろ話す
● 多分10分も話さない
● ちょっと実装が難しかったViewとかも紹介する

4. SwiftUI on UIViewController
● UIViewControllerのviewの上にSwiftUIのViewを乗せるスタイル

5. SwiftUI on UIViewController？Why？
● SwiftUIはnavigation周りが辛すぎるから
○ 度重なるdeprecated
○ .alertを二つ書けないなどのトラップ
○ そもそもViewの癖に画面遷移を管理してるのどうなの？

6. ● SwiftUIはnavigation周りが辛すぎるから
○ 度重なるdeprecated
○ .alertを二つ書けないなどのトラップ
○ そもそもViewの癖に画面遷移を管理してるのどうなの？
SwiftUI on UIViewController？Why？
UINavigationControllerがあるじゃん！

7. ● ということでUIViewControllerが画面全体と遷移を管理
● SwiftUIはViewとしての役割に専念
SwiftUI on UIViewController？Why？

8. ちなみに通信部どんな感じ？

9. ● Alamofireの通信をwithCheckedThrowingContinuationでラップ
● async/awaitで取り扱えるようにしている
● Request＊＊で名前統一してる
○ try await APIClient.request(Request**())
○ でAPIが叩ける
ちなみに通信部どんな感じ？

10. ● 画面単位でObservableObjectなStore(State Holder)を作って管理している
● stateの変化はdispatch関数を通してのみ行う（ViewStateの変数はfileprivate(set)
のスコープにしている）
状態の管理はどうしてる？

11. ● つまり、ほぼ画面単位のFluxぽい構成
● 画面が今どういう状態かはViewStateの変数を見れば分かるし、ここにはロジック
が含まれないので見通しがいい感じ
● 通信やデータの加工はStoreに渡ってくる前に全て処理する構造にしている
状態の管理はどうしてる？

12. こんなViewはどう実装する？
● 文字が小さいときはこんな感じで

13. こんなViewはどう実装する？
● 文字が大きいときはこんな感じ

14. こんなViewはどう実装する？
● 文字が小さいときは
○ 背景画像の中央部が見えてる
○ ただしカードの高さは一定以上という制約がある
● 文字が大きいときは
○ 背景画像が全部見えたあと、上下は固定色
○ テキストは改行してself-sizing（自身で高さを決める）

15. こんなViewはどう実装する？
● こんな感じで実装できます
● ポイントはfixedSizeと
backgroundの使い方

16. こんなViewはどう実装する？2
● よくあるバッジ
● 文字サイズによって拡大縮小しつつ、一番小さいフォントの時は小さくなりすぎない
ように最小の高さ幅を指定する
● オレンジの背景色の外側に白い枠線と影を配置

17. こんなViewはどう実装する？2
● こんな感じで実装できます
● Circleとかbackgroundを活用する
● 影はshadowで簡単に付けられる

18. こんなViewはどう実装する？3
● アイコン画像の右上に先ほどのバッジを配置
● アイコン画像に丸く枠線をつけ、枠線とアイコンの中心が重なるようにする
● もちろんフォントサイズの大小にも対応させる

19. ● バッジサイズでoffsetを算出
● PreferenceKeyがポイント
○ バッジの背景に透明Viewを追加
○ そのViewのサイズを伝達
○ onPreferenceChangeで検知
こんなViewはどう実装する？3

20. DeNAでの実装事例

21. DeNAでの実装事例

22. DeNAでの実装事例

23. DeNAでの実装事例
ざっくりとこんな感じの実装