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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for ojun ojun
July 05, 2024
Programming
4
980

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
260
Swift Evolution かるた
Avatar for ojun ojun9
2
130
Catch Up with Swift 5.10
Avatar for ojun ojun9
2
890
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
380

Other Decks in Programming

See All in Programming
AI時代でも変わらない技術コミュニティの力～10年続く“ゆるい”つながりが生み出す価値
Avatar for Takehata Naoto n_takehata
2
720
米国のサイバーセキュリティタイムラインと見る Goの暗号パッケージの進化
Avatar for tom twinkle tomtwinkle
2
560
Claude Code Skill入門
Avatar for maya mayahoney
0
260
Ruby x Terminal
Avatar for Akira Matsuda a_matsuda
7
590
Claude Codeログ基盤の構築
Avatar for giginet giginet
PRO
7
2.9k
受け入れテスト駆動開発(ATDD)×AI駆動開発 AI時代のATDDの取り組み方を考える
Avatar for Takasaki Kazunari kztakasaki
2
560
Windows on Ryzen and I
Avatar for 瀬尾佳隆 seosoft
0
260
ロボットのための工場に灯りは要らない
Avatar for watany watany
10
2.7k
How to stabilize UI tests using XCTest
Avatar for Akio Itaya akkeylab
0
110
モジュラモノリスにおける境界をGoのinternalパッケージで守る
Avatar for magavel magavel
0
3.5k
Codexに役割を持たせる 他のAIエージェントと組み合わせる実務Tips
Avatar for o8n o8n
4
1.3k
SourceGeneratorのマーカー属性問題について
Avatar for tkym htkym
0
190

Featured

See All Featured
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
250
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.9k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
190
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
1
150
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.4k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.1k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
160
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k

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