SwiftUIもくもく会/swiftui_mokumoku

社内勉強会資料。SwiftUIをもくもく触る会の導入として。

Transcript

1. SwiftUI SwiftUI SwiftUI SwiftUI SwiftUI SwiftUI
   もくもくする
   もくもくする
   もくもくする
   もくもくする
   もくもくする
   もくもくする 技術座談会 技術座談会 技術座談会 技術座談会 技術座談会 技術座談会 1 / 15
2. アジェンダ アジェンダ アジェンダ アジェンダ アジェンダ アジェンダ 1 1 1 1 1 1...... SwiftUIにさらっと触れる
   (10min) SwiftUIにさらっと触れる
   (10min) SwiftUIにさらっと触れる
   (10min) SwiftUIにさらっと触れる
   (10min) SwiftUIにさらっと触れる
   (10min) SwiftUIにさらっと触れる
   (10min) 2 2 2 2 2 2...... もくもくする
   (40min) もくもくする
   (40min) もくもくする
   (40min) もくもくする
   (40min) もくもくする
   (40min) もくもくする
   (40min) 3 3 3 3 3 3...... 成果を発表
   （8min） 成果を発表
   （8min） 成果を発表
   （8min） 成果を発表
   （8min） 成果を発表
   （8min） 成果を発表
   （8min） 4 4 4 4 4 4...... 次回のこと決める
   (2min) 次回のこと決める
   (2min) 次回のこと決める
   (2min) 次回のこと決める
   (2min) 次回のこと決める
   (2min) 次回のこと決める
   (2min) 2 / 15
3. さらっとSwiftUI
   -
   SwiftUIとは？ さらっとSwiftUI
   -
   SwiftUIとは？ さらっとSwiftUI
   -
   SwiftUIとは？ さらっとSwiftUI
   -
   SwiftUIとは？ さらっとSwiftUI
   -
   SwiftUIとは？ さらっとSwiftUI
   -
   SwiftUIとは？ WWDC
   2019 WWDC
   2019 WWDC
   2019 WWDC
   2019 WWDC
   2019 WWDC
   2019
   で発表
   で発表
   で発表
   で発表
   で発表
   で発表 Swiftの新しい
   Swiftの新しい
   Swiftの新しい
   Swiftの新しい
   Swiftの新しい
   Swiftの新しい
   Appleデバイス用UIフレームワーク Appleデバイス用UIフレームワーク Appleデバイス用UIフレームワーク Appleデバイス用UIフレームワーク Appleデバイス用UIフレームワーク Appleデバイス用UIフレームワーク これまではUIKitやAppKitなどを使って開発していた これまではUIKitやAppKitなどを使って開発していた これまではUIKitやAppKitなどを使って開発していた これまではUIKitやAppKitなどを使って開発していた これまではUIKitやAppKitなどを使って開発していた これまではUIKitやAppKitなどを使って開発していた 宣言的 宣言的 宣言的 宣言的 宣言的 宣言的にUIを実装できる にUIを実装できる にUIを実装できる にUIを実装できる にUIを実装できる にUIを実装できる e.g.
   React、Flutter、Jetpack
   Composeみたいな e.g.
   React、Flutter、Jetpack
   Composeみたいな e.g.
   React、Flutter、Jetpack
   Composeみたいな e.g.
   React、Flutter、Jetpack
   Composeみたいな e.g.
   React、Flutter、Jetpack
   Composeみたいな e.g.
   React、Flutter、Jetpack
   Composeみたいな                               3 / 15
