Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SwiftUIもくもく会/swiftui_mokumoku
Search
きちえもん
January 15, 2020
Technology
0
110
SwiftUIもくもく会/swiftui_mokumoku
社内勉強会資料。SwiftUIをもくもく触る会の導入として。
きちえもん
January 15, 2020
Tweet
Share
More Decks by きちえもん
See All by きちえもん
Appleプライバシー保護の最新事情と適応戦略/Apple privacy
kichiemon
2
1k
オブジェクト指向UIの紹介/object_oriented_user_interface_design
kichiemon
2
170
エラーアーキテクチャ設計について考える/Thinking about error architecture design
kichiemon
6
5.2k
GitLab Runnerで始める自前CI環境/iosdc_2019_gitlab_runner
kichiemon
0
1.8k
Other Decks in Technology
See All in Technology
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
AIコードアシスタントとiOS開発
jollyjoester
1
220
AIを使っていい感じにE2Eテストを書けるようになるまで / Trying to Write Good E2E Tests with AI
katawara
2
1.1k
OTel 公式ドキュメント翻訳 PJ から始めるコミュニティ活動/Community activities starting with the OTel official document translation project
msksgm
0
170
データ駆動経営の道しるべ:プロダクト開発指標の戦略的活用法
ham0215
2
220
振り返りTransit Gateway ~VPCをいい感じでつなげるために~
masakiokuda
4
230
Shadow DOMとセキュリティ - 光と影の境界を探る / Shibuya.XSS techtalk #13
masatokinugawa
0
240
ML Pipelineの開発と運用を OpenTelemetryで繋ぐ @ OpenTelemetry Meetup 2025-07
getty708
0
170
P2P ではじめる WebRTC のつまづきどころ
tnoho
1
130
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
210
自分がLinc’wellで提供しているプロダクトを理解するためにやったこと
murabayashi
1
150
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
210
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Balancing Empowerment & Direction
lara
1
490
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Rails Girls Zürich Keynote
gr2m
95
14k
Writing Fast Ruby
sferik
628
62k
Facilitating Awesome Meetings
lara
54
6.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Transcript
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