Pro Yearly is on sale from $80 to $50! »

SwiftUI入門

53e2d354b3299d64a54af680865516d5?s=47 Sato Takeshi
September 26, 2019

 SwiftUI入門

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

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

53e2d354b3299d64a54af680865516d5?s=128

Sato Takeshi

September 26, 2019
Tweet

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入門


  6. None
  7. SwiftUI
 • 4つのコンセプト • マルチプラットフォーム • Xcode11のキャンバス・ライブプレビュー

  8. 4つのコンセプト
 • 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のレイアウトが確認できる。
 


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


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


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


    • (補足)View修飾子の仕組み

  23. SwiftUIをはじめよう!