Xcode Previews でUIKitベースのアプリ開発を効率化する - iOSDC Japan 2020

LFONB[ !NFSQBZ 9DPEF1SFWJFXTͰ6*,JUϕʔε ͷΞϓϦ։ൃΛޮ཰Խ͢Δ J04%$+"1"/ JPTED

9DPEF1SFWJFXTͱ͸

9DPEF1SFWJFXT

9DPEF1SFWJFXT 4XJGU6*ͷ 7JFXίʔυ

9DPEF1SFWJFXT 4XJGU6*ͷ 7JFXίʔυ 1SFWJFXίʔυ

9DPEF1SFWJFXT $BOWBT 4XJGU6*ͷ 7JFXίʔυ 1SFWJFXίʔυ

4XJGU6*ʹΑΔ։ൃϑϩʔ

6*,JUϕʔεͷΞϓϦ։ൃϑϩʔ Start Developing iOS Apps (Swift) https://developer.apple.com/library/archive/referencelibrary/GettingStarted/DevelopiOSAppsSwift/BuildABasicUI.html#//apple_ref/doc/uid/TP40015214-CH5-SW1

6*,JUϕʔεͷΞϓϦ։ൃϑϩʔ TUPSZCPBSEYJC Start Developing iOS Apps (Swift) https://developer.apple.com/library/archive/referencelibrary/GettingStarted/DevelopiOSAppsSwift/BuildABasicUI.html#//apple_ref/doc/uid/TP40015214-CH5-SW1

6*,JUϕʔεͷΞϓϦ։ൃϑϩʔ TUPSZCPBSEYJC 6*7JFX 6*7JFX$POUSPMMFS Start Developing iOS Apps (Swift) https://developer.apple.com/library/archive/referencelibrary/GettingStarted/DevelopiOSAppsSwift/BuildABasicUI.html#//apple_ref/doc/uid/TP40015214-CH5-SW1

6*,JUϕʔεͷΞϓϦ։ൃϑϩʔ 4JNVMBUPSىಈ TUPSZCPBSEYJC 6*7JFX 6*7JFX$POUSPMMFS Start Developing iOS Apps (Swift)
https://developer.apple.com/library/archive/referencelibrary/GettingStarted/DevelopiOSAppsSwift/BuildABasicUI.html#//apple_ref/doc/uid/TP40015214-CH5-SW1

6*,JUϕʔεͷΞϓϦ։ൃϑϩʔ 4JNVMBUPSىಈ ίʔυमਖ਼ TUPSZCPBSEYJC 6*7JFX 6*7JFX$POUSPMMFS Start Developing iOS Apps
(Swift) https://developer.apple.com/library/archive/referencelibrary/GettingStarted/DevelopiOSAppsSwift/BuildABasicUI.html#//apple_ref/doc/uid/TP40015214-CH5-SW1

6*,JUϕʔεͷΞϓϦ։ൃϑϩʔ 4JNVMBUPSىಈ ίʔυमਖ਼ TUPSZCPBSEYJC 6*7JFX 6*7JFX$POUSPMMFS Start Developing iOS Apps
(Swift) https://developer.apple.com/library/archive/referencelibrary/GettingStarted/DevelopiOSAppsSwift/BuildABasicUI.html#//apple_ref/doc/uid/TP40015214-CH5-SW1 ɾɾ

6*,JUWT4XJGU6*։ൃϑϩʔͷൺֱ w 4XJGU6*͸ɺ9DPEF1SFWJFXTΛ࢖͏͜ͱͰޮ཰Α͘Ϗϡʔͷ։ൃ͕ߦ͑Δ w ͔͠͠ݱঢ়ଟ͘ͷΞϓϦ͕·ͩ6*,JUϕʔε w 4XJGU6*΁ͷҠߦΛߦ͏ʹ͸J04ະຬͷαϙʔτΛ੾Δඞཁ͕͋Δ w 6*,JUϕʔεͷΞϓϦ։ൃΛ4XJGU6*ͷΑ͏ʹޮ཰ԽͰ͖ͳ͍͔ɾɾɾ

6*,JUWT4XJGU6*։ൃϑϩʔͷൺֱ w 4XJGU6*͸ɺ9DPEF1SFWJFXTΛ࢖͏͜ͱͰޮ཰Α͘Ϗϡʔͷ։ൃ͕ߦ͑Δ w ͔͠͠ݱঢ়ଟ͘ͷΞϓϦ͕·ͩ6*,JUϕʔε w 4XJGU6*΁ͷҠߦΛߦ͏ʹ͸J04ະຬͷαϙʔτΛ੾Δඞཁ͕͋Δ w 6*,JUϕʔεͷΞϓϦ։ൃΛ4XJGU6*ͷΑ͏ʹޮ཰ԽͰ͖ͳ͍͔ɾɾɾ ˠ6*,JUϕʔεͷΞϓϦ։ൃϑϩʔʹ9DPEF1SFWJFXTΛ
૊ΈࠐΉ

6*,JUϕʔεͷΞϓϦ։ൃϑϩʔ 9DPEF1SFWJFXT TUPSZCPBSEYJC 6*7JFX6*7JFX$POUSPMMFS

6*,JUϕʔεͷΞϓϦ։ൃϑϩʔ 9DPEF1SFWJFXT TUPSZCPBSEYJC 6*7JFX6*7JFX$POUSPMMFS 1SFWJFX

1SFWJFXίʔυͷॻ͖ํ

6*7JFX3FQSFTFOUBCMF 6*7JFX$POUSPMMFS3FQSFTFOUBCMF public protocol UIViewControllerRepresentable : View associatedtype UIViewControllerType :
UIViewController func makeUIViewController(context: Self.Context) -> Self.UIViewControllerType public protocol UIViewRepresentable : View { associatedtype UIViewType : UIView func makeUIView(context: Self.Context) -> Self.UIViewType w 6*7JFX6*7JFX$POUSPMMFSΛ4XJGU6*ͷ7JFXͱͯ͠ѻ͑Δ

1SFWJFX1SPWJEFS public protocol PreviewProvider { associatedtype Previews : View static
var previews: Self.Previews { get } w 9DPEFʹϓϨϏϡʔΛදࣔͤ͞ΔͨΊͷಛघͳϓϩτίϧ w 9DPEFͰ1SFWJFX1SPWJEFSͷίʔυΛ։͘ͱɺ9DPEF͕ͦΕΛݕ஌ɺ QSFWJFXTͰࢦఆͨ͠7JFXΛ$BOWBTͰϓϨϏϡʔදࣔ

class HelloView: UIView { private lazy var button: UIButton =
... ྫɿ7JFXͷ࣮૷

... ྫɿ7JFXͷ࣮૷ struct Input { let backgroundColor: UIColor let buttonTitle: String let isButtonEnabled: Bool } func apply(input: Input) { backgroundColor = input.backgroundColor button.setTitle(input.buttonTitle) button.isEnabled = input.isButtonEnabled } }

... ྫɿ7JFXͷ࣮૷ struct Input { let backgroundColor: UIColor let buttonTitle: String let isButtonEnabled: Bool } func apply(input: Input) { backgroundColor = input.backgroundColor button.setTitle(input.buttonTitle) button.isEnabled = input.isButtonEnabled } } IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED 4USVDUVSFZPVSBQQGPS4XJGU6*QSFWJFXT 1SFWJFXBCMFͳ7JFX 1SFWJFX 7JFX 7JFX.PEFM "QQ 7JFXͷঢ়ଶΛ஫ೖ 1SFWJFX࣌ ΞϓϦέʔγϣϯ࣮ߦ࣌

final class HelloViewRepresentable: UIViewRepresentable { let input: HelloView.Input init(input: HelloView.Input)
{ self.input = input } func makeUIView(context: Context) -> HelloView { let view = HelloView() view.apply(input: input) return view } ... } ྫɿ6*7JFX3FQSFTFOUBCMFͷ࣮૷

ྫɿ1SFWJFX1SPWJEFSͷ࣮૷ struct HelloView_Preview: PreviewProvider { static var previews: some View
{ Group { HelloViewRepresentable(input: .init( backgroundColor: .white, buttonTitle: "Click Me", isButtonEnabled: true)) HelloViewRepresentable(input: .init( backgroundColor: .yellow, buttonTitle: "Warning", isButtonEnabled: true)) HelloViewRepresentable(input: .init( backgroundColor: .lightGray, buttonTitle: "Disabled", isButtonEnabled: false)) } } }

&EJUPS$BOWBT ΋͘͠͸ $NE 0QUJPO &OUFS 1SFWJFX$BOWBTͷදࣔ

ϝϧϖΠͰͷ׆༻ྫ

ͦͷଞͷ׆༻ํ๏ w ϓϨϏϡʔͷը૾ΛΩϟϓνϟͯ͠ϓϧϦΫΤετͷઆ໌จʹషΔ w ը໘ͷ࢓༷Λ೺Ѳ͢ΔͨΊʹ1SFWJFXΛ࢖͏ w 1SFWJFXʹ࢖ͬͨ7JFXΛ4OBQTIPU5FTUʹྲྀ༻͢Δʢܭըதʣ

طଘͷϓϩδΣΫτʹ1SFWJFXΛ௥Ճ͢Δ

؀ڥ w 9DPEFҎ߱ w NBD04$BUBMJOBҎ߱

1SFWJFXίʔυͷ഑ஔઌλʔήοτ λʔήοτͷछผ 1SFWJFXͷදࣔ 1SFWJFXͷσόοά "QQMJDBUJPO ✅ ✅ 'SBNFXPSL ✅ ❌
4UBUJD-JCSBSZ ❌ ❌ 1SFWJFX༻ͷ"QQMJDBUJPO5BSHFUΛ࡞੒ͯ͠1SFWJFXίʔυΛ௥Ճ

J04ະຬͷαϙʔτ w 1SFWJFXΛ࢖༻͢Δʹ͸4XJGU6*ͷΠϯϙʔτ͕ඞཁ w J04ະຬͷ؀ڥͰ͸4XJGU6*͕Πϯϙʔτ͞Εͳ͍Α͏ʹ͢Δඞཁ͕͋Δ w ରԠ ϚΫϩΛ࢖ͬͯ1SFWJFXίʔυΛϏϧυ͔Βআ֎͢Δ w ରԠ
1SFWJFXઐ༻ͷλʔήοτΛ௥Ճ͢Δ

+ #if DEBUG && canImport(SwiftUI) import SwiftUI class HelloViewRepresentable: UIViewRepresentable
{ ... } + @available(iOS 13, *) struct HelloView_Preview: PreviewProvider { ... } + #endif J043FMFBTF/PUFT4XJGU6*,OPXO*TTVF ˞ʣ9DPEFͷόά w 9DPEF࢖༻࣌ͷΈ 0UIFS-JOLFS'MBHʹXFBL@GSBNFXPSL4XJGU6*Λ௥Ճ J04ະຬͷ؀ڥͰ͸ w 4XJGU6*ϞδϡʔϧͷΠϯϙʔτ w 1SFWJFXίʔυͷϩʔυ ͕εΩοϓ͞ΕΔ J04ະຬͷαϙʔτ ରԠ ϚΫϩΛ࢖ͬͯ1SFWJFXίʔυΛϏϧυ͔Βআ֎͢Δ

J04ະຬͷαϙʔτ ରԠ 1SFWJFXઐ༻ͷλʔήοτΛ௥Ճ͢Δ

J04ະຬͷαϙʔτ ରԠ 1SFWJFXઐ༻ͷλʔήοτΛ௥Ճ͢Δ 1SFWJFX༻ͷλʔήοτΛผ్࡞੒ %FQMPZNFOU5BSHFUJ04Y

J04ະຬͷαϙʔτ ରԠ 1SFWJFXઐ༻ͷλʔήοτΛ௥Ճ͢Δ 1SFWJFX༻ͷλʔήοτΛผ్࡞੒ %FQMPZNFOU5BSHFUJ04Y 1SFWJFX༻ͷλʔήοτʹ1SFWJFXίʔυΛ௥Ճ

J04ະຬͷαϙʔτ ରԠ 1SFWJFXઐ༻ͷλʔήοτΛ௥Ճ͢Δ 1SFWJFX༻ͷλʔήοτΛผ్࡞੒ %FQMPZNFOU5BSHFUJ04Y 7JFXίʔυ΋1SFWJFXλʔήοτʹ௥Ճ 1SFWJFX༻ͷλʔήοτʹ1SFWJFXίʔυΛ௥Ճ

J04ະຬͷαϙʔτ ରԠ 1SFWJFXઐ༻ͷλʔήοτΛ௥Ճ͢Δ 1SFWJFX༻ͷλʔήοτΛผ్࡞੒ %FQMPZNFOU5BSHFUJ04Y 7JFXίʔυ΋1SFWJFXλʔήοτʹ௥Ճ 1SFWJFX༻ͷλʔήοτʹ1SFWJFXίʔυΛ௥Ճ ˠ9DPEF(FOΛ࢖ͬͯ9DPEFϓϩδΣΫτΛࣗಈੜ੒͢Δͷ͕͓͢͢Ί 9DPEF(FOIUUQTHJUIVCDPNZPOBTLPMC9DPEF(FO

iOSDC2019 / ϞόΠϧܾࡁΞϓϦͷ࡞Γํ / How to develop a mobile payment
app IUUQTTQFBLFSEFDLDPNLFONB[IPXUPEFWFMPQBNPCJMFQBZNFOUBQQ w ϝϧΧϦΞϓϦ͸ػೳ͝ͱʹ'SBNFXPSLʹ ෼ׂ͞Ε͍ͯΔ w ֤'SBNFXPSLϓϩδΣΫτ͝ͱͷ 4BOECPYΞϓϦΛ࢖ͬͯ௨ৗ͸։ൃ ϝϧϖΠͰͷߏ੒ ˠ1SFWJFXίʔυ͸4BOECPYΞϓϦͷ λʔήοτʹ௥Ճ

9DPEF1SFWJFXTͷ࢓૊Έ

)FMMP7JFX1SFWJFXQSFWJFXUIVOLTXJGU

%ZOBNJD.FUIPE3FQMBDFNFOU w EZOBNJDΩʔϫʔυΛ෇͚ͨϝϯόʔͷ࣮૷Λɺ@EZOBNJD3FQMBDFNFOUଐੑΛ෇͚ ͨϝϯόʔͷ࣮૷ʹࠩ͠ସ͑Δػೳ 4XJGUd IUUQTHJUIVCDPNBQQMFTXJGUQVMM

%ZOBNJD.FUIPE3FQMBDFNFOU w EZOBNJDΩʔϫʔυΛ෇͚ͨϝϯόʔͷ࣮૷Λɺ@EZOBNJD3FQMBDFNFOUଐੑΛ෇͚ ͨϝϯόʔͷ࣮૷ʹࠩ͠ସ͑Δػೳ 4XJGUd public class Thing { public
dynamic var someNumber: Int { return 10 } } IUUQTHJUIVCDPNBQQMFTXJGUQVMM

dynamic var someNumber: Int { return 10 } } IUUQTHJUIVCDPNBQQMFTXJGUQVMM extension Thing { @_dynamicReplacement(for: someNumber) var newNumber: Int { return 43 } }

dynamic var someNumber: Int { return 10 } } IUUQTHJUIVCDPNBQQMFTXJGUQVMM extension Thing { @_dynamicReplacement(for: someNumber) var newNumber: Int { return 43 } } print(Thing().someNumber) //43

// HelloViewPreview.swift struct HelloView_Preview: PreviewProvider { static var previews: some
View { Group { HelloViewRepresentable( input: .init( backgroundColor: .white, buttonTitle: "Click Me", isButtonEnabled: true ) ) } } } // HelloViewPreview.3.preview-thunk.swift extension HelloView_Preview { @_dynamicReplacement(for: previews) private static var __preview__previews: some View { #sourceLocation(file: "/Users/kenmaz/Projects/iOSDC2020App/iOSDC2020App/HelloViewPreview.swift", line: 26) AnyView(__designTimeSelection(Group { __designTimeSelection(HelloViewRepresentable( input: .init( backgroundColor: .white, buttonTitle: __designTimeString( "#3084.[2].[0].property.[0].[0].arg[0].value.[0].arg[0].value.arg[1].value.[0].value", fallback: "Click Me"), isButtonEnabled: __designTimeBoolean( "#3084.[2].[0].property.[0].[0].arg[0].value.[0].arg[0].value.arg[2].value", fallback: true) ) ), "#3084.[2].[0].property.[0].[0].arg[0].value.[0]") }, "#3084.[2].[0].property.[0].[0]")) #sourceLocation() }

View { Group { HelloViewRepresentable( input: .init( backgroundColor: .white, buttonTitle: "Click Me", isButtonEnabled: true ) ) } } } // HelloViewPreview.3.preview-thunk.swift extension HelloView_Preview { @_dynamicReplacement(for: previews) private static var __preview__previews: some View { #sourceLocation(file: "/Users/kenmaz/Projects/iOSDC2020App/iOSDC2020App/HelloViewPreview.swift", line: 26) AnyView(__designTimeSelection(Group { __designTimeSelection(HelloViewRepresentable( input: .init( backgroundColor: .white, buttonTitle: __designTimeString( "#3084.[2].[0].property.[0].[0].arg[0].value.[0].arg[0].value.arg[1].value.[0].value", fallback: "Click Me"), isButtonEnabled: __designTimeBoolean( "#3084.[2].[0].property.[0].[0].arg[0].value.[0].arg[0].value.arg[2].value", fallback: true) ) ), "#3084.[2].[0].property.[0].[0].arg[0].value.[0]") }, "#3084.[2].[0].property.[0].[0]")) #sourceLocation() } ˞EZOBNJDΩʔϫʔυ͸Ϗϧυ࣌ʹ௥Ճ͞ΕΔʢΆ͍ʣ

ϑϧϏϧυ

දࣔ

ίʔυมߋ

ίʔυੜ੒

Ϗϧυ

EMPQFO

1JO1SFWJFX w 1JO1SFWJFXϘλϯΛԡ͢ͱɺ$BOWBTΛ։͍ͨ··ଞͷTXJGUϑΝΠϧ ΛฤूͰ͖Δ

1JO1SFWJFX w 1JO1SFWJFXϘλϯΛԡ͢ͱɺ$BOWBTΛ։͍ͨ··ଞͷTXJGUϑΝΠϧ ΛฤूͰ͖Δ w 1JO1SFWJFXΦϯʹ͢Δͱɺ 1SFWJFXίʔυҎ֎ͷTXJGUίʔ υʹରͯ͠΋QSFWJFXUIVOL͕ ੜ੒͞ΕΔ w
1SFWJFXίʔυҎ֎ͷมߋʹର ͯ͠΋ଈ࣌൓ө͕ޮ͘

View { Group { HelloViewRepresentable( input: .init( backgroundColor: .white, buttonTitle: "Click Me", isButtonEnabled: true ) ) } } } // HelloViewPreview.3.preview-thunk.swift extension HelloView_Preview { @_dynamicReplacement(for: previews) private static var __preview__previews: some View { #sourceLocation(file: "/Users/kenmaz/Projects/iOSDC2020App/iOSDC2020App/HelloViewPreview.swift", line: 26) AnyView(__designTimeSelection(Group { __designTimeSelection(HelloViewRepresentable( input: .init( backgroundColor: .white, buttonTitle: __designTimeString( "#3084.[2].[0].property.[0].[0].arg[0].value.[0].arg[0].value.arg[1].value.[0].value", fallback: "Click Me"), isButtonEnabled: __designTimeBoolean( "#3084.[2].[0].property.[0].[0].arg[0].value.[0].arg[0].value.arg[2].value", fallback: true) ) ), "#3084.[2].[0].property.[0].[0].arg[0].value.[0]") }, "#3084.[2].[0].property.[0].[0]")) #sourceLocation() }

