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を書くために / After Party iOSDC Japan 2021 SwiftUI
Search
Atsuya Sato
October 01, 2021
Technology
3
960
チームでSwiftUIを書くために / After Party iOSDC Japan 2021 SwiftUI
2021/10/1に開催されたAfter Party iOSDC Japan 2021の登壇資料です
Atsuya Sato
October 01, 2021
Tweet
Share
More Decks by Atsuya Sato
See All by Atsuya Sato
画面最前面に表示されるデバッグツールを作る
natmark
2
130
最低サポートOSバージョンをあげた時のストア表示について / potatotips81-store-page-apperance-with-deployment-target-updated
natmark
2
440
施策基盤としてのディープリンク〜なめらかにアプリが開く体験のために〜
natmark
9
6.8k
iOSDC_SwiftUI_Text
natmark
4
5.3k
Service development lecture in Cookpad Online Summer Internship 2020
natmark
1
7.8k
防犯システムのプロトタイピングを SORACOMのサービスを用いて爆速で行う
natmark
0
160
動かして理解するGitの内側
natmark
3
2.1k
CA-FUN-LT-ProcessingKit.pdf
natmark
0
580
iOSDC2018-MicroMDM.pdf
natmark
6
7.6k
Other Decks in Technology
See All in Technology
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
700
サーバーレスAPI(API Gateway+Lambda)とNext.jsで 個人ブログを作ろう!
shuntaka
PRO
0
560
How to Think Like a Performance Engineer
csswizardry
4
590
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
可視化プラットフォームGrafanaの基本と活用方法の全て
hamadakoji
0
230
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
160
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
Designing for Performance
lara
604
67k
Designing with Data
zakiwarfel
96
5k
Fireside Chat
paigeccino
25
2.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
Happy Clients
brianwarren
94
6.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Transcript
νʔϜͰSwiftUIΛॻͨ͘Ίʹ ~ಡΈ͘͢อक͍͢͠SwiftUIͷઃܭʹ͍ͭͯߟ͑ͨ͜ͱ~ After Party iOSDC Japan 2021 / Atsuya Sato
ࠤ౻ ರ (͋ͭ) @n_atmark • iOS / Android ΤϯδχΞ •
ݱࡏΫοΫύουAndroidΞϓϦͷʮ͔͍ͷʯλϒΛӶҙ։ൃத 2019/04 2021/01 • ΫοΫύου৽ଔೖࣾ • ങࣄۀຊ෦ ങϓϩμΫτ։ൃ෦ • ΫοΫύουϚʔτͷྲྀ௨͚ͷαʔϏε։ൃɺϋʔυΣΞ։ൃͳͲʹैࣄ • ΫοΫύουࣄۀຊ෦ ങαʔϏε։ൃ෦ • ΫοΫύουiOSΞϓϦͷʮ͔͍ͷʯλϒͷ։ൃʹैࣄ
ΞδΣϯμ • എܠ • ։ൃ͍ͯ͠ΔϓϩμΫτͷհ • νʔϜϓϩμΫτͷنײ • SwiftUIΛ༻͍ͯ1ؒ։ൃͯ͠Έͯ •
ಡΈͯ͘͢อक͍͢͠ઃܭʹ͍ͭͯߟ͑ͨࣄ • ౷Ұͨ͠ॻ͖ํͰϨΠΞτΛઃܭ͢ΔͨΊʹ • ෳࡶɾଟ༷ͳ݅ʹରॲ͢Δ • ྑ͍ઃܭͷҙࣝΛνʔϜਁಁ͢ΔͨΊʹ • ·ͱΊ
։ൃ͍ͯ͠ΔϓϩμΫτͷհ • എܠ • ։ൃ͍ͯ͠ΔϓϩμΫτͷհ • νʔϜϓϩμΫτͷنײ • SwiftUIΛ༻͍ͯ1ؒ։ൃͯ͠Έͯ
ΫοΫύουΞϓϦʮങ͍ػೳʯͷհ
ΫοΫύουΞϓϦʮങ͍ػೳʯͷհ
ΫοΫύουΞϓϦʮങ͍ػೳʯͷհ ৯ࡐ͔ΒϨγϐ͕୳ͤΔ ৯ࡐΛങͬͨਓ͕ ࣮ࡍʹ࡞ͬͨྉཧ ΛࢀߟʹͰ͖Δ
ΫοΫύουΞϓϦʮങ͍ػೳʯͷհ レシピから必要な⾷材 を購⼊できる
νʔϜϓϩμΫτͷنײ • എܠ • ։ൃ͍ͯ͠ΔϓϩμΫτͷհ • νʔϜϓϩμΫτͷنײ • SwiftUIΛ༻͍ͯ1ؒ։ൃͯ͠Έͯ
νʔϜͱ։ൃ͍ͯ͠ΔϓϩμΫτʹ͍ͭͯ • ങαʔϏε։ൃ෦ • ʮϨγϐʯ×ʮങ͍ʯʹΑͬͯ৽ͨͳՁΛੜΈ ग़͢ઓ • ΫοΫύουiOSΞϓϦͷʮങ͍ػೳʯ • ΤϯδχΞ6ਓ
(iOS 3ɺαʔόʔαΠυ3) • + ඇఆظͰΠϯλʔϯੜ͕νʔϜʹδϣΠϯ
ΫοΫύουΞϓϦʮങ͍ػೳʯͷ։ൃ • ϚϧνϞδϡʔϧԽ͞Ε͍ͯΔΫοΫύουΞϓϦͷ Feature ModuleͷҰͭͱͯ͠ػೳ։ൃ (KaimonoϞδϡʔϧ)
https://speakerdeck.com/giginet/da-gui-mo-naapurifalsemarutimoziyurugou-cheng-falseshi-jian ⼤規模なアプリのマルチモジュール構成の実践
ΫοΫύουΞϓϦʮങ͍ػೳʯͷ։ൃ • ΄΅શͯSwiftUIͰ։ൃத • VIPERΞʔΩςΫνϟͷ͏ͪɺView෦ͷΈͰ SwiftUIΛར༻͢Δઃܭ
https://techlife.cookpad.com/entry/2021/01/18/kaimono-swift-ui SwiftUI を活⽤した「レシピ」×「買い物」の新機能開発
ΫοΫύουΞϓϦʮങ͍ػೳʯͷ։ൃ • Feature ModuleͷҰͭͱͯ͠ػೳ։ൃ • VIPERΞʔΩςΫνϟͷ͏ͪɺView෦ͷΈͰSwiftUI Λར༻͢Δઃܭ • 20203݄͔Β։ൃ (202010݄ʹҰൠϦϦʔε)
• ࠷αϙʔτOSiOS 13.3
ΫοΫύουΞϓϦʮങ͍ػೳʯͷ։ൃ • Kaimono ϞδϡʔϧԼͷίʔυߦ • 45,953ߦ (ΫοΫύουiOSશମͷ15%) • UIHostingViewControllerͰϥοϓ͞ΕͨRootView •
35ը໘ • ผϑΝΠϧʹΓग़͞ΕͨSwiftUIίϯϙʔωϯτ • 149ݸ
None
SwiftUIΛ༻͍ͯ1ؒ։ൃͯ͠Έͯ • എܠ • ։ൃ͍ͯ͠ΔϓϩμΫτͷհ • νʔϜϓϩμΫτͷنײ • SwiftUIΛ༻͍ͯ1ؒ։ൃͯ͠Έͯ
1લͷঢ়گ • iOSDC Japan 2020Ͱൃදͨ͠λΠϛϯά … ͪΐ͏Ͳങ ͍ػೳϦϦʔε࣌ظͩͬͨ
https://speakerdeck.com/yujif/iosdc-japan-2020-day-2-cookpad クックパッドが、⾰新的な⽅法でまったく新しい買い物体験を皆様にお届けします
None
1લͷঢ়گ • SwiftUIͷϝϦοτΛײ͍ͯͨ͡෦ • ίʔυྔ͕ݮΔ • ෳࡶɾଟ༷ͳ݅ʹର͔ͯ͠Γ͘͢ॻ͚Δ • ίϯϙʔωϯτ୯ҐͰ͍ճ͠ɾվม͕͍͢͠
ΞϓϦΛϦϦʔε͔ͯ͠Β1։ൃ͍ͯ͘͠தͰͷมԽ • ίʔυϕʔεͷڊେԽ • Feature ModuleͷதͰίʔυߦVIPERγʔϯ࠷େʹ • iOS 14ɾiOS 15ͷϦϦʔε
• iOS 13ɺ14ɺ15ͷ3όʔδϣϯαϙʔτʹ • νʔϜͷ֦େ • ϝΠϯͰ։ൃ͢ΔΤϯδχΞ૿͑ͨ • ΠϯλʔϯੜܞΘΔΑ͏ʹ
1։ൃͯ͠Έͯײ͍ͯ͡Δ՝ • iOS 13ରԠʹΑΔফগͳ͔Βͣൃੜ͢Δ • iOS 13͚ͩڍಈ͕ҧ͏෦͕গͳ͔Βͣ͋Δ • ύϑΥʔϚϯεΛ٘ਜ਼ʹ͍ͯ͠ΔՕॴ݁ߏ͋Δ •
LazyV/HStackɺLazyV/HGrid͑ͯͳ͍😢
1։ൃͯ͠Έͯײ͍ͯ͡Δ՝ • ॊೈੑ͕ߴ͍ͨΊɺUIͷΈํ͕ਓʹΑͬͯมΘΔ • ྫ: ཁૉΛॏͶ͍ͨͱ͖ͷZStackɺbackgroundɺ overlayͷ͍͚ • ྫ: εϖʔεͷ։͚ํ
• ίϯϙʔωϯτׂͷཻ
Q: ࠓޙSwiftUIΛऔΓೖΕͨ։ൃ Λ͢Δʁ ৭ʑফ ײͯͦ͡͏͚ͩͲ…?
Q: ࠓޙSwiftUIΛऔΓೖΕͨ։ൃ Λ͢Δʁ A: Yes
ࠓޙSwiftUIΛऔΓೖΕͨ։ൃΛ͢Δʁ ෆ֬ఆͳϢʔβʔମݧΛ͍ͪૣཱ֬͘͢ΔͨΊʹ ʮ࡞Γ͍͢ɾյ͍͢͠ʯͷॏཁ SwiftUIΛ͏͜ͱͰ໌Β͔ʹ͜ͷ෦ૣ͘ͳ͍ͬͯΔ
ࠓޙSwiftUIΛऔΓೖΕͨ։ൃΛ͢Δʁ ࠓޙνʔϜͰSwiftUIΛ࠾༻͍ͯͨ͘͠Ίʹ… SwiftUIΛͬͯײ͍ͯ͡Δ՝Λ ҰͭͣͭऔΓআ͍͍͖͍ͯͨ💪
ಡΈͯ͘͢อक͍͢͠ SwiftUIͷઃܭʹ͍ͭͯߟ͑Δ
今⽇のトピックでは取り扱いません
αʔϏεಛੑΛߟ͑Δ • ʮ͔͍ͷʯλϒͷߏجຊॎεΫϩʔϧͷը໘ • Viewߏஙͷࡍͷجຊܗͱͯ͠ScrollViewͷதʹཁૉ Λ٧Ί͍ͯ͘ը໘͕΄ͱΜͲ
αʔϏεಛੑΛߟ͑Δ • ෳࡶଟ༷ͳঢ়ଶ • ྫ: จޙͷड͚औΓʹؔ͢Δঢ়ଶ
αʔϏεಛੑʹجͮ͘՝ • ը໘͕ॎʹ͘ͳΓ͍͢ • ίϯϙʔωϯτͷཻॻ ͖ํ͕౷Ұ͞Εͯͳ͍ͱಡ Έʹ͍͘ • ঢ়ଶ͕૿͑Δͱɺذͦͷ ૿͑Δ
ಡΈ͘͢อक͍͢͠ઃܭ • ઃܭʹݸਓ͕ࠩ͋·Γग़ͳ͍Α͏ʹ͍ͨ͠ • ͕݅ෳࡶʹͳͬͯಡΊΔΑ͏ʹ͓͖͍ͯͨ͠ • ͕݅ෳࡶͳը໘ͷอकΛ༰қʹ͍ͨ͠ • ྑ͍ઃܭͷҙࣝΛνʔϜʹਁಁ͍ͤͨ͞
౷Ұͨ͠ॻ͖ํͰϨΠΞτΛઃܭ͢ΔͨΊʹ • ಡΈͯ͘͢อक͍͢͠ઃܭʹ͍ͭͯߟ͑ͨࣄ ◦ ౷Ұͨ͠ॻ͖ํͰϨΠΞτΛઃܭ͢ΔͨΊʹ ◦ ෳࡶɾଟ༷ͳ݅ʹରॲ͢Δ ◦ ྑ͍ઃܭͷҙࣝΛνʔϜਁಁ͢ΔͨΊʹ
౷Ұͨ͠ॻ͖ํͰϨΠΞτΛઃܭ͢ΔͨΊʹ • RootViewͷbodyʹॻ͖͘༰Λఆ͍ٛͨ͠ • ίϯϙʔωϯτԽͷཻʹؔͯ͠ڞ௨ೝࣝΛͱΓ͍ͨ
ϨΠΞτΈʹؔͯ͠ struct KaimonoCartView: View { var body: some View {
ScrollView { orderDeliverySection cartPriceSection pickupNameSettingSection deliveryInformationSection pickupStepsSection } } }
ϨΠΞτΈʹؔͯ͠ • ը໘Λҙຯͷ͋Δ·ͱ·ΓͰSectionʹׂ • ෳίϯϙʔωϯτΛͱΓ·ͱΊΔ • ίϯϙʔωϯτؒͷϚʔδϯௐΛ ߦ͏ͨΊͷϨΠϠʔ
ϨΠΞτΈʹؔͯ͠ • ը໘Λҙຯͷ͋Δ·ͱ·ΓͰSectionʹׂ • ׂͨ͠SectionRootViewʹඥͮ͘ (ෳը໘Ͱར༻͠ͳ͍) • SectionΛෳը໘Ͱ͍ͨ͘ͳͬͨ ΒίϯϙʔωϯτԽͷཻΛݟ͢
SectionͷׂҐஔͷܾΊํ • σβΠφʔͱ૬ஊ͠ͳ͕ΒηΫγϣϯׂҐஔ ΛܾΊΔΑ͏ʹ͢Δ • Figma্ͰσβΠϯελΠϧʹԊͬͯάϧʔ ϐϯά͞Ε͍ͯΔͷͰɺσβΠφʔͷҙਤΛ өͭͭ͠Sectionׂ
None
Atoms Molecules Moleculesͷू߹ମ Organisms ProductTile ProductsGrid PopularProductsSection
ίϯϙʔωϯτʹؔͯ͠ • ίϯϙʔωϯτԽ͢Δͷʹؔͯ͠ผϑΝΠϧʹΓग़͠ • ཻ • ΞτϛοΫσβΠϯͰݴ͏Molecules • ୯ମMoleculesΛෳฒͨঢ়ଶͷͷ※ΛίϯϙʔωϯτԽ •
AtomsϨϕϧͷίϯϙʔωϯτԽͯ͠·ͤΜ
ίϯϙʔωϯτʹؔͯ͠ • ίϯϙʔωϯτͷཻʹؔͯ͠νʔϜͰೝ͕ࣝऔΕ͍ͯΔͱί ϛϡχέʔγϣϯ͕ͱΓ͍͢ • Sectionͱͯ͠RootViewʹඥͮ͘ܗͰ༻ҙ͖͢ͷ • ίϯϙʔωϯτͱͯ͠Γग़͖͢ͷ • ίϯϙʔωϯτͱͯ͠Γग़͢߹
• Ͳ͜·Ͱࡉׂ͔͘͢Δͷ͔
ෳࡶɾଟ༷ͳ݅ʹରॲ͢Δ • ಡΈͯ͘͢อक͍͢͠ઃܭʹ͍ͭͯߟ͑ͨࣄ ◦ ౷Ұͨ͠ॻ͖ํͰϨΠΞτΛઃܭ͢ΔͨΊʹ ◦ ෳࡶɾଟ༷ͳ݅ʹରॲ͢Δ ◦ ྑ͍ઃܭͷҙࣝΛνʔϜਁಁ͢ΔͨΊʹ
ෳࡶɾଟ༷ͳ݅ʹରॲ͢Δ
ෳࡶɾଟ༷ͳ݅ʹରॲ͢Δ struct KaimonoDeliveryDetailView: View { var body: some View {
ScrollView { switch dataSource.delivery.deliveryStatus { case .accepting: headerSection pickupNameSection orderedProductsSection if shouldShowPickupGuide { pickupGuideSection } // Sectionͷτϧπϝ acceptedButtonSection ordersSection case .preparing: // ུ } } } }
ෳࡶɾଟ༷ͳ݅ʹରॲ͢Δ • RootViewͷbodyʹSectionΛྻڍ͢ΔΑ͏ʹͨ͜͠ͱͰ ݟ௨͕͠ྑ͍ • ঢ়ଶʹԠͨ͡Sectionͷग़͚͠ɺಛఆ݅ʹԠ͡ ͨSectionͷτϧπϝ͔Γ͍͢ • body͕ը໘ϨΠΞτͷઃܭਤͱͯ͠ػೳ͢Δ
ਖ਼֬ʹಈ࡞ͤ͞ΔͨΊʹ • ίʔυ্Ͱͷݟ௨͘͢͠͠ͳ͕ͬͨ… • ෳͷ݅Λߟྀͨ͠ը໘ʹ͓͚ΔϢʔβʔঢ়ଶͷ࠶ݱ ͍͠ • ը໘͕յΕ͍ͯͳ͍͜ͱΛಈ࡞֬ೝ͢Δ • ࣮ʹೖΔ·Ͱʹ֘ը໘ΛදࣔͰ͖ΔΑ͏ʹͳΔ
·Ͱ͕͔͔࣌ؒΔ
ਖ਼֬ʹಈ࡞ͤ͞ΔͨΊͷऔΓΈ
https://speakerdeck.com/aomathwift/ji-neng-gotonidong-zuo- suruminiapuridepurebiyusaikuruwobao-su-nisitahua 機能ごとに動作するミニアプリでプレビューサイクルを爆速にした話
ਖ਼֬ʹಈ࡞ͤ͞ΔͨΊͷऔΓΈ
ਖ਼֬ʹಈ࡞ͤ͞ΔͨΊͷऔΓΈ extension SandboxScene { static let kaimonoTopForJustSetupCompleted = SandboxScene(sceneName: "τοϓʢडऔॴઃఆࡁɾະจʣ")
{ initializer in let environment = StubbableEnvironment() initializer.initialize(environment) environment.registerClientResponses(fixtures, overrideFixtures: [ .orders(.empty), .userOrderedDeliveries(.empty), ]) ɹ let viewController = KaimonoTopViewBuilder.build(environment: environment) return viewController } static let kaimonoTopForDeliveriesUnavailable = SandboxScene(sceneName: "τοϓʢۙͷૹͳ͠ʣ") { initializer in // ུ } } private let fixtures: [Fixture] = [ .cart(.normal), .promotedDeliveryProducts(.ordinary), .me(.userLocation), .feature(.popularProducts), // ུ ]
ਖ਼֬ʹಈ࡞ͤ͞ΔͨΊͷऔΓΈ private let fixtures: [Fixture] = [ .cart(.normal), .promotedDeliveryProducts(.ordinary), .me(.userLocation),
.feature(.popularProducts), // ུ ] environment.registerClientResponses(fixtures, overrideFixtures: [ .orders(.empty), .userOrderedDeliveries(.empty), ]) • ը໘දࣔʹඞཁͳϨεϙϯεελϒΛFixtureԽ • ϕʔεͷFixtureͱɺ݅͝ͱͷoverrideFixturesΛ༻ҙ • ϛχΞϓϦͷ݅͝ͱͷը໘දࣔΛ؆୯ʹఆٛͰ͖ΔΑ͏ʹ
ྑ͍ઃܭͷҙࣝΛνʔϜਁಁ͢ΔͨΊʹ • ಡΈͯ͘͢อक͍͢͠ઃܭʹ͍ͭͯߟ͑ͨࣄ ◦ ౷Ұͨ͠ॻ͖ํͰϨΠΞτΛઃܭ͢ΔͨΊʹ ◦ ෳࡶɾଟ༷ͳ݅ʹରॲ͢Δ ◦ ྑ͍ઃܭͷҙࣝΛνʔϜਁಁ͢ΔͨΊʹ
ྑ͍ઃܭͷҙࣝΛνʔϜਁಁ͢ΔͨΊʹ • υΩϡϝϯτԽ • υΩϡϝϯτඋձ • ݟ·ͱΊࣾϒϩά • SwiftUIϨΠΞτʹؔ͢Δௐࠪ •
ઃܭʹ͍ͭͯޠΔձ
ྑ͍ઃܭͷҙࣝΛνʔϜਁಁ͢ΔͨΊʹ
ྑ͍ઃܭͷҙࣝΛνʔϜਁಁ͢ΔͨΊʹ
ྑ͍ઃܭͷҙࣝΛνʔϜਁಁ͢ΔͨΊʹ
ྑ͍ઃܭͷҙࣝΛνʔϜਁಁ͢ΔͨΊʹ
ྑ͍ઃܭͷҙࣝΛνʔϜਁಁ͢ΔͨΊʹ
·ͱΊ • ౷Ұͨ͠ॻ͖ํͰϨΠΞτΛઃܭ͢ΔͨΊʹ • ϨΠΞτઃܭΛ౷ҰԽ • ίϯϙʔωϯτԽͷཻΛ໌֬ʹ • ෳࡶɾଟ༷ͳ݅ʹରॲ͢Δ •
ը໘ϨΠΞτͷઃܭਤͱͯ͠RootViewͷbodyΛར༻ • ಈ࡞֬ೝͷͨΊʹϛχΞϓϦΛ׆༻ • ྑ͍ઃܭͷҙࣝΛνʔϜਁಁ͢ΔͨΊʹ • ఆظతʹઃܭʹ͍ͭͯٞ͢ΔΛઃ͚Δ • υΩϡϝϯτԽ͢Δ͜ͱʹΑͬͯڞ௨ೝࣝΛऔΔ