SwiftUI入門

「merpay Tech Talk for iOS Engineers」の発表資料です。
https://mercaridev.connpass.com/event/146056/

紹介したサンプルコードはここから確認できます。
https://github.com/SatoTakeshiX/SwiftUIGettingStarted/tree/master/04_Preview_on_Xcode11

Transcript

1. SwiftUI入門
 merpay Tech Talk for iOS Engineers 
 
 佐藤剛士 2019 年 9 月 26日
 

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

3. https://speakerdeck.com/satotakeshi/swiftuitutekonnayatu
4. 今回はSwiftUIの概要を解説します

5. SwftUI入門

7. SwiftUI
 • ４つのコンセプト • マルチプラットフォーム • Xcode11のキャンバス・ライブプレビュー
8. ４つのコンセプト
 • Declarative 宣言的シンタックス
 • Automatic 自動機能
 • Compositional 組み合わせ可能
 • Consistent 一貫性のあるUI状態

9. Declarative 宣言的シンタックス
 SwiftUIにどんなViewが必要なのかを指定する
 
 

10. Automatic 自動機能
 
 
 • Dark Mode
 • Dynamic Type
 • 国際化
 • アクセシビリティ

11. Compositional 組み合わせ可能
 
 
 
 
 Viewコンポーネントを切り出して組み合わせができる

12. Consistent 一貫性のあるUI状態
 
 
 
 
 データモデルをバインディング
 データが更新されると関連するViewのみが再レンダリング
 

13. Consistent 一貫性のあるUI状態
 
 
 
 

14. マルチプラットフォーム
 
 
 
 

15. Write once, run anywhere
 Learn once, apply anywhere　

16. Xcode11のキャンバス
 
 キャンバスからレイアウトを変更できる。 GUIで変更するとコードも自動で同期する。

17. Demo

18. Xcode11のプレビュー
 
 
 キャンバス上でその画面をプレビューできる。
 PreviewProviderプロトコルに準拠する型を定義する。
 Dynamic Typeごと、端末ごと、データの異なるViewのレイアウトが確認できる。
 

20. ライブプレビュー
 
 
 キャンバスにある再生ボタンを押すとキャンバス上でその画面がビルド、実行される。

21. SwiftUIのView修飾子の仕組み

22. まとめ
 • SwiftUIを使うと基本機能の実装時間が少なくなりアプリ独自の機能に時間を使え る
 • SwiftUIのコンセプト
 • マルチプラットフォーム
 • Xcode11のキャンバス・ライブプレビュー
 • (補足）View修飾子の仕組み

23. SwiftUIをはじめよう！