EightのUI Component化の取り組み

Mobile Engineer Meetup by Sansan
https://sansan.connpass.com/event/121319/

Transcript

1. &JHIU
   ͷ
   6*
   $PNQPOFOU
   Խͷ
 औΓ૊Έ .PCJMF
   &OHJOFFS
   .FFUVQ
   CZ
   4BOTBO
    Տล
   խ࢙
2. Տล
   խ࢙
   4BOTBOࣄۀ෦
   1SPEVDU։ൃ෦
   ݉
   
 &JHIUࣄۀ෦
   &OHJOFFSJOH
   (SPVQ
 J04
   ΤϯδχΞ
   ೥݄
 4BOTBOגࣜձࣾʹ৽ଔೖࣾ
 &JHIU
   J04
   ͷ։ൃʹैࣄ
 ೥݄
 4BOTBO
   J04
   &JHIU
   J04
   ͷ։ൃʹैࣄ
3. 6*
   $PNQPOFOU
   w ΞϓϦέʔγϣϯͷը໘Λߏ੒͢Δ
   6*
   ෦඼
   w ྫ
   
   Ϣʔβʔ໊Λදࣔ͢Δ
   -BCFM
   w ྫ
   
   ϢʔβʔΞΠίϯΛදࣔ͢Δ
   *NBHF7JFX
4. w GPOU
   TJ[F
   
   QU
   w GPOU
   DPMPS
   
   #MBDL
   w GPOU
   XFJHIU
   
   TFNJCPME
5. w GPOU
   TJ[F
   
   QU
   w GPOU
   DPMPS
   
   8IJUF
   w GPOU
   XFJHIU
   
   TFNJCPME
   w IFJHIU
   
   QU
   w CBDLHSPVOE
   DPMPS
   
   #MVF
   w CPSEFS
   DPMPS
   
   $MFBS
6. 6*
   $PNQPOFOU
   ԽʹऔΓ૊Μͩഎܠ w ҰͭҰͭͷ
   6*
   ෦඼ʹରͯ͠
   4UZMF
   Λઃఆ͢Δͷ͸ඇޮ཰
   w ઃఆͰϛεΛ͢ΔՄೳੑ΋͋Δ
   w σβΠϯ࢓༷ʹมߋ͕͋ͬͨ৔߹ʹɺमਖ਼࡞ۀ͕ඇޮ཰
   w ը໘୯ҐͰͷमਖ਼͕ඞཁ
7. 6*
   $PNQPOFOU
   Խͷ໨త w ։ൃͷޮ཰Խ
   w σβΠϯͷ౷Ұײ
   ੔߹ੑͷ୲อ
8. ։ൃͷޮ཰Խ w ΧϓηϧԽ͞Ε͍ͯΔ
   w ࠶ར༻Մೳ
   w ஔ׵Մೳ
9. σβΠϯͷ౷Ұײ
   ੔߹ੑͷ୲อ w ελΠϧΨΠυͷఆٛ
   w ελΠϧΨΠυʹԊͬͨσβΠϯఆٛ
   w &JHIU
   Ͱ͸
   5FYU4UZMF
   Λఆٛ
10. 5FYU4UZMF
    w 5FYU
    ͷ
    4UZMF
    Λఆٛͨ͠ελΠϧΨΠυ
    w &JHIU
    Ͱ͸ɺGPOU
    TJ[F
    GPOU
    DPMPS
    GPOU
    XFJHIU
    MJOF
    TQBDF
    ͷ
    
    ͭͷଐੑΛఆٛ
11. 5FYU4UZMF
    ͷ໋໊  GPOU
    DPMPS
    GPOU
    TJ[F
    GPOU
    XFJHIU
    Λ௚઀తʹ໋໊ʁ
 ྫ
    
    CMBDL8
     GPOU
    DPMPS
    GPOU
    TJ[F
    GPOU
    XFJHIU
    Λந৅తʹ໋໊ʁ
 ྫ
    
    CPEZ
     GPOU
    DPMPS
    GPOU
    TJ[F
    GPOU
    XFJHIU
    Λจ຺ʹԠ໋໊ͯ͡ʁ
 ྫ
    
    GFFE#PEZ
12.  GPOU
    DPMPS
    GPOU
    TJ[F
    GPOU
    XFJHIU
    Λ௚઀తʹ໋໊
    w 1SPT
    
    ໊લ͔Β
    4UZMF
    ͕Πϝʔδ͠΍͍͢
    w $POT
    
    มߋʹऑ͍
     GPOU
    DPMPS
    GPOU
    TJ[F
    GPOU
    XFJHIU
    Λந৅తʹ໋໊
    w 1SPT
    
    มߋʹڧ͍
    w $POT
    
    ໊લ͔Β
    4UZMF
    ͕Πϝʔδ͠ʹ͍͘
     GPOU
    DPMPS
    GPOU
    TJ[F
    GPOU
    XFJHIU
    Λจ຺ʹԠ໋໊ͯ͡
    w 1SPT
    
    Ͳͷ
    5FYU4UZMF
    Λઃఆͨ͠Βྑ͍͔Πϝʔδ͠΍͍͢
    
    w $POT
    
    จ຺͝ͱʹ
    5FYU4UZMF
    Λఆٛ͢Δඞཁ͕͋Δ
13.  GPOU
    DPMPS
    GPOU
    TJ[F
    GPOU
    XFJHIU
    Λ௚઀తʹ໋໊
    w 1SPT
    
    ໊લ͔Β
    4UZMF
    ͕Πϝʔδ͠΍͍͢
    w $POT
    
    มߋʹऑ͍
     GPOU
    DPMPS
    GPOU
    TJ[F
    GPOU
    XFJHIU
    Λந৅తʹ໋໊
    w 1SPT
    
    มߋʹڧ͍
    w $POT
    
    ໊લ͔Β
    4UZMF
    ͕Πϝʔδ͠ʹ͍͘
     GPOU
    DPMPS
    GPOU
    TJ[F
    GPOU
    XFJHIU
    Λจ຺ʹԠ໋໊ͯ͡
    w 1SPT
    
    Ͳͷ
    5FYU4UZMF
    Λઃఆͨ͠Βྑ͍͔Πϝʔδ͠΍͍͢
    
    w $POT
    
    จ຺͝ͱʹ
    5FYU4UZMF
    Λఆٛ͢Δඞཁ͕͋Δ
14. w ;FQMJO
    Ͱ֤
    7JFX
    ʹ
    5FYU4UZMF
    ໊Λهࡌ
    w ΤϯδχΞ͸
    5FYU4UZMF
    ໊
 ͚ͩΛҙࣝ
15. enum TextStyle: String { case Header case Body private typealias StyleDefinition = (size: CGFloat, color: UIColor, weight: UIFont.Weight, lineSpacing: CGFloat) private var definition: StyleDefinition { switch self { case .Header: return (size: 19.0, color: EightColor.white, weight: .semibold, lineSpacing: 4.0) case .Body: return (size: 15.0, color: EightColor.veryDarkGray, weight: .regular, lineSpacing: 3.0) } } var size: CGFloat { return definition.size } var weight: UIFont.Weight { return definition.weight } var font: UIFont { return UIFont.systemFont(ofSize: size, weight: weight) } ɾɾɾ }
16. &JHIU
    Ͱ
    $PNQPOFOU
    Խ͞Ε͍ͯΔ΋ͷ w 6*-BCFM
    w 6*5FYU7JFX
    w 6**NBHF7JFX
    w 6*#VUUPO
17. &JHIU
    Ͱ
    $PNQPOFOU
    Խ͞Ε͍ͯΔ΋ͷ w 6*-BCFM
    w 6*5FYU7JFX
    w 6**NBHF7JFX
    w 6*#VUUPO
18. 6*-BCFM
    Λ
    $PNQPOFOU
    Խͨ͠
    &JHIU-BCFM w *#%FTJHOBCMF
    Ͱఆٛ͢Δ͜ͱͰ
    *OUFSGBDF
    #VJMEFS
    ʹ
 5FYU4UZMF
    Λ൓ө
    w *#*OTQFDUBCMF
    Λఆٛ͢Δ͜ͱͰ
    9DPEF
    ͷ
    "UUSJCVUF
    *OTQFDUPS
    ͔Β
    5FYU4UZMF
    ΛઃఆՄೳʹ
19. @IBDesignable final class EightLabel: UILabel { @IBInspectable var style: String = "Body" { didSet { setTextFont() } } } private extension EightLabel { var textStyle: TextStyle { guard let textStyle = TextStyle(rawValue: style) else { fatalError("\(style) is undefined TextStyle") } return textStyle } func setTextFont() { font = textStyle.font textColor = textStyle.color } }
20. &JHIU-BCFM
    ʹ
    5FYU4UZMF
    ͷ൓ө
21. ؔ৺ͷ෼཭ w 4UPSZCPBSE
    Ͱ͸
    7JFX
    Λ഑ஔͯ͠ɺ$MBTT
    5FYU4UZMF
    Λࢦఆ͢Δ
    w $PNQPOFOU
    Ͱ͸
    7JFX
    ͷ
    4UZMF
    Λઃఆ͢Δ
    w 4UZMF
    ͷઃఆ͕
    4UPSZCPBSE
    ͱίʔυͷ྆ํͰߦΘΕΔ໰୊Λղܾ
22. *OUFSGBDF
    #VJMEFS
    ͷݟͨ໨ͱ
 ࣮ߦ݁ՌΛҰகͤ͞Δ w ಈ࡞֬ೝʹֻ͔Δ࣌ؒΛ୹ॖ
    w ฤू͢Δ΂͖
    'JMF
    7JFX
    ͷൃݟΛ༰қʹ
23. ·ͱΊ w 6*
    $PNQPOFOU
    ͷಋೖʹ͸ɺΤϯδχΞͱσβΠφʔ ͷڠۀ͕ඞཁ
    w 6*
    $PNQPOFOU
    ͷಋೖίετ͸গ͠ߴ͍͕ɺ௕ظతʹ ߟ͑ΔͱಘΒΕΔϝϦοτ͕େ͖͍
24. ࠓ೔࿩ͤͳ͔ͬͨ͜ͱ w $PMPS
    ͷఆٛʹ͍ͭͯ
    w &JHIU-BCFM
    Ҏ֎ͷ
    $PNQPOFOU
    Խ͍ͯ͠Δ΋ͷ ؾʹͳΔํ͸࠙਌ձͰ