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
1.1k
4
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun
July 05, 2024
More Decks by ojun
See All by ojun
配列と所有権
ojun9
0
85
生成 AI 時代のスナップショットテストってやつを見せてあげますよ（α版）
ojun9
0
420
アセットのコンパイルについて
ojun9
0
280
Exit 8 for SwiftUI
ojun9
1
310
Swift Evolution かるた
ojun9
2
150
Catch Up with Swift 5.10
ojun9
2
930
Overview: Swift OpenAPI Generator
ojun9
3
2.6k
if 式と switch 式による SwiftUI のプレビューエラー対策
ojun9
1
2.3k
楽しい夏休み！String Catalogs で新しい発見
ojun9
0
2.6k
Other Decks in Programming
See All in Programming
実装をデザインガイドラインに追従させるための取り組み / 260731-dip-mosh-design-system
dachi023
0
4.9k
AI Engineeringは、AIプロダクトだけのものか？ 〜AIがソフトウェアを作る時代の新しい当たり前〜 / No AI in your product. AI Engineering in your development.
rkaga
4
470
Laravelで学ぶ Webアプリケーションチューニング入門/web_application_tuning_101
hanhan1978
4
1.9k
in-process GraphQL のすすめ #ginzajs
izumin5210
4
1.4k
バグを直したら useEffect が消えた
colorful12
3
630
変わらないものが、変わるものを決める — 意図駆動開発 × イベントソーシング × イミュータブル | What Doesn't Change Decides What Can — IDD × Event Sourcing × Immutability
tomohisa
0
1.8k
How I Won Prize Money at a Hackathon Using Codex and Symphony Alpha
yasei_no_otoko
0
110
VibeCodingからAgenticWorkflowへ
starfish719
0
640
torikago - Ruby::Boxで照らすモジュラモノリスの実行境界
se4weed
1
390
Detecting Compromised CI with eBPF and Cilium Tetragon
lizrice
0
210
2年かけて Deno に DOMMatrix を実装した話 / How I implemented DOMMatrix in Deno over two years
petamoriken
0
210
メールのエイリアス機能を履き違えない
isshinfunada
0
240
Featured
See All Featured
Utilizing Notion as your number one productivity tool
mfonobong
4
550
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
56k
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
490
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
2.1k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
350
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.9k
Skip the Path - Find Your Career Trail
mkilby
1
190
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
800
Unsuck your backbone
ammeep
672
58k
Done Done
chrislema
186
16k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.3k
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 Ͱ֬ೝ͢Δ͜ͱ͕Մೳ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
ojun9
dachi023
rkaga
hanhan1978
izumin5210
colorful12
tomohisa
yasei_no_otoko
starfish719
se4weed
lizrice
petamoriken
isshinfunada
mfonobong
aki_iinuma
marktimemedia
aleyda
minecr
mkilby
denniskardys
katarinadahlin
ammeep
chrislema
tammyeverts
![લఏͱͳΔViewͷ࡞ SNSͷλΠϜϥΠϯΛߟ͑Δ ViewΛఆٛ [Post] Λ࣋ͪ body Ͱར༻](https://files.speakerdeck.com/presentations/aa3ef61364f94b2280ea5a8808e405e0/slide_28.jpg){kind=link}
![@Previewable PreviewModifier Λར༻͠ղܾ͢Δ let posts: [Post] ͕ @Environment Ͱͳ͍߹](https://files.speakerdeck.com/presentations/aa3ef61364f94b2280ea5a8808e405e0/slide_43.jpg){kind=link}
![@Previewable PreviewModifier Λར༻͠ղܾ͢Δ let posts: [Post] ͕ @Environment Ͱ͋Δ߹](https://files.speakerdeck.com/presentations/aa3ef61364f94b2280ea5a8808e405e0/slide_48.jpg){kind=link}
