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

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

Avatar for ojun ojun
July 05, 2024
Programming
1.1k
4

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

Avatar for ojun

ojun

July 05, 2024

More Decks by ojun

See All by ojun
配列と所有権
Avatar for ojun ojun9
0
81
生成 AI 時代のスナップショットテストってやつを見せてあげますよ（α版）
Avatar for ojun ojun9
0
410
アセットのコンパイルについて
Avatar for ojun ojun9
0
280
Exit 8 for SwiftUI
Avatar for ojun ojun9
1
300
Swift Evolution かるた
Avatar for ojun ojun9
2
140
Catch Up with Swift 5.10
Avatar for ojun ojun9
2
920
Overview: Swift OpenAPI Generator
Avatar for ojun ojun9
3
2.6k
if 式と switch 式による SwiftUI のプレビューエラー対策
Avatar for ojun ojun9
1
2.3k
楽しい夏休み！String Catalogs で新しい発見
Avatar for ojun ojun9
0
2.6k

Other Decks in Programming

See All in Programming
Google Apps Script で Ruby を動かす
Avatar for Shogo Kawahara kawahara
0
110
AI Engineeringは、AIプロダクトだけのものか？ 〜AIがソフトウェアを作る時代の新しい当たり前〜 / No AI in your product. AI Engineering in your development.
Avatar for r-kagaya rkaga
4
250
Terraform標準の組織で AWS CDKをどう使うか
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
1
410
Apache Hive: そしてCloud Native Lakehouseへ
Avatar for okumin okumin
1
180
Claude Team Plan導入・ガイド
Avatar for tk3fftk tk3fftk
0
240
Embedded SREと共に達成した会員管理システムのAWS移行 - SRE NEXT 2026 ランチスポンサーセッション
Avatar for ニフティ株式会社 niftycorp
PRO
1
3.2k
テーブルをDELETEした
Avatar for yuzneri yuzneri
0
120
ルールを書いて終わらせないハーネスエンジニアリング
Avatar for Yuji Yamaguchi yug1224
4
1.8k
属人化した知識を、 AIが辿れる地図にする
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
1
110
Haskell/Servantを通してWebミドルウェアを捉え直す
Avatar for pizzacat83 pizzacat83
1
620
「正の参照」と 「負の導出」で組む ハーネスエンジニアリング
Avatar for Masahiro Watanabe cottpan
1
150
yield再入門 #phpcon
Avatar for hideki kinjyo o0h
PRO
0
820

Featured

See All Featured
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
370
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
360
It's Worth the Effort
Avatar for 3n 3n
188
29k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
160
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
340
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.7k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.8k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k

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