4. さらっとSwiftUI
   -
   特徴 さらっとSwiftUI
   -
   特徴 さらっとSwiftUI
   -
   特徴 さらっとSwiftUI
   -
   特徴 さらっとSwiftUI
   -
   特徴 さらっとSwiftUI
   -
   特徴 「 「 「 「 「 「より優れたAppを、より少ないコードで。 より優れたAppを、より少ないコードで。 より優れたAppを、より少ないコードで。 より優れたAppを、より少ないコードで。 より優れたAppを、より少ないコードで。 より優れたAppを、より少ないコードで。」 」 」 」 」 」 全てのAppleプラットフォーム向けUIを構築できる 全てのAppleプラットフォーム向けUIを構築できる 全てのAppleプラットフォーム向けUIを構築できる 全てのAppleプラットフォーム向けUIを構築できる 全てのAppleプラットフォーム向けUIを構築できる 全てのAppleプラットフォーム向けUIを構築できる 宣言型Swiftシンタックス 宣言型Swiftシンタックス 宣言型Swiftシンタックス 宣言型Swiftシンタックス 宣言型Swiftシンタックス 宣言型Swiftシンタックス Xcodeのデザインツールと連携、コードをデザインと同期させる Xcodeのデザインツールと連携、コードをデザインと同期させる Xcodeのデザインツールと連携、コードをデザインと同期させる Xcodeのデザインツールと連携、コードをデザインと同期させる Xcodeのデザインツールと連携、コードをデザインと同期させる Xcodeのデザインツールと連携、コードをデザインと同期させる ダークモード、ローカリゼーション、アクセシビリティに自動対応 ダークモード、ローカリゼーション、アクセシビリティに自動対応 ダークモード、ローカリゼーション、アクセシビリティに自動対応 ダークモード、ローカリゼーション、アクセシビリティに自動対応 ダークモード、ローカリゼーション、アクセシビリティに自動対応 ダークモード、ローカリゼーション、アクセシビリティに自動対応 https://developer.apple.com/jp/xcode/swiftui https://developer.apple.com/jp/xcode/swiftui https://developer.apple.com/jp/xcode/swiftui https://developer.apple.com/jp/xcode/swiftui https://developer.apple.com/jp/xcode/swiftui https://developer.apple.com/jp/xcode/swiftui                               4 / 15
5. さらっとSwiftUI
   -
   環境 さらっとSwiftUI
   -
   環境 さらっとSwiftUI
   -
   環境 さらっとSwiftUI
   -
   環境 さらっとSwiftUI
   -
   環境 さらっとSwiftUI
   -
   環境 Xcode11.3
   Swift5.1
   iOS13
   より、利用可能 Xcode11.3
   Swift5.1
   iOS13
   より、利用可能 Xcode11.3
   Swift5.1
   iOS13
   より、利用可能 Xcode11.3
   Swift5.1
   iOS13
   より、利用可能 Xcode11.3
   Swift5.1
   iOS13
   より、利用可能 Xcode11.3
   Swift5.1
   iOS13
   より、利用可能 GANMA!の場合、
   GANMA!の場合、
   GANMA!の場合、
   GANMA!の場合、
   GANMA!の場合、
   GANMA!の場合、
   iOS11〜サポートなので、まだ利用は難しい... iOS11〜サポートなので、まだ利用は難しい... iOS11〜サポートなので、まだ利用は難しい... iOS11〜サポートなので、まだ利用は難しい... iOS11〜サポートなので、まだ利用は難しい... iOS11〜サポートなので、まだ利用は難しい... iOS13だけの画面とか、WatchOSとか、macOSとか、新たにアプリを iOS13だけの画面とか、WatchOSとか、macOSとか、新たにアプリを iOS13だけの画面とか、WatchOSとか、macOSとか、新たにアプリを iOS13だけの画面とか、WatchOSとか、macOSとか、新たにアプリを iOS13だけの画面とか、WatchOSとか、macOSとか、新たにアプリを iOS13だけの画面とか、WatchOSとか、macOSとか、新たにアプリを 作る場合は利用出来るかも 作る場合は利用出来るかも 作る場合は利用出来るかも 作る場合は利用出来るかも 作る場合は利用出来るかも 作る場合は利用出来るかも                   5 / 15
