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
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプ...
Search
ojun
July 05, 2024
Programming
4
700
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun
July 05, 2024
Tweet
Share
More Decks by ojun
See All by ojun
Swift Evolution かるた
ojun9
2
99
Catch Up with Swift 5.10
ojun9
2
780
Overview: Swift OpenAPI Generator
ojun9
3
1.9k
if 式と switch 式による SwiftUI のプレビューエラー対策
ojun9
1
1.5k
楽しい夏休み!String Catalogs で新しい発見
ojun9
0
2.1k
ユニットテストを学んだ次に知りたかったApple標準APIに対するテストのやり方
ojun9
1
410
ハッカソンにおけるiOSアプリ開発での学びと楽しさ
ojun9
1
330
Other Decks in Programming
See All in Programming
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
SwiftUI Viewの責務分離
elmetal
PRO
0
140
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
Grafana Cloudとソラカメ
devoc
0
140
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
29
11k
WebDriver BiDiとは何なのか
yotahada3
1
140
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Build your cross-platform service in a week with App Engine
jlugia
229
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Optimizing for Happiness
mojombo
376
70k
Become a Pro
speakerdeck
PRO
26
5.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
The Cult of Friendly URLs
andyhume
78
6.2k
We Have a Design System, Now What?
morganepeng
51
7.4k
Designing for Performance
lara
604
68k
Transcript
potatotips #88 iOS/Android։ൃTipsڞ༗ձ 2024/07/05 @STORES Xcode 16ͷPreviewModifierͱ@Previewable Λ׆༻ͨ͠ޮతͳϓϨϏϡʔํ๏ͷߟ ojun -
DeNA Co., Ltd.
ࣗݾհʢojunʣ • name: ojun • 2023৽ଔೖࣾ • iOSΤϯδχΞ @ojun_9
Xcode 16ͷ PreviewModifier ͱ @Previewable Λ׆༻ͨ͠ޮతͳϓϨϏϡʔํ๏ͷߟ
PreviewModifier ͱ ˏPreviewable ʹ͍ͭͯ
@Previewable ʹ͍ͭͯ @Previewable Xcode 16 ͰՃ͞ΕͨϚΫϩ ϓϩύςΟʔϥούʔʹରͯ͠దԠ͢Δ͜ͱ͕Ͱ͖Δ #Previewͷ෦Ͱ༻Մೳ iOS
ʹؔͯ͠ iOS 18 Ҏ্Ͱಈ࡞͢Δ
None
PreviewModifierʹ͍ͭͯ PreviewModi fi er Xcode 16 ͰՃ͞Εͨprotocol iOS ʹؔͯ͠
iOS 18 Ҏ্Ͱಈ࡞͢Δ
None
None
None
None
None
None
None
None
Context Context
Context Context View
Context Context View
Context Context View
None
͜ͷ2ͭͷػೳΛݟͨ࣌ʹͲ͏ࢥ͍·ͨ͠ ͔ʁ
͜ͷ2ͭͷػೳΛݟͨ࣌ʹͲ͏ࢥ͍·͔ͨ͠ʁ ݸਓతʹ͜ΕΒͷػೳΛ࠷ॳʹݟͨ࣌ʮѻ͏ͷ͕େͦ͠͏ʯͱࢥͬͨ
͜ͷ2ͭͷػೳΛݟͨ࣌ʹͲ͏ࢥ͍·͔ͨ͠ʁ ݸਓతʹ͜ΕΒͷػೳΛ࠷ॳʹݟͨ࣌ʮѻ͏ͷ͕େͦ͠͏ʯͱࢥͬͨ
͜ͷ2ͭͷػೳΛݟͨ࣌ʹͲ͏ࢥ͍·͔ͨ͠ʁ ݸਓతʹ͜ΕΒͷػೳΛ࠷ॳʹݟͨ࣌ʮѻ͏ͷ͕େͦ͠͏ʯͱࢥͬͨ
͜ͷ2ͭͷػೳΛݟͨ࣌ʹͲ͏ࢥ͍·͔ͨ͠ʁ makeSharedContext() ͷ͍ํ͕؊ʹͳΔ mockαʔόͱ௨৴͢Δʁ → PreviewͰͦ͜·Ͱ͢Δͷ͔ʁ ݸਓతʹ͜ΕΒͷػೳΛ࠷ॳʹݟͨ࣌ʮѻ͏ͷ͕େͦ͠͏ʯͱࢥͬͨ
PreviewModifier ͱ @PreviewableΛ׆ ༻ͨ͠ޮతͳϓϨϏϡʔํ๏ͷߟ
લఏͱͳΔViewͷ࡞ SNSͷλΠϜϥΠϯΛߟ͑Δ
લఏͱͳΔViewͷ࡞ SNSͷλΠϜϥΠϯΛߟ͑Δ ߘΛද͢ߏମΛఆٛ
લఏͱͳΔViewͷ࡞ SNSͷλΠϜϥΠϯΛߟ͑Δ ViewΛఆٛ [Post] Λ࣋ͪ body Ͱར༻
લఏͱͳΔViewͷ࡞
લఏͱͳΔViewͷ࡞
લఏͱͳΔViewͷ࡞ PreviewͰͬͱද͍ࣔͤͨ͞ʂ
લఏͱͳΔViewͷ࡞
લఏͱͳΔViewͷ࡞
લఏͱͳΔViewͷ࡞
લఏͱͳΔViewͷ࡞ ಡΈࠐΈ࣌ͷ Placeholder େৎ͔ͳʁ ໊લ͘ͳͬͨ࣌େৎ͔ͳʁ վߦ͞ΕͨΒେৎ͔ͳʁӳޠɾֆจࣈͷ࣌ େৎ͔ͳ ͍͍Ͷͷ͕ଟ͍࣌େৎ͔ͳ 0݅ͷ࣌ඇදࣔʹͳΔ͔ͳʁ
લఏͱͳΔViewͷ࡞ ඞཁͳύλʔϯͷ Post ΛՃ͢Ε ෳύλʔϯͷ Preview Մೳ ͔͠͠ӈਤͷΑ͏ʹ͔ͳΓݟͮΒ͘ͳΔ
લఏͱͳΔViewͷ࡞ ඞཁͳύλʔϯͷ Post ΛՃ͢Ε ෳύλʔϯͷ Preview Մೳ ͔͠͠ӈਤͷΑ͏ʹ͔ͳΓݟͮΒ͘ͳΔ @Previewable
PreviewModi fi er Λར༻͠ ղܾ͢Δ
@Previewable PreviewModifier Λར༻͠ղܾ͢Δ
@Previewable PreviewModifier Λར༻͠ղܾ͢Δ 1. JSONϑΝΠϧΛ࡞͠ɺඞཁͳσʔλΛՃ͢Δ
@Previewable PreviewModifier Λར༻͠ղܾ͢Δ 1. JSONϑΝΠϧΛ࡞͠ɺඞཁͳσʔλΛՃ͢Δ 1. ʢࠓճ ChatGPT Λར༻ͯ͠࡞ʣ
@Previewable PreviewModifier Λར༻͠ղܾ͢Δ 1. JSONϑΝΠϧΛ࡞͠ɺඞཁͳσʔλΛՃ͢Δ 1. ʢࠓճ ChatGPT Λར༻ͯ͠࡞ʣ
2. ʢ࡞͠Ճ͢Δ͚ͩͳͷͰׂѪʣ
@Previewable PreviewModifier Λར༻͠ղܾ͢Δ 1. JSONϑΝΠϧΛ࡞͠ɺඞཁͳσʔλΛՃ͢Δ 1. ʢࠓճ ChatGPT Λར༻ͯ͠࡞ʣ
2. ʢ࡞͠Ճ͢Δ͚ͩͳͷͰׂѪʣ 2. JSONϑΝΠϧΛಡΈࠐΈ decode ͠ Preview ʹೖ
@Previewable PreviewModifier Λར༻͠ղܾ͢Δ let posts: [Post] ͕ @Environment Ͱͳ͍߹
@Previewable Λར༻͢Δͱྑͦ͞͏
@Previewable PreviewModifier Λར༻͠ղܾ͢Δ
@Previewable PreviewModifier Λར༻͠ղܾ͢Δ .task {} ͘͠ .onAppear {} Λ
ར༻ͦ͠ͷதͰಡΈࠐΈΛߦ͏
@Previewable PreviewModifier Λར༻͠ղܾ͢Δ .task {} ͘͠ .onAppear {} Λ
ར༻ͦ͠ͷதͰಡΈࠐΈΛߦ͏ decode ͕ޭͨ͠Βɺposts ʹೖ ͢Δ
.task {} ͘͠ .onAppear {} Λ ར༻ͦ͠ͷதͰಡΈࠐΈΛߦ͏ decode ͕ޭͨ͠Βɺposts ʹೖ
͢Δ ෳͷύλʔϯͰ Preview ͕Մೳʹͳͬͨ 🎉
@Previewable PreviewModifier Λར༻͠ղܾ͢Δ let posts: [Post] ͕ @Environment Ͱ͋Δ߹
PreviewModi fi er Λར༻͢Δͱྑͦ͞͏
@Previewable PreviewModifier Λར༻͠ղܾ͢Δ
None
None
·ͱΊ
·ͱΊ Xcode 16͔ΒPreviewModi fi er ͱ @Previewable ͕Ճ͞Εͨ ͜ΕΒΛར༻͢Δ͜ͱͰ Preview
ͷମݧ͕ΑΓ্͢Δ JSONϑΝΠϧΛར༻͠ΤϯςΟςΟΛೖ͢Δ͜ͱͰগ͠ͷίʔυͰଟྔͷύλʔϯΛ Preview Ͱ֬ೝ͢Δ͜ͱ͕Մೳ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