Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SwiftUIもくもく会/swiftui_mokumoku

 SwiftUIもくもく会/swiftui_mokumoku

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

きちえもん

January 15, 2020
Tweet

More Decks by きちえもん

Other Decks in Technology

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