SwiftUIもくもく会/swiftui_mokumoku

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

アジェンダアジェンダアジェンダアジェンダアジェンダアジェンダ 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

さらっと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

さらっと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

さらっと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

チュートリアルリンクとかチュートリアルリンクとかチュートリアルリンクとかチュートリアルリンクとかチュートリアルリンクとかチュートリアルリンクとか 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

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

さらっと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

さらっと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

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

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

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

@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

@_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

@_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<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

SwiftUIもくもく会/swiftui_mokumoku

SwiftUIもくもく会/swiftui_mokumoku

きちえもん

More Decks by きちえもん

Other Decks in Technology

Featured

Transcript

SwiftUI SwiftUI SwiftUI SwiftUI SwiftUI SwiftUIもくもくするもくもくするもくもくするもくもくするもくもくする

アジェンダアジェンダアジェンダアジェンダアジェンダアジェンダ 1 1 1 1

さらっとSwiftUI-SwiftUIとは？さらっとSwiftUI-SwiftUIとは？さらっとSwiftUI-SwiftUIとは？さらっとSwiftUI-SwiftUIとは？さらっとSwiftUI-SwiftUIとは？さらっとSwiftUI-SwiftUIとは？ WWDC2019 WWDC2019 WWDC2019 WWDC2019

さらっとSwiftUI-特徴さらっとSwiftUI-特徴さらっとSwiftUI-特徴さらっとSwiftUI-特徴さらっとSwiftUI-特徴さらっとSwiftUI-特徴「「「「

チュートリアルリンクとかチュートリアルリンクとかチュートリアルリンクとかチュートリアルリンクとかチュートリアルリンクとかチュートリアルリンクとか 1 1 1 1

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

VStackの定義を見に行く VStackの定義を見に行く VStackの定義を見に行く VStackの定義を見に行く VStackの定義を見に行く VStackの定義を見に行く public public struct struct

@_functionBuilder @_functionBuilder @_functionBuilder @_functionBuilder @_functionBuilder @_functionBuilder VStackのinitializer VStackのinitializer VStackのinitializer VStackのinitializer

@_functionBuilderとは？ @_functionBuilderとは？ @_functionBuilderとは？ @_functionBuilderとは？ @_functionBuilderとは？ @_functionBuilderとは？ Swift5.1から使える機能 Swift5.1から使える機能 Swift5.1から使える機能 Swift5.1から使える機能