Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Xcode 16のPreviewModifierと@Previewableを活用した効率的なプ...

Avatar for ojun ojun
July 05, 2024
Programming
4
880

Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察

Avatar for ojun

ojun

July 05, 2024
Tweet

More Decks by ojun

See All by ojun
アセットのコンパイルについて
Avatar for ojun ojun9
0
110
Exit 8 for SwiftUI
Avatar for ojun ojun9
1
200
Swift Evolution かるた
Avatar for ojun ojun9
2
110
Catch Up with Swift 5.10
Avatar for ojun ojun9
2
850
Overview: Swift OpenAPI Generator
Avatar for ojun ojun9
3
2.3k
if 式と switch 式による SwiftUI のプレビューエラー対策
Avatar for ojun ojun9
1
1.9k
楽しい夏休み！String Catalogs で新しい発見
Avatar for ojun ojun9
0
2.3k
ユニットテストを学んだ次に知りたかったApple標準APIに対するテストのやり方
Avatar for ojun ojun9
1
440
ハッカソンにおけるiOSアプリ開発での学びと楽しさ
Avatar for ojun ojun9
1
340

Other Decks in Programming

See All in Programming
TDD 実践ミニトーク
Avatar for Daisuke Garaike contour_gara
1
290
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
Avatar for Takumi Abe east_takumi
0
370
速いWebフレームワークを作る
Avatar for Yusuke Wada yusukebe
5
1.7k
KessokuでDIでもgoroutineを活用する / Go Connect #6
Avatar for mazrean mazrean
0
140
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
Avatar for Jonghyuk Max Kim mmmaxkim
0
1.4k
CJK and Unicode From a PHP Committer
Avatar for てきめん tekimen youkidearitai
PRO
0
110
ProxyによるWindow間RPC機構の構築
Avatar for syumai syumai
3
1k
RDoc meets YARD
Avatar for Masafumi Okura okuramasafumi
4
160
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
Avatar for NakamuraTakumi nyatinte
7
1k
AWS発のAIエディタKiroを使ってみた
Avatar for 入井 啓太 iriikeita
1
160
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
Avatar for Tomoki Kobayashi temoki
0
230
MLH State of the League: 2026 Season
Avatar for Swift theycallmeswift
0
220

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
61k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
70
4.8k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.9k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
268
13k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k

Transcript

  1. potatotips #88 iOS/Android։ൃTipsڞ༗ձ 2024/07/05 @STORES Xcode 16ͷPreviewModifierͱ@Previewable Λ׆༻ͨ͠ޮ཰తͳϓϨϏϡʔํ๏ͷߟ࡯ ojun -

    DeNA Co., Ltd.

  2. ࣗݾ঺հʢojunʣ • name: ojun • 2023೥৽ଔೖࣾ • iOSΤϯδχΞ @ojun_9

  3. Xcode 16ͷ PreviewModifier ͱ @Previewable Λ׆༻ͨ͠ޮ཰తͳϓϨϏϡʔํ๏ͷߟ࡯

  4. PreviewModifier ͱ ˏPreviewable ʹ͍ͭͯ

  5. @Previewable ʹ͍ͭͯ @Previewable ͸ Xcode 16 Ͱ௥Ճ͞ΕͨϚΫϩ ϓϩύςΟʔϥούʔʹରͯ͠దԠ͢Δ͜ͱ͕Ͱ͖Δ #Previewͷ಺෦Ͱ௚઀࢖༻Մೳ iOS

    ʹؔͯ͠͸ iOS 18 Ҏ্Ͱಈ࡞͢Δ
  6. None

  7. PreviewModifierʹ͍ͭͯ PreviewModi fi er ͸ Xcode 16 Ͱ௥Ճ͞Εͨprotocol iOS ʹؔͯ͠͸

    iOS 18 Ҏ্Ͱಈ࡞͢Δ
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None

  16. Context Context

  17. Context Context View

  18. Context Context View

  19. Context Context View

  20. None

  21. ͜ͷ2ͭͷػೳΛݟͨ࣌ʹͲ͏ࢥ͍·ͨ͠ ͔ʁ

  22. ͜ͷ2ͭͷػೳΛݟͨ࣌ʹͲ͏ࢥ͍·͔ͨ͠ʁ ݸਓతʹ͸͜ΕΒͷػೳΛ࠷ॳʹݟͨ࣌͸ʮѻ͏ͷ͕େ෼೉ͦ͠͏ʯͱࢥͬͨ

  23. ͜ͷ2ͭͷػೳΛݟͨ࣌ʹͲ͏ࢥ͍·͔ͨ͠ʁ ݸਓతʹ͸͜ΕΒͷػೳΛ࠷ॳʹݟͨ࣌͸ʮѻ͏ͷ͕େ෼೉ͦ͠͏ʯͱࢥͬͨ

  24. ͜ͷ2ͭͷػೳΛݟͨ࣌ʹͲ͏ࢥ͍·͔ͨ͠ʁ ݸਓతʹ͸͜ΕΒͷػೳΛ࠷ॳʹݟͨ࣌͸ʮѻ͏ͷ͕େ෼೉ͦ͠͏ʯͱࢥͬͨ

  25. ͜ͷ2ͭͷػೳΛݟͨ࣌ʹͲ͏ࢥ͍·͔ͨ͠ʁ makeSharedContext() ͷ࢖͍ํ͕؊ʹͳΔ mockαʔόͱ௨৴͢Δʁ → PreviewͰͦ͜·Ͱ͢Δͷ͔ʁ ݸਓతʹ͸͜ΕΒͷػೳΛ࠷ॳʹݟͨ࣌͸ʮѻ͏ͷ͕େ෼೉ͦ͠͏ʯͱࢥͬͨ

  26. PreviewModifier ͱ @PreviewableΛ׆ ༻ͨ͠ޮ཰తͳϓϨϏϡʔํ๏ͷߟ࡯

  27. લఏͱͳΔViewͷ࡞੒ SNSͷλΠϜϥΠϯΛߟ͑Δ

  28. લఏͱͳΔViewͷ࡞੒ SNSͷλΠϜϥΠϯΛߟ͑Δ ౤ߘΛද͢ߏ଄ମΛఆٛ

  29. લఏͱͳΔViewͷ࡞੒ SNSͷλΠϜϥΠϯΛߟ͑Δ ViewΛఆٛ [Post] Λ࣋ͪ body Ͱར༻

  30. લఏͱͳΔViewͷ࡞੒

  31. લఏͱͳΔViewͷ࡞੒

  32. લఏͱͳΔViewͷ࡞੒ PreviewͰ΋ͬͱද͍ࣔͤͨ͞ʂ

  33. લఏͱͳΔViewͷ࡞੒

  34. લఏͱͳΔViewͷ࡞੒

  35. લఏͱͳΔViewͷ࡞੒

  36. લఏͱͳΔViewͷ࡞੒ ಡΈࠐΈ࣌ͷ Placeholder େৎ෉͔ͳʁ ໊લ௕͘ͳͬͨ࣌େৎ෉͔ͳʁ վߦ͞ΕͨΒେৎ෉͔ͳʁӳޠɾֆจࣈͷ࣌ େৎ෉͔ͳ ͍͍Ͷͷ਺͕ଟ͍࣌େৎ෉͔ͳ 0݅ͷ࣌ඇදࣔʹͳΔ͔ͳʁ

  37. લఏͱͳΔViewͷ࡞੒ ඞཁͳύλʔϯͷ Post Λ௥Ճ͢Ε͹ ෳ਺ύλʔϯͷ Preview ͸Մೳ ͔͠͠ӈਤͷΑ͏ʹ͔ͳΓݟͮΒ͘ͳΔ

  38. લఏͱͳΔViewͷ࡞੒ ඞཁͳύλʔϯͷ Post Λ௥Ճ͢Ε͹ ෳ਺ύλʔϯͷ Preview ͸Մೳ ͔͠͠ӈਤͷΑ͏ʹ͔ͳΓݟͮΒ͘ͳΔ @Previewable ΍

    PreviewModi fi er Λར༻͠ ղܾ͢Δ

  39. @Previewable ΍ PreviewModifier Λར༻͠ղܾ͢Δ

  40. @Previewable ΍ PreviewModifier Λར༻͠ղܾ͢Δ 1. JSONϑΝΠϧΛ࡞੒͠ɺඞཁͳσʔλΛ௥Ճ͢Δ

  41. @Previewable ΍ PreviewModifier Λར༻͠ղܾ͢Δ 1. JSONϑΝΠϧΛ࡞੒͠ɺඞཁͳσʔλΛ௥Ճ͢Δ 1. ʢࠓճ͸ ChatGPT Λར༻ͯ͠࡞੒ʣ

  42. @Previewable ΍ PreviewModifier Λར༻͠ղܾ͢Δ 1. JSONϑΝΠϧΛ࡞੒͠ɺඞཁͳσʔλΛ௥Ճ͢Δ 1. ʢࠓճ͸ ChatGPT Λར༻ͯ͠࡞੒ʣ

    2. ʢ࡞੒͠௥Ճ͢Δ͚ͩͳͷͰׂѪʣ

  43. @Previewable ΍ PreviewModifier Λར༻͠ղܾ͢Δ 1. JSONϑΝΠϧΛ࡞੒͠ɺඞཁͳσʔλΛ௥Ճ͢Δ 1. ʢࠓճ͸ ChatGPT Λར༻ͯ͠࡞੒ʣ

    2. ʢ࡞੒͠௥Ճ͢Δ͚ͩͳͷͰׂѪʣ 2. JSONϑΝΠϧΛಡΈࠐΈ decode ͠ Preview ʹ஫ೖ

  44. @Previewable ΍ PreviewModifier Λར༻͠ղܾ͢Δ let posts: [Post] ͕ @Environment Ͱͳ͍৔߹͸

    @Previewable Λར༻͢Δͱྑͦ͞͏

  45. @Previewable ΍ PreviewModifier Λར༻͠ղܾ͢Δ

  46. @Previewable ΍ PreviewModifier Λར༻͠ղܾ͢Δ .task {} ΋͘͠͸ .onAppear {} Λ

    ར༻ͦ͠ͷதͰಡΈࠐΈΛߦ͏

  47. @Previewable ΍ PreviewModifier Λར༻͠ղܾ͢Δ .task {} ΋͘͠͸ .onAppear {} Λ

    ར༻ͦ͠ͷதͰಡΈࠐΈΛߦ͏ decode ͕੒ޭͨ͠Βɺposts ʹ୅ೖ ͢Δ

  48. .task {} ΋͘͠͸ .onAppear {} Λ ར༻ͦ͠ͷதͰಡΈࠐΈΛߦ͏ decode ͕੒ޭͨ͠Βɺposts ʹ୅ೖ

    ͢Δ ෳ਺ͷύλʔϯͰ Preview ͕Մೳʹͳͬͨ 🎉

  49. @Previewable ΍ PreviewModifier Λར༻͠ղܾ͢Δ let posts: [Post] ͕ @Environment Ͱ͋Δ৔߹͸

    PreviewModi fi er Λར༻͢Δͱྑͦ͞͏

  50. @Previewable ΍ PreviewModifier Λར༻͠ղܾ͢Δ

  51. None
  52. None

  53. ·ͱΊ

  54. ·ͱΊ Xcode 16͔ΒPreviewModi fi er ͱ @Previewable ͕௥Ճ͞Εͨ ͜ΕΒΛར༻͢Δ͜ͱͰ Preview

    ͷମݧ͕ΑΓ޲্͢Δ JSONϑΝΠϧΛར༻͠ΤϯςΟςΟΛ஫ೖ͢Δ͜ͱͰগ͠ͷίʔυͰଟྔͷύλʔϯΛ Preview Ͱ֬ೝ͢Δ͜ͱ͕Մೳ

  55. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