Slide 1
Slide 1 text
スライドは後で⼊⼿することが出来ますので
発表中の内容をメモする必要はありません。
写真撮影をする場合は
フラッシュ・シャッター⾳が出ないようにご配慮ください
Attention
Slide 2
Slide 2 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
2
資料の場所
資料が⼿元で⾒られる⽅はこちらからどうぞ︕
Twitter @kinkuma_designにも掲載してマス
サンプルコード(GitHub)
cm-tsmaeda/DevelopersIO_2019_SwiftUI
https://github.com/cm-tsmaeda/DevelopersIO_2019_SwiftUI
Slide 3
Slide 3 text
これからはじめるSwiftUI
2019/11/1(Fri)
CX事業本部 前⽥ タスク
〜iOSアプリ開発の新スタイル・新スタンダード〜
Slide 4
Slide 4 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
4
⾃⼰紹介
前⽥ タスク
CX事業本部所属（2019.1⽉⼊社）
iOSアプリエンジニア
⼊社前）Flash -> Webフロントエンドの
フリーランスで11年
Twitter
@kinkuma_design
個⼈活動
きんくまデザイン
Slide 5
Slide 5 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
5
⾃⼰紹介
（宣伝）個⼈制作iOSアプリ
フォルメモ
フォルダの中にフォルダが
作れるメモ帳 (10万DL)
ジッピー電卓
計算式が書けたり、履歴が⼿軽に再利⽤
できる電卓 (16万DL)
Habit Keeper
⽇課・習慣記録（12万DL）※現在サポート切れ
Slide 6
Slide 6 text
6
もくじ
Slide 7
Slide 7 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
7
もくじ
1. SwiftUIとは︖
2. はじめてのView
3. Data Flow
4. UIKitとの相互連携 時間的に厳しいので
ふろくとして掲載
Slide 8
Slide 8 text
8
1. SwiftUIとは︖
Slide 9
Slide 9 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
9
SwiftUIとは︖
1. WWDC 2019で発表
2. 宣⾔的にUIを書ける
3. 再利⽤可能なViewコンポーネント
4. Swiftファイル1枚で済む
5. ライブプレビュー
6. データバインディング
7. UIKitとの相互利⽤OK
8.マルチOS対応
Slide 10
Slide 10 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
10
1. WWDC 2019で発表
WWDC 2019で発表された
全く新しいUIフレームワーク
Slide 11
Slide 11 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
11
注意点
iOS 13以降が必須
OSサポートを2年すると、2年後のiOS 15の頃には
気軽に使えるようになっているのでは︖
Slide 12
Slide 12 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
12
注意点
iOS 13以降が必須
個⼈アプリや、ストアに出さない実験アプリ、
iOS 13以降だけを対応するアプリであれば、
今からでも可能
参考）マネーフォーワード
ICカードリーダーのiOSアプリをSwiftUIで開発しました
https://moneyforward.com/engineers_blog/2019/09/20/ic-cardreader-swiftui/
Slide 13
Slide 13 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
13
2. 宣⾔的にUIを書ける
⼿続き型（UIKit）
UIViewを作って
addSubView()
宣⾔型（SwiftUI）
HTMLのタグの様に宣⾔
Slide 14
Slide 14 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
14
3. 再利⽤可能なViewコンポーネント
イメージとしては、HTMLのタグを⾃前で作って、
それを組み合わせて画⾯を作る
各Viewは、そのViewで使うデータも含めて定義できる
Webでいうところの、
React/Vue/Angular世代のフレームワークに近い
HTMLタグの様にViewを置いていけるので、
再利⽤が⾮常に楽
Slide 15
Slide 15 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
15
4. Swiftファイル1枚で済む
UIKitでは、
UIStoryboard(.storyboard)
とUIViewController(.swift)
の2ファイルがセット
SwiftUIは
1ファイルでOK
XX.storyboard XXViewController.swift XXView.swift
1 2 1
Slide 16
Slide 16 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
16
5. ライブプレビュー
コードを変更す
るとプレビュー
が変更される
GUIの設定を変
えるとコードが
変更される
Slide 17
Slide 17 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
17
5. ライブプレビュー
1画⾯ごとではなく、
各View単位でプレビューが確認できる
各Viewに必要なデータも引数として与えて
プレビューできる
Slide 18
Slide 18 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
18
5. ライブプレビュー
macOS Catalina(10.15) 以降であれば、
ライブプレビューが可能
Mojave(10.14)以下では
ライブプレビューはできないが、開発は可能
Slide 19
Slide 19 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
19
6. データバインディング
Two-wayデータバインディングができる
データ
（Model）
UI
（View）
変更 更新
更新 変更
Slide 20
Slide 20 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
20
7. UIKitとの相互利⽤OK
UIKitの中に
SwiftUIを設置可能
SwiftUIの中に
UIKitを設置可能
UIKit
SwiftUI
SwiftUI
UIKit
Slide 21
Slide 21 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
21
UIKitとの相互連携
UIKitとは︖
2011年 Xcode 4.2、iOS5で登場。
現在出ているツール系アプリでよく利⽤される
UIフレームワーク。
UIStoryboardとViewControllerを使って
UIを作成。
Slide 22
Slide 22 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
22
UIKitとの相互連携
UIKitとは︖
Storyboard上で制約（Constraints）をつけて
⾃動でレイアウトを変更させる（Auto Layout）
各コンポーネントの頭⽂字にUIがつく
UIButton, UIView, UITableViewなど
Slide 23
Slide 23 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
23
UIKitとの相互連携
UIKitとは︖
歴史あるフレームワークなので、
SwiftUIにそもそもないコンポーネントや、
SwiftUIでは望んだ挙動をしないコンポーネント
の代わりがある
Slide 24
Slide 24 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
24
7. UIKitとの相互利⽤OK
UIKitから好きなコンポーネントを持ってきて
使⽤することができる︕
Slide 25
Slide 25 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
25
8. マルチOS対応
SwiftUI は iOS, macOS, tvOS, watchOSでも使える
Slide 26
Slide 26 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
26
8. マルチOS対応
ただし、同じコードが全てのデバイスで
"そのまま" 使えるわけではない︕
画⾯サイズが違う︕︕
それぞれのOS⽤に書く必要がある
Slide 27
Slide 27 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
27
8. マルチOS対応
Learn once, apply anywhere
1回勉強すれば、
知識が他のOSでも使える
Slide 28
Slide 28 text
28
Swift⽤語
Slide 29
Slide 29 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
29
StructureとClass
Structure: 値型。代⼊すると値がコピーされる
struct Foo {
var width = 0
func greet() {}
}
Class: 参照型。代⼊すると参照がセットされる
class Foo {
var width = 0
func greet() {}
}
Slide 30
Slide 30 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
30
Protocol
Protocol: 他⾔語のいわゆるinterface。
実装すべきプロパティやメソッドを定義する。
デフォルトの動きも設定できるので、protocolを
適⽤するだけで、任意の動作をさせることも可能
protocol Bar {
// プロパティやメソッドを定義する
}
// classに適⽤
class Foo: Bar {
}
// structに適⽤
struct Baz: Bar {
}
Slide 31
Slide 31 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
31
Protocol
Structureは継承できないが、Classは継承可能
protocol Bar {
}
class Foo {
}
// Fooを継承しつつ、Barプロトコルを適⽤
class Baz: Foo, Bar {
}
Slide 32
Slide 32 text
32
2. はじめてのView
Slide 33
Slide 33 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
33
はじめてのViewを作ってみよう
Slide 34
Slide 34 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
34
はじめてのViewを作ってみよう
Storyboardではなく
Slide 35
Slide 35 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
35
はじめてのViewを作ってみよう
Slide 36
Slide 36 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
36
はじめてのViewを作ってみよう
コード
プレビュー
プロパティ
Slide 37
Slide 37 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
37
はじめてのViewを作ってみよう
プレビュー⽤
コード
（省略可能）
実際のViewの
コード
Slide 38
Slide 38 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
38
はじめてのViewを作ってみよう
Viewの中⾝
Slide 39
Slide 39 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
39
はじめてのViewを作ってみよう
Modifier:
(CSSみたいに装飾したり、ライフサイクルイベン
トや、ジェスチャーイベントを設定する）
Text: SwiftUIの
標準View
他にImage, Button
など⾊々ある
Slide 40
Slide 40 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
40
基本的なViewを作ってみよう
Slide 41
Slide 41 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
41
基本的なViewを作ってみよう
Slide 42
Slide 42 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
42
基本的なViewを作ってみよう
VStack
HStack
Slide 43
Slide 43 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
43
基本的なViewを作ってみよう
Text
Text
Image
Button
Slide 44
Slide 44 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
44
基本的なViewを作ってみよう
Modifierで
プロパティを調整
Slide 45
Slide 45 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
45
基本的なViewを作ってみよう
ライフサイクルイベントのModifier
画⾯表⽰時に呼ばれる
その他にonTapGestureなどジェスチャー系もある
Slide 46
Slide 46 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
46
基本的なViewを作ってみよう
ImageのsystemName
Slide 47
Slide 47 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
47
基本的なViewを作ってみよう
systemNameは
どこからわかる︖
Slide 48
Slide 48 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
48
基本的なViewを作ってみよう
SF Symbols
1,500以上のアイコンセット
iOS 13以降で使⽤可能
アプリで検索できる
Slide 49
Slide 49 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
49
基本的なViewを作ってみよう
Slide 50
Slide 50 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
50
基本的なViewを作ってみよう
folder
Slide 51
Slide 51 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
51
基本的なViewを作ってみよう
systemNameは
どこからわかる︖
-> SF Symbolsで検索可能
Slide 52
Slide 52 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
52
SceneDelegate
Slide 53
Slide 53 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
53
SceneDelegate
Slide 54
Slide 54 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
54
SceneDelegate
- iOS 13以降に使⽤可能
- 1つのアプリを1画⾯に同時に複数⽴ち上げることが
できる仕組み
- iPadOSでは、1つのアプリを同時に
⽴ち上げることができる。
この1つ1つのインスタンスが
SceneDelegateで管理される。
- アプリ全体はAppDelegateで管理する
Slide 55
Slide 55 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
55
SceneDelegate
画⾯のルートViewを変更する
Viewに引数を与えるときも修正する
Slide 56
Slide 56 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
56
ListとNavigationView
Slide 57
Slide 57 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
57
ListとNavigationView
デモ
データの出典）
最も好きなケーキの種類はなに? 1位は誰もが納得、王道の●●に!
https://news.mynavi.jp/article/20180223-586948/
Slide 58
Slide 58 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
58
ListとNavigationView
Slide 59
Slide 59 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
59
ListとNavigationView
- NavigationViewは画⾯遷移ができるナビゲーション
（UIKitだとUINavigationView）
- Listでリストメニュー
（UIKitだとUITableView）
Slide 60
Slide 60 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
60
ListとNavigationView
cakes: [Cake]
Slide 61
Slide 61 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
61
ListとNavigationView
Listの各⾏のModelは
Identifiableプロトコルを適⽤している必要がある
（Hashableなidというプロパティを実装すればOK）
Slide 62
Slide 62 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
62
ListとNavigationView
CakeRow
（リストの各⾏を
表すカスタムView）
※右はbodyの
⼀部のみを表⽰
Slide 63
Slide 63 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
63
ListとNavigationView
Slide 64
Slide 64 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
64
ListとNavigationView
NavigationViewの中でNavigationLinkを設定
すると画⾯遷移を⾏える。
引数のdestinationで遷移先を指定
Slide 65
Slide 65 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
65
はじめてのView まとめ
Slide 66
Slide 66 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
66
はじめてのView まとめ
基本的なView
VStack, HStack, Text, Image, Button
SF Symbols
アイコンセット。iOS 13以降で使⽤可能
List
⾏のリスト。ForEachで各⾏をループ
NavigationView
NavigationLinkで画⾯遷移
Slide 67
Slide 67 text
67
3. Data Flow
Slide 68
Slide 68 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
68
Data Flow
ViewとDataをひもづけて
データバインディングできる
データ
（Model）
UI
（View）
変更 更新
更新 変更
Slide 69
Slide 69 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
69
Data Flow
@State
@Binding
@ObservedObject
@EnvironmentObject
上の4つの@はProperty Wrapperという
仕組み
Slide 70
Slide 70 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
70
Property Wrapper
簡単に⾔えばgetterとsetterをより複雑に定義で
きるもの。
コンパイル時にSwiftコンパイラが⾃動で
うまいこと変換してくれる
さきほどの4つの実装はわからなくても、
どういう働きなのかを知っていればよい
Slide 71
Slide 71 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
71
@State
Slide 72
Slide 72 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
72
@State
デモ
Slide 73
Slide 73 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
73
@State
@State
宣⾔したプロパティをViewで参照表⽰する。
そのプロパティを変更すると、
UIが更新される = データバインディング
Slide 74
Slide 74 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
74
@State
Slide 75
Slide 75 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
75
@State
@State
そのView内で完結するプロパティに使う
View内で閉じているので
privateをつけるのが推奨されている
Slide 76
Slide 76 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
76
@Binding
Slide 77
Slide 77 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
77
@Binding
デモ
親View
⼦View
Slide 78
Slide 78 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
78
@Binding
@Binding
親Viewのプロパティを
⼦Viewでデータバインディングする仕組み
Slide 79
Slide 79 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
79
@Binding
親View ⼦View
Slide 80
Slide 80 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
80
@Binding
親View ⼦View
Slide 81
Slide 81 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
81
@Binding
親View
⼦View
BindingChildView(tapCount: $tapCount)
@Binding var tapCount: Int
Slide 82
Slide 82 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
82
@Binding
親Viewから⼦Viewに
$をつけて@Stateプロパティを渡すと、
⼦Viewでデータバインディングが可能
BindingChildView(tapCount: $tapCount)
Slide 83
Slide 83 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
83
@ObservedObject
Slide 84
Slide 84 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
84
@ObservedObject
デモ
Slide 85
Slide 85 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
85
@ObservedObject
@ObservedObject
Viewの外のデータオブジェクト
（いわゆるModel）とデータバインディングする
SwiftUI データオブ
ジェクト
Slide 86
Slide 86 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
86
@ObservedObject
データオブジェクトを作る
- StructureではなくClass
- ObservableObjectプロトコルを適⽤
データバインディングしたいプロパティには
@Publishedをつける
Slide 87
Slide 87 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
87
@ObservedObject
データオブジェクトを参照する
@ObservedObjectをつける
Slide 88
Slide 88 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
88
@ObservedObject
struct SwiftUI class ObservableObject
@ObservedObject
var foo: Bar
@Published
var name: String
バインディングしたい
オブジェクト
foo.name といった感じに使え
る
Slide 89
Slide 89 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
89
@ObservedObject
Slide 90
Slide 90 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
90
@ObservedObject
データオブジェクトを参照
データオブジェクトを作成
Slide 91
Slide 91 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
91
@Stateと@ObservedObjectの違い
@StateがView内で閉じるのに対して、
@ObservedObjectはView外の
ObservableObjectとバインディングする
私⾒では実際のアプリではObservableObjectを
ViewModelとして定義した⽅が良さそう
Slide 92
Slide 92 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
92
@ObservedObject
MVVM
View ViewModel
データ
バインディング
Model
Repository Service
※Modelの構成はプロジェクト
ごとに違います
APIなど
Modelの
⼊り⼝。
まとめ役
SwiftUI Observab
leObject
Slide 93
Slide 93 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
93
@EnvironmentObject
Slide 94
Slide 94 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
94
@ObservedObject
デモ
Slide 95
Slide 95 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
95
@EnvironmentObject
@EnvironmentObject
ObservedObjectと似ているが、
ObservedObjectはViewと1対1の関係だったの
に対して、プロパティの参照をバケツリレー
のように引数として渡さずに
複数のViewから参照できる
Slide 96
Slide 96 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
96
@EnvironmentObject
View View View View
⼦ ⼦ ⼦
Slide 97
Slide 97 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
97
@EnvironmentObject
View View View View
⼦ ⼦
EnvironmentObject
⼦
Slide 98
Slide 98 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
98
@EnvironmentObject
View View View View
⼦ ⼦ ⼦
どこからでも
参照可能
EnvironmentObject
Slide 99
Slide 99 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
99
@EnvironmentObject
@EnvironmentObject
データオブジェクトは@ObservedObjectの
ときと同じくObservableObjectを適⽤
参照時に@EnvironmentObjectをつける
Slide 100
Slide 100 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
100
@EnvironmentObject
Slide 101
Slide 101 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
データを参照する⼀番上の親のModifierに
environmentObjectとして渡す
101
@EnvironmentObject
Slide 102
Slide 102 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
102
@EnvironmentObject
Singletonとして働く形になるため
使い所をよく検討する
（グローバル変数はなるべく少なくしたい）
Slide 103
Slide 103 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
103
DataFlowまとめ
@State
@Binding
@ObservedObject
@EnvironmentObject
⼩
⼩
⼩
⼤
影響範囲
名前
Slide 104
Slide 104 text
104
4. UIKitとの相互連携
Slide 105
Slide 105 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
105
UIKitとの相互連携
UIKit
SwiftUI
SwiftUI
UIKit
UIKitの中に
SwiftUIを設置可能
SwiftUIの中に
UIKitを設置可能
Slide 106
Slide 106 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
106
UIKit
SwiftUI
UIKitの中に
SwiftUIを設置
Slide 107
Slide 107 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
107
UIKitの中にSwiftUIを設置
UIHostingControllerを使う
Slide 108
Slide 108 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
108
UIKitの中にSwiftUIを設置
全体がUIViewとなっていて、
その⼀部分をSwiftUIとして
配置することも可能
Slide 109
Slide 109 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
109
SwiftUI
UIKit
SwiftUIの中に
UIKitを設置
Slide 110
Slide 110 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
110
デモ
Slide 111
Slide 111 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
111
UITextField
SwiftUI
Slide 112
Slide 112 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
112
SwiftUIの中にUIKitを設置
とりこみたいUIKitが
UIView
-> UIViewRepresentableを適⽤
UIViewController
-> UIViewControllerRepresentableを適⽤
Slide 113
Slide 113 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
113
SwiftUIの中にUIKitを設置
makeUIView()
-> UIKitコンポーネントを作成+初期化
updateUIView()を実装する
-> Viewが更新されるときに呼ばれる
Slide 114
Slide 114 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
114
SwiftUIの中にUIKitを設置
Slide 115
Slide 115 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
115
SwiftUIの中にUIKitを設置
UIKitのdelegateを利⽤したい︕
-> View内classでCoordinatorを作る
Slide 116
Slide 116 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
116
SwiftUIの中にUIKitを設置
※delegateとはUIKitでよく使われる
Delegateパターン。
Viewコンポーネントからの通知を
ViewControllerで受けるのが通常フロー
UIViewController UIView
delegate
selfでセット
delegate?.sample()
func sample() {}
親のメソッドを呼べる
Slide 117
Slide 117 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
117
SwiftUIの中にUIKitを設置
Slide 118
Slide 118 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
118
SwiftUIの中にUIKitを設置
CoordintaorをmakeCoordinator()から呼び出す
makeUIView()で初期化するときに
delegateをセットする
引数のcontext内にcoordinatorが⼊っている
Slide 119
Slide 119 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
119
SwiftUIの中にUIKitを設置
Slide 120
Slide 120 text
120
ありがとうございました︕
Slide 121
Slide 121 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
121
参考資料
SwiftUI Tutorials ̶ Tutorials | Apple Developer Documentation
https://developer.apple.com/tutorials/swiftui/tutorials
SwiftUI by Example
https://www.hackingwithswift.com/quick-start/swiftui
Using Combine
https://heckj.github.io/swiftui-notes/
Slide 122
Slide 122 text
DNEFWJP DNEFWJP* ʢ࠷ޙ͕ΞΠʣ
122
質疑応答
お気軽にご質問ください︕