SwiftUIもくもく会/swiftui_mokumoku

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

Transcript

1. SwiftUI
   SwiftUI
   SwiftUI
   SwiftUI
   SwiftUI
   SwiftUIもくもくする
   もくもくする
   もくもくする
   もくもくする
   もくもくする
   もくもくする
   技術座談会
   技術座談会
   技術座談会
   技術座談会
   技術座談会
   技術座談会
   1 / 15
   

   View Slide

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
   

   View Slide

3. さらっとSwiftUI-SwiftUIとは？
   さらっとSwiftUI-SwiftUIとは？
   さらっとSwiftUI-SwiftUIとは？
   さらっとSwiftUI-SwiftUIとは？
   さらっとSwiftUI-SwiftUIとは？
   さらっとSwiftUI-SwiftUIとは？
   WWDC2019
   WWDC2019
   WWDC2019
   WWDC2019
   WWDC2019
   WWDC2019で発表
   で発表
   で発表
   で発表
   で発表
   で発表
   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、JetpackComposeみたいな
   e.g.React、Flutter、JetpackComposeみたいな
   e.g.React、Flutter、JetpackComposeみたいな
   e.g.React、Flutter、JetpackComposeみたいな
   e.g.React、Flutter、JetpackComposeみたいな
   e.g.React、Flutter、JetpackComposeみたいな
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   3 / 15
   

   View Slide

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
   

   View Slide

5. さらっとSwiftUI-環境
   さらっとSwiftUI-環境
   さらっとSwiftUI-環境
   さらっとSwiftUI-環境
   さらっとSwiftUI-環境
   さらっとSwiftUI-環境
   Xcode11.3Swift5.1iOS13より、利用可能
   Xcode11.3Swift5.1iOS13より、利用可能
   Xcode11.3Swift5.1iOS13より、利用可能
   Xcode11.3Swift5.1iOS13より、利用可能
   Xcode11.3Swift5.1iOS13より、利用可能
   Xcode11.3Swift5.1iOS13より、利用可能
   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
   

   View Slide

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...... WWDC2019の動画を見る
   WWDC2019の動画を見る
   WWDC2019の動画を見る
   WWDC2019の動画を見る
   WWDC2019の動画を見る
   WWDC2019の動画を見る
   IntroducingSwiftUI:BuildingYourFirstApp
   IntroducingSwiftUI:BuildingYourFirstApp
   IntroducingSwiftUI:BuildingYourFirstApp
   IntroducingSwiftUI:BuildingYourFirstApp
   IntroducingSwiftUI:BuildingYourFirstApp
   IntroducingSwiftUI:BuildingYourFirstApp
   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
   

   View Slide

7. 参考に
   参考に
   参考に
   参考に
   参考に
   参考に
   7 / 15
   

   View Slide

8. さらっとSwiftUI-Viewを作る
   さらっとSwiftUI-Viewを作る
   さらっとSwiftUI-Viewを作る
   さらっとSwiftUI-Viewを作る
   さらっとSwiftUI-Viewを作る
   さらっとSwiftUI-Viewを作る
   CreateProjectするとできる
   CreateProjectするとできる
   CreateProjectするとできる
   CreateProjectするとできる
   CreateProjectするとできる
   CreateProjectするとできる
   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
   

   View Slide

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
   

   View Slide

10. varbody:someView{...}
    varbody:someView{...}
    varbody:someView{...}
    varbody:someView{...}
    varbody:someView{...}
    varbody:someView{...}
    ↓は一体どういうものなのかを紐解く
    ↓は一体どういうものなのかを紐解く
    ↓は一体どういうものなのかを紐解く
    ↓は一体どういうものなのかを紐解く
    ↓は一体どういうものなのかを紐解く
    ↓は一体どういうものなのかを紐解く
    var
    var body
    body:
    : some
    some View
    View {
    {
    VStack
    VStack {
    {
    Text
    Text(
    ("try! SwiftUI"
    "try! SwiftUI")
    )
    Text
    Text(
    ("Hello World!"
    "Hello World!")
    )
    }
    }
    }
    }
    
    
    
    
    
    
    10 / 15
    

    View Slide

11. varbody:someView{...}
    varbody:someView{...}
    varbody:someView{...}
    varbody:someView{...}
    varbody:someView{...}
    varbody:someView{...}
    諸々を省略せずにちゃんと書くとこうなる
    諸々を省略せずにちゃんと書くとこうなる
    諸々を省略せずにちゃんと書くとこうなる
    諸々を省略せずにちゃんと書くとこうなる
    諸々を省略せずにちゃんと書くとこうなる
    諸々を省略せずにちゃんと書くとこうなる
    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
    

    View Slide

12. VStackの定義を見に行く
    VStackの定義を見に行く
    VStackの定義を見に行く
    VStackの定義を見に行く
    VStackの定義を見に行く
    VStackの定義を見に行く
    public
    public struct
    struct VStack
    VStack<
    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
    

    View Slide

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
    where
    where Content
    Content :
    : View
    View
    }
    }
    @_functionBuilder
    @_functionBuilder
    @_functionBuilder
    @_functionBuilder
    @_functionBuilder
    @_functionBuilder
    が肝になる
    が肝になる
    が肝になる
    が肝になる
    が肝になる
    が肝になる
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    13 / 15
    

    View Slide

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
    where
    where Content
    Content :
    : View
    View
    }
    }
    @_functionBuilder
    @_functionBuilder
    @_functionBuilder
    @_functionBuilder
    @_functionBuilder
    @_functionBuilder
    が肝になる
    が肝になる
    が肝になる
    が肝になる
    が肝になる
    が肝になる
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    14 / 15
    

    View Slide

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
    staticfuncbuildBlock
    staticfuncbuildBlock
    staticfuncbuildBlock
    staticfuncbuildBlock
    staticfuncbuildBlock
    staticfuncbuildBlockに処理を書く
    に処理を書く
    に処理を書く
    に処理を書く
    に処理を書く
    に処理を書く
    static func buildBlock(_ x: T) -> [T] { [x] }
    static func buildBlock(_ x: T) -> [T] { [x] }
    static func buildBlock(_ x: T) -> [T] { [x] }
    static func buildBlock(_ x: T) -> [T] { [x] }
    static func buildBlock(_ x: T) -> [T] { [x] }
    static func buildBlock(_ x: T) -> [T] { [x] }
    @ArrayBuilder
    @ArrayBuilder
    @ArrayBuilder
    @ArrayBuilder
    @ArrayBuilder
    @ArrayBuilderが使えるようになる
    が使えるようになる
    が使えるようになる
    が使えるようになる
    が使えるようになる
    が使えるようになる
    func makeArray(@ArrayBuilder builder: () -> [T]) ->
    func makeArray(@ArrayBuilder builder: () -> [T]) ->
    func makeArray(@ArrayBuilder builder: () -> [T]) ->
    func makeArray(@ArrayBuilder builder: () -> [T]) ->
    func makeArray(@ArrayBuilder builder: () -> [T]) ->
    func makeArray(@ArrayBuilder builder: () -> [T]) ->
    [T]
    [T]
    [T]
    [T]
    [T]
    [T]
    hoge{...}に渡されたものがbuildBlockに展開されて処理される
    hoge{...}に渡されたものがbuildBlockに展開されて処理される
    hoge{...}に渡されたものがbuildBlockに展開されて処理される
    hoge{...}に渡されたものがbuildBlockに展開されて処理される
    hoge{...}に渡されたものがbuildBlockに展開されて処理される
    hoge{...}に渡されたものがbuildBlockに展開されて処理される
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    15 / 15
    

    View Slide