社内勉強会資料。SwiftUIをもくもく触る会の導入として。
SwiftUISwiftUISwiftUISwiftUISwiftUISwiftUIもくもくするもくもくするもくもくするもくもくするもくもくするもくもくする技術座談会技術座談会技術座談会技術座談会技術座談会技術座談会1 / 15
View Slide
アジェンダアジェンダアジェンダアジェンダアジェンダアジェンダ111111...... SwiftUIにさらっと触れる(10min)SwiftUIにさらっと触れる(10min)SwiftUIにさらっと触れる(10min)SwiftUIにさらっと触れる(10min)SwiftUIにさらっと触れる(10min)SwiftUIにさらっと触れる(10min)222222...... もくもくする(40min)もくもくする(40min)もくもくする(40min)もくもくする(40min)もくもくする(40min)もくもくする(40min)333333...... 成果を発表(8min)成果を発表(8min)成果を発表(8min)成果を発表(8min)成果を発表(8min)成果を発表(8min)444444...... 次回のこと決める (2min)次回のこと決める (2min)次回のこと決める (2min)次回のこと決める (2min)次回のこと決める (2min)次回のこと決める (2min)2 / 15
さらっとSwiftUI-SwiftUIとは?さらっとSwiftUI-SwiftUIとは?さらっとSwiftUI-SwiftUIとは?さらっとSwiftUI-SwiftUIとは?さらっとSwiftUI-SwiftUIとは?さらっとSwiftUI-SwiftUIとは?WWDC2019WWDC2019WWDC2019WWDC2019WWDC2019WWDC2019で発表で発表で発表で発表で発表で発表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/swiftuihttps://developer.apple.com/jp/xcode/swiftuihttps://developer.apple.com/jp/xcode/swiftuihttps://developer.apple.com/jp/xcode/swiftuihttps://developer.apple.com/jp/xcode/swiftuihttps://developer.apple.com/jp/xcode/swiftui4 / 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
チュートリアルリンクとかチュートリアルリンクとかチュートリアルリンクとかチュートリアルリンクとかチュートリアルリンクとかチュートリアルリンクとか111111...... 公式Tutorial読んだり、手を動かしたり公式Tutorial読んだり、手を動かしたり公式Tutorial読んだり、手を動かしたり公式Tutorial読んだり、手を動かしたり公式Tutorial読んだり、手を動かしたり公式Tutorial読んだり、手を動かしたりhttps://developer.apple.com/tutorials/swiftuihttps://developer.apple.com/tutorials/swiftuihttps://developer.apple.com/tutorials/swiftuihttps://developer.apple.com/tutorials/swiftuihttps://developer.apple.com/tutorials/swiftuihttps://developer.apple.com/tutorials/swiftuiprojectファイルも落とせて、概要掴むにはよくできているprojectファイルも落とせて、概要掴むにはよくできているprojectファイルも落とせて、概要掴むにはよくできているprojectファイルも落とせて、概要掴むにはよくできているprojectファイルも落とせて、概要掴むにはよくできているprojectファイルも落とせて、概要掴むにはよくできている説明は足りないと思うので、適宜ぐぐったりする説明は足りないと思うので、適宜ぐぐったりする説明は足りないと思うので、適宜ぐぐったりする説明は足りないと思うので、適宜ぐぐったりする説明は足りないと思うので、適宜ぐぐったりする説明は足りないと思うので、適宜ぐぐったりする222222...... 公式リファレンス/ドキュメント公式リファレンス/ドキュメント公式リファレンス/ドキュメント公式リファレンス/ドキュメント公式リファレンス/ドキュメント公式リファレンス/ドキュメント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/333333...... WWDC2019の動画を見るWWDC2019の動画を見るWWDC2019の動画を見るWWDC2019の動画を見るWWDC2019の動画を見るWWDC2019の動画を見るIntroducingSwiftUI:BuildingYourFirstAppIntroducingSwiftUI:BuildingYourFirstAppIntroducingSwiftUI:BuildingYourFirstAppIntroducingSwiftUI:BuildingYourFirstAppIntroducingSwiftUI:BuildingYourFirstAppIntroducingSwiftUI:BuildingYourFirstApphttps://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するとできるimportimport SwiftUISwiftUIstructstruct ContentViewContentView:: ViewView {{varvar bodybody:: somesome ViewView {{TextText(("Hello, World!""Hello, World!"))}}}}structstruct ContentView_PreviewsContentView_Previews:: PreviewProviderPreviewProvider {{staticstatic varvar previewspreviews:: somesome ViewView {{ContentViewContentView(())}}}}8 / 15
さらっとSwiftUI-PlaygroundさらっとSwiftUI-PlaygroundさらっとSwiftUI-PlaygroundさらっとSwiftUI-PlaygroundさらっとSwiftUI-PlaygroundさらっとSwiftUI-PlaygroundUIHostingControllerをつかうUIHostingControllerをつかうUIHostingControllerをつかうUIHostingControllerをつかうUIHostingControllerをつかうUIHostingControllerをつかうimportimport SwiftUISwiftUIimportimport PlaygroundSupportPlaygroundSupportstructstruct ContentViewContentView:: ViewView {{varvar bodybody:: somesome ViewView {{TextText(("try! SwiftUI""try! SwiftUI"))..fontfont((..titletitle))}}}}PlaygroundPagePlaygroundPage..currentcurrent..liveViewliveView ==UIHostingControllerUIHostingController((rootViewrootView:: ContentViewContentView(())))9 / 15
varbody:someView{...}varbody:someView{...}varbody:someView{...}varbody:someView{...}varbody:someView{...}varbody:someView{...}↓は一体どういうものなのかを紐解く↓は一体どういうものなのかを紐解く↓は一体どういうものなのかを紐解く↓は一体どういうものなのかを紐解く↓は一体どういうものなのかを紐解く↓は一体どういうものなのかを紐解くvarvar bodybody:: somesome ViewView {{VStackVStack {{TextText(("try! SwiftUI""try! SwiftUI"))TextText(("Hello World!""Hello World!"))}}}}10 / 15
varbody:someView{...}varbody:someView{...}varbody:someView{...}varbody:someView{...}varbody:someView{...}varbody:someView{...}諸々を省略せずにちゃんと書くとこうなる諸々を省略せずにちゃんと書くとこうなる諸々を省略せずにちゃんと書くとこうなる諸々を省略せずにちゃんと書くとこうなる諸々を省略せずにちゃんと書くとこうなる諸々を省略せずにちゃんと書くとこうなるvarvar bodybody:: somesome ViewView {{// 1ブロックの時 returnが省略できる// 1ブロックの時 returnが省略できるreturnreturn VStackVStack..initinit((contentcontent:: {{ //コンストラクタ//コンストラクタreturnreturn ViewBuilderViewBuilder..buildBlockbuildBlock((TextText(("try! SwiftUI""try! SwiftUI")),,TextText(("Hello World!""Hello World!"))))}}))}}ViewBuilder..?ViewBuilder..?ViewBuilder..?ViewBuilder..?ViewBuilder..?ViewBuilder..?11 / 15
VStackの定義を見に行くVStackの定義を見に行くVStackの定義を見に行くVStackの定義を見に行くVStackの定義を見に行くVStackの定義を見に行くpublicpublic structstruct VStackVStack<Content>> :: ViewView wherewhere ContentContent :: ViewView {{@inlinable@inlinable publicpublic initinit((alignmentalignment:: HorizontalAlignmentHorizontalAlignment == ..centercenter,,spacingspacing:: CGFloatCGFloat?? == nilnil,,@@ViewBuilderViewBuilder contentcontent:: (()) -->> ContentContent))publicpublic typealiastypealias BodyBody == NeverNever}}@ViewBuilder@ViewBuilder@ViewBuilder@ViewBuilder@ViewBuilder@ViewBuilderがあるがあるがあるがあるがあるがある12 / 15
@ViewBuilderの定義を見に行く@ViewBuilderの定義を見に行く@ViewBuilderの定義を見に行く@ViewBuilderの定義を見に行く@ViewBuilderの定義を見に行く@ViewBuilderの定義を見に行くVStackのinitializerVStackのinitializerVStackのinitializerVStackのinitializerVStackのinitializerVStackのinitializerinitinit((......,, @@ViewBuilderViewBuilder contentcontent:: (()) -->> ContentContent))ViewBuilderの定義ViewBuilderの定義ViewBuilderの定義ViewBuilderの定義ViewBuilderの定義ViewBuilderの定義@_functionBuilder@_functionBuilder publicpublic structstruct ViewBuilderViewBuilder {{publicpublic staticstatic funcfunc buildBlockbuildBlock(()) -->> EmptyViewEmptyViewpublicpublic staticstatic funcfunc buildBlockbuildBlock<Content>>((__ contentcontent:: ContentContent)) -->> ContentContentwherewhere ContentContent :: ViewView}}@_functionBuilder@_functionBuilder@_functionBuilder@_functionBuilder@_functionBuilder@_functionBuilderが肝になるが肝になるが肝になるが肝になるが肝になるが肝になる13 / 15
@_functionBuilder@_functionBuilder@_functionBuilder@_functionBuilder@_functionBuilder@_functionBuilderVStackのinitializerVStackのinitializerVStackのinitializerVStackのinitializerVStackのinitializerVStackのinitializerinitinit((......,, @@ViewBuilderViewBuilder contentcontent:: (()) -->> ContentContent))ViewBuilderの定義ViewBuilderの定義ViewBuilderの定義ViewBuilderの定義ViewBuilderの定義ViewBuilderの定義@_functionBuilder@_functionBuilder publicpublic structstruct ViewBuilderViewBuilder {{publicpublic staticstatic funcfunc buildBlockbuildBlock(()) -->> EmptyViewEmptyViewpublicpublic staticstatic funcfunc buildBlockbuildBlock<Content>>((__ contentcontent:: ContentContent)) -->> ContentContentwherewhere ContentContent :: ViewView}}@_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 ArrayBuilderstaticfuncbuildBlockstaticfuncbuildBlockstaticfuncbuildBlockstaticfuncbuildBlockstaticfuncbuildBlockstaticfuncbuildBlockに処理を書くに処理を書くに処理を書くに処理を書くに処理を書くに処理を書く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