SwiftUIの紹介/2019-11-06-llt12

社内のLTイベント「えるLT Vol.12」で発表した資料です

Transcript

1. SwiftUIの紹介 Satoshi SAKAO えるLT Vol.12 2019/11/06 (Wed) 1
2. 話すひと 2 インフォコム株式会社 品質マネジメント推進室 " ソフトウェアエンジニア JS (ES6) / Node.js / GCP / IoT / iOS (Swift) 猫，自作キーボード，シュタゲ Satoshi SAKAO @ottijp
3. 3 「SwiftUI」を聞いたことがある？ &
4. SwiftUIってなんぞ • WWDC2019で発表されたAppleプラットフォーム向けの
 新しいUIフレームワーク • Xcodeの機能の一部 • iOS, iPadOS, macOS, watchOS, tvOS • Storyboardやリアクティブフレームワークを置き換える存在 • 宣言的シンタックスとデータ駆動が肝 ☝ 4
5. 5 https://developer.apple.com/jp/xcode/swiftui/
6. 6 SwiftUIの特長
7. 宣言的シンタックス • Swiftの文法でUI構造を宣言的に記述できる 7
8. プレビュー • 画面サイズ，ダークモード，多言語，フォント設定などを
 変えた複数の同時プレビューが可能 • ライブプレビューで動的な表現を確認 8
9. データの同期機構 • View間で同一データの参照 • データ駆動のリアクティブなUI定義 • 方法 • @Stateと@Binding • Observableプロトコルと@ObservedObject • environmentObject()と@EnvironmentObject • environment()と@Environment 9 View @State var hoge = 42 View @Binding var hoge: Int bind
10. 10 課題
11. Xcode11とCatalinaが不安定すぎる • Xcode11 • すぐクラッシュ，フリーズする，起動しなくなる • プレビュー，コード補完が効かなくなる • エラーメッセージが全くあてにならない • Catalina • OS再起動中にフリーズしてハングアップする 11
12. SwiftUIのViewがまだ少ない • まだ基本的なViewしかない • 対応していないUIKitのViewクラスや機能は自前で実装が必要 • 自前実装することで宣言的UI，データ駆動に対応できる • SwiftUIに組み込む仕組みは提供されている 12
13. 13 まとめ
14. まとめ • まだ安定性が低く，対応Viewも少ないが，
 AppleプラットフォームのUI開発が革新したのを感じた • jQueryからReact/Vueになったくらいの変革 • 再利用性の向上，複雑性の低下が期待できる 14
15. 15 時間が余ればdemo マシンスペックが低いので遅いけど
16. 16 Appendix
17. 必要な環境 • macOS Catalina (10.15) • Mojaveでもビルドできるが，SwiftUIキャンバスは使えない • Xcode11 • iOS13 17
18. 利点 • View単位でテストデータをもとに表示やアクションや
 アニメーションなどを確認しながら開発できる • Viewのコンポーネント化がすごい簡単になった • UIの共同編集とdiffがしやすい
 （Storyboardは共同編集ができない） 18
19. Single Source of Truth (SSOT) • SwiftUIはSingle Source of Truthを実現する • 正となる単一の情報源（ソースコード，データ）を持つ • 重複しない，コピーしない，同期処理が必要ない • SwiftUIにおいては • ソースコードが正（UIデザインツールとソースが一致している） • データが正（リアクティブなView更新） • イベント駆動実装に存在していた複雑性を大きく軽減できる 19
20. 参考 • Xcode - SwiftUI - Apple Developer
 https://developer.apple.com/jp/xcode/swiftui/ • SwiftUI Tutorials — Tutorials | Apple Developer Documentation
 https://developer.apple.com/tutorials/swiftui/tutorials • Data in SwiftUI, Part 1: Data | Sarun
 https://sarunw.com/posts/data-in-swiftui-1/ 20