6. チュートリアルリンクとか チュートリアルリンクとか チュートリアルリンクとか チュートリアルリンクとか チュートリアルリンクとか チュートリアルリンクとか 1 1 1 1 1 1...... 公式Tutorial読んだり、手を動かしたり 公式Tutorial読んだり、手を動かしたり 公式Tutorial読んだり、手を動かしたり 公式Tutorial読んだり、手を動かしたり 公式Tutorial読んだり、手を動かしたり 公式Tutorial読んだり、手を動かしたり https://developer.apple.com/tutorials/swiftui https://developer.apple.com/tutorials/swiftui https://developer.apple.com/tutorials/swiftui https://developer.apple.com/tutorials/swiftui https://developer.apple.com/tutorials/swiftui https://developer.apple.com/tutorials/swiftui projectファイルも落とせて、概要掴むにはよくできている projectファイルも落とせて、概要掴むにはよくできている projectファイルも落とせて、概要掴むにはよくできている projectファイルも落とせて、概要掴むにはよくできている projectファイルも落とせて、概要掴むにはよくできている projectファイルも落とせて、概要掴むにはよくできている 説明は足りないと思うので、適宜ぐぐったりする 説明は足りないと思うので、適宜ぐぐったりする 説明は足りないと思うので、適宜ぐぐったりする 説明は足りないと思うので、適宜ぐぐったりする 説明は足りないと思うので、適宜ぐぐったりする 説明は足りないと思うので、適宜ぐぐったりする 2 2 2 2 2 2...... 公式リファレンス/ドキュメント 公式リファレンス/ドキュメント 公式リファレンス/ドキュメント 公式リファレンス/ドキュメント 公式リファレンス/ドキュメント 公式リファレンス/ドキュメント https://developer.apple.com/documentation/swiftui/ https://developer.apple.com/documentation/swiftui/ https://developer.apple.com/documentation/swiftui/ https://developer.apple.com/documentation/swiftui/ https://developer.apple.com/documentation/swiftui/ https://developer.apple.com/documentation/swiftui/ 3 3 3 3 3 3...... WWDC
   2019の動画を見る WWDC
   2019の動画を見る WWDC
   2019の動画を見る WWDC
   2019の動画を見る WWDC
   2019の動画を見る WWDC
   2019の動画を見る Introducing
   SwiftUI:
   Building
   Your
   First
   App Introducing
   SwiftUI:
   Building
   Your
   First
   App Introducing
   SwiftUI:
   Building
   Your
   First
   App Introducing
   SwiftUI:
   Building
   Your
   First
   App Introducing
   SwiftUI:
   Building
   Your
   First
   App Introducing
   SwiftUI:
   Building
   Your
   First
   App https://developer.apple.com/videos/play/wwdc2019/204/ https://developer.apple.com/videos/play/wwdc2019/204/ https://developer.apple.com/videos/play/wwdc2019/204/ https://developer.apple.com/videos/play/wwdc2019/204/ https://developer.apple.com/videos/play/wwdc2019/204/ https://developer.apple.com/videos/play/wwdc2019/204/                                     6 / 15
7. 参考に 参考に 参考に 参考に 参考に 参考に 7 / 15
8. さらっとSwiftUI
   -
   Viewを作る さらっとSwiftUI
   -
   Viewを作る さらっとSwiftUI
   -
   Viewを作る さらっとSwiftUI
   -
   Viewを作る さらっとSwiftUI
   -
   Viewを作る さらっとSwiftUI
   -
   Viewを作る Create
   Projectするとできる Create
   Projectするとできる Create
   Projectするとできる Create
   Projectするとできる Create
   Projectするとできる Create
   Projectするとできる import import SwiftUI SwiftUI struct struct ContentView ContentView: : View View { { var var body body: : some some View View { { Text Text( ("Hello, World!" "Hello, World!") ) } } } } struct struct ContentView_Previews ContentView_Previews: : PreviewProvider PreviewProvider { { static static var var previews previews: : some some View View { { ContentView ContentView( () ) } } } }       8 / 15
9. さらっとSwiftUI
   -
   Playground さらっとSwiftUI
   -
   Playground さらっとSwiftUI
   -
   Playground さらっとSwiftUI
   -
   Playground さらっとSwiftUI
   -
   Playground さらっとSwiftUI
   -
   Playground UIHostingControllerをつかう UIHostingControllerをつかう UIHostingControllerをつかう UIHostingControllerをつかう UIHostingControllerをつかう UIHostingControllerをつかう import import SwiftUI SwiftUI import import PlaygroundSupport PlaygroundSupport struct struct ContentView ContentView: : View View { { var var body body: : some some View View { { Text Text( ("try! SwiftUI" "try! SwiftUI") ). .font font( (. .title title) ) } } } } PlaygroundPage PlaygroundPage. .current current. .liveView liveView = = UIHostingController UIHostingController( (rootView rootView: : ContentView ContentView( () )) )       9 / 15
10. var
    body:
    some
    View
    {
    ...
    } var
    body:
    some
    View
    {
    ...
    } var
    body:
    some
    View
    {
    ...
    } var
    body:
    some
    View
    {
    ...
    } var
    body:
    some
    View
    {
    ...
    } var
    body:
    some
    View
    {
    ...
    } ↓は一体どういうものなのかを紐解く ↓は一体どういうものなのかを紐解く ↓は一体どういうものなのかを紐解く ↓は一体どういうものなのかを紐解く ↓は一体どういうものなのかを紐解く ↓は一体どういうものなのかを紐解く var var body body: : some some View View { { VStack VStack { { Text Text( ("try! SwiftUI" "try! SwiftUI") ) Text Text( ("Hello World!" "Hello World!") ) } } } }       10 / 15
11. var
    body:
    some
    View
    {
    ...
    } var
    body:
    some
    View
    {
    ...
    } var
    body:
    some
    View
    {
    ...
    } var
    body:
    some
    View
    {
    ...
    } var
    body:
    some
    View
    {
    ...
    } var
    body:
    some
    View
    {
    ...
    } 諸々を省略せずにちゃんと書くとこうなる 諸々を省略せずにちゃんと書くとこうなる 諸々を省略せずにちゃんと書くとこうなる 諸々を省略せずにちゃんと書くとこうなる 諸々を省略せずにちゃんと書くとこうなる 諸々を省略せずにちゃんと書くとこうなる var var body body: : some some View View { { // 1 ブロックの時 return が省略できる // 1 ブロックの時 return が省略できる return return VStack VStack. .init init( (content content: : { { // コンストラクタ // コンストラクタ return return ViewBuilder ViewBuilder. .buildBlock buildBlock( ( Text Text( ("try! SwiftUI" "try! SwiftUI") ), , Text Text( ("Hello World!" "Hello World!") ) ) ) } }) ) } } ViewBuilder..? ViewBuilder..? ViewBuilder..? ViewBuilder..? ViewBuilder..? ViewBuilder..?             11 / 15
12. VStackの定義を見に行く VStackの定義を見に行く VStackの定義を見に行く VStackの定義を見に行く VStackの定義を見に行く VStackの定義を見に行く public public struct struct VStack VStack< <Content Content> > : : View View where where Content Content : : View View { { @inlinable @inlinable public public init init( ( alignment alignment: : HorizontalAlignment HorizontalAlignment = = . .center center, , spacing spacing: : CGFloat CGFloat? ? = = nil nil, , @ @ViewBuilder ViewBuilder content content: : ( () ) - -> > Content Content ) ) public public typealias typealias Body Body = = Never Never } } @ViewBuilder @ViewBuilder @ViewBuilder @ViewBuilder @ViewBuilder @ViewBuilder
    がある
    がある
    がある
    がある
    がある
    がある       12 / 15
13. @ViewBuilderの定義を見に行く @ViewBuilderの定義を見に行く @ViewBuilderの定義を見に行く @ViewBuilderの定義を見に行く @ViewBuilderの定義を見に行く @ViewBuilderの定義を見に行く VStackの
    initializer VStackの
    initializer VStackの
    initializer VStackの
    initializer VStackの
    initializer VStackの
    initializer init init( (. .. .. ., , @ @ViewBuilder ViewBuilder content content: : ( () ) - -> > Content Content) ) ViewBuilderの定義 ViewBuilderの定義 ViewBuilderの定義 ViewBuilderの定義 ViewBuilderの定義 ViewBuilderの定義 @_functionBuilder @_functionBuilder public public struct struct ViewBuilder ViewBuilder { { public public static static func func buildBlock buildBlock( () ) - -> > EmptyView EmptyView public public static static func func buildBlock buildBlock< <Content Content> >( (_ _ content content: : Content Content) ) - -> > Content Content where where Content Content : : View View } } @_functionBuilder @_functionBuilder @_functionBuilder @_functionBuilder @_functionBuilder @_functionBuilder
    が肝になる
    が肝になる
    が肝になる
    が肝になる
    が肝になる
    が肝になる                   13 / 15
14. @_functionBuilder @_functionBuilder @_functionBuilder @_functionBuilder @_functionBuilder @_functionBuilder VStackの
    initializer VStackの
    initializer VStackの
    initializer VStackの
    initializer VStackの
    initializer VStackの
    initializer init init( (. .. .. ., , @ @ViewBuilder ViewBuilder content content: : ( () ) - -> > Content Content) ) ViewBuilderの定義 ViewBuilderの定義 ViewBuilderの定義 ViewBuilderの定義 ViewBuilderの定義 ViewBuilderの定義 @_functionBuilder @_functionBuilder public public struct struct ViewBuilder ViewBuilder { { public public static static func func buildBlock buildBlock( () ) - -> > EmptyView EmptyView public public static static func func buildBlock buildBlock< <Content Content> >( (_ _ content content: : Content Content) ) - -> > Content Content where where Content Content : : View View } } @_functionBuilder @_functionBuilder @_functionBuilder @_functionBuilder @_functionBuilder @_functionBuilder
    が肝になる
    が肝になる
    が肝になる
    が肝になる
    が肝になる
    が肝になる                   14 / 15
15. @_functionBuilderとは？ @_functionBuilderとは？ @_functionBuilderとは？ @_functionBuilderとは？ @_functionBuilderとは？ @_functionBuilderとは？ Swift5.1から使える機能 Swift5.1から使える機能 Swift5.1から使える機能 Swift5.1から使える機能 Swift5.1から使える機能 Swift5.1から使える機能 @_functionBuilder @_functionBuilder @_functionBuilder @_functionBuilder @_functionBuilder @_functionBuilder
    を定義する
    を定義する
    を定義する
    を定義する
    を定義する
    を定義する @_functionBuilder struct ArrayBuilder @_functionBuilder struct ArrayBuilder @_functionBuilder struct ArrayBuilder @_functionBuilder struct ArrayBuilder @_functionBuilder struct ArrayBuilder @_functionBuilder struct ArrayBuilder static
    func
    buildBlock static
    func
    buildBlock static
    func
    buildBlock static
    func
    buildBlock static
    func
    buildBlock static
    func
    buildBlock
    に処理を書く
    に処理を書く
    に処理を書く
    に処理を書く
    に処理を書く
    に処理を書く static func buildBlock<T>(_ x: T) -> [T] { [x] } static func buildBlock<T>(_ x: T) -> [T] { [x] } static func buildBlock<T>(_ x: T) -> [T] { [x] } static func buildBlock<T>(_ x: T) -> [T] { [x] } static func buildBlock<T>(_ x: T) -> [T] { [x] } static func buildBlock<T>(_ x: T) -> [T] { [x] } @ArrayBuilder @ArrayBuilder @ArrayBuilder @ArrayBuilder @ArrayBuilder @ArrayBuilder
    が使えるようになる
    が使えるようになる
    が使えるようになる
    が使えるようになる
    が使えるようになる
    が使えるようになる func makeArray<T>(@ArrayBuilder builder: () -> [T]) -> func makeArray<T>(@ArrayBuilder builder: () -> [T]) -> func makeArray<T>(@ArrayBuilder builder: () -> [T]) -> func makeArray<T>(@ArrayBuilder builder: () -> [T]) -> func makeArray<T>(@ArrayBuilder builder: () -> [T]) -> func makeArray<T>(@ArrayBuilder builder: () -> [T]) -> [T] [T] [T] [T] [T] [T] hoge
    {
    ...
    }
    に渡されたものがbuildBlockに展開されて処理される hoge
    {
    ...
    }
    に渡されたものがbuildBlockに展開されて処理される hoge
    {
    ...
    }
    に渡されたものがbuildBlockに展開されて処理される hoge
    {
    ...
    }
    に渡されたものがbuildBlockに展開されて処理される hoge
    {
    ...
    }
    に渡されたものがbuildBlockに展開されて処理される hoge
    {
    ...
    }
    に渡されたものがbuildBlockに展開されて処理される                                                 15 / 15