@EFTJHO5JNF4USJOH@EFTJHO5JNF#PPMFBO buttonTitle: __designTimeString( "#3084.[2].[0].property.[0].[0].arg[0].value.[0].arg[0].value.arg[1].value.[0].value", fallback: "Click Me" )

w 9DPEF1SFWJFXTΛ࢖ͬͯ6*,JUϕʔεͷΞϓϦ։ൃΛޮ཰ԽͰ͖Δ w มߋ㲗֬ೝͷαΠΫϧͷߴ଎Խ w ͍ΖΜͳঢ়ଶͷϏϡʔΛҰ౓ʹදࣔɾ֬ೝͰ͖Δ w 1SFWJFXΛ࣮ߦՄೳͳը໘࢓༷ॻͱͯ͠ڞ༗Ͱ͖Δ w 9DPEF1SFWJFXTΛಋೖͯ͠طଘΞϓϦΛ4XJGU6*ͷ։ൃελΠϧʹدͤΔ
w 4XJGU6*΁ͷҠߦ͕ΑΓεϜʔζʹ ·ͱΊ

ࢀߟจݙ w "QQMF%FWFMPQFS4UBSU%FWFMPQJOHJ04"QQT 4XJGU w 88%$4USVDUVSFZPVSBQQGPS4XJGU6*QSFWJFXT w 88%$.BTUFSJOH9DPEF1SFWJFXT w
J043FMFBTF/PUFT4XJGU6*,OPXO*TTVF w (VBSETRVBSF%FWCMPH#FIJOE4XJGU6*1SFWJFXT w LBUFJOPJHBLVLVO*OTJEF4XJGU6* )PX)PUSFMPBEJOHJNQMFNFOUFE w BQQMFTXJGU%ZOBNJDGVODUJPOSFQMBDFNFOU w J04%$ϞόΠϧܾࡁΞϓϦͷ࡞Γํ)PXUPEFWFMPQBNPCJMFQBZNFOUBQQ w NFSDBSJFOHJOFFSJOH9DPEF1SFWJFXTΛ༻͍ͨ6*,JUϕʔεͷϓϩδΣΫτͷ։ൃޮ཰Խ

Xcode Previews でUIKitベースのアプリ開発を効率化する - iOSDC Japan 2020

Xcode Previews でUIKitベースのアプリ開発を効率化する - iOSDC Japan 2020

More Decks by Kentaro Matsumae

Featured

Transcript