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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for ojun ojun
July 05, 2024
Programming
4
970

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
180
Exit 8 for SwiftUI
Avatar for ojun ojun9
1
250
Swift Evolution かるた
Avatar for ojun ojun9
2
120
Catch Up with Swift 5.10
Avatar for ojun ojun9
2
880
Overview: Swift OpenAPI Generator
Avatar for ojun ojun9
3
2.5k
if 式と switch 式による SwiftUI のプレビューエラー対策
Avatar for ojun ojun9
1
2.1k
楽しい夏休み！String Catalogs で新しい発見
Avatar for ojun ojun9
0
2.4k
ユニットテストを学んだ次に知りたかったApple標準APIに対するテストのやり方
Avatar for ojun ojun9
1
470
ハッカソンにおけるiOSアプリ開発での学びと楽しさ
Avatar for ojun ojun9
1
370

Other Decks in Programming

See All in Programming
日本だけで解禁されているアプリ起動の方法
Avatar for Ryu-nakayama ryunakayama
0
350
Head of Engineeringが現場で回した生産性向上施策 2025→2026
Avatar for gessy0129 gessy0129
PRO
0
180
15年目のiOSアプリを1から作り直す技術
Avatar for TAKEDA Yuki teakun
0
460
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
220
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
Avatar for とすり tosuri13
5
880
浮動小数の比較について
Avatar for Kishikawa Katsumi kishikawakatsumi
0
310
その「common」ディレクトリ、腐っていませんか？
Avatar for kinocoboy kinocoboy2
1
100
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
Avatar for Masahiro Nishimi masahiro_nishimi
7
1.1k
文字コードの話
Avatar for Masaki Hara qnighy
36
13k
Oxlint JS plugins
Avatar for kazupon kazupon
1
1.1k
AIプロダクト時代のQAエンジニアに求められること
Avatar for imtnd imtnd
1
440
AI巻き込み型コードレビューのススメ
Avatar for Nealle nealle
2
2.2k

Featured

See All Featured
Done Done
Avatar for chrislema chrislema
186
16k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
3
230
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Side Projects
Avatar for Sacha Greif sachag
455
43k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
450
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
210
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
200
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