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

Introducing CodeLayout with Tips

satoshin21
March 28, 2018

Introducing CodeLayout with Tips

AKIBA.swift × エウレカ

satoshin21

March 28, 2018
Tweet

More Decks by satoshin21

Other Decks in Technology

Transcript

  1. Copyright © 2017 eureka, Inc. All rights reserved.
    ίʔυϨΠΞ΢τͷεεϝ
    Introducing CodeLayout
    with Tips

    View full-size slide

  2. Copyright © 2017 eureka, Inc. All rights reserved.
    2
    $ whoami
    !TBUPTIJO
    QBJST+1J04"QQMJDBUJPO&OHJOFFSBUFVSFLB *OD
    J04 "OESPJE "QQMF4DSJQU 5ZQF4DSJQUษڧத

    .BSWFM$JOFNBUJD6OJWFSTFେ޷͖

    View full-size slide

  3. Copyright © 2017 eureka, Inc. All rights reserved.
    3
    Agenda
    Ͳ͏ͯ͠*OUFSGBDF#VJMEFSΛ࢖Θͳ͍ܾஅΛͨ͠ͷ͔
    ίʔυϨΠΞ΢τͷਏ͍ॴ
    ίʔυϨΠΞ΢τΛΩϨΠʹॻ͘ҝʹ

    View full-size slide

  4. Copyright © 2017 eureka, Inc. All rights reserved.
    4
    Target audience
    ݱࡏ*OUFSGBDF#VJMEFSΛ࢖͍ͬͯͯɺਏ͞Λײ͍ͯ͡Δ
    TUPSZCPBSEͱYJCͷϨϏϡʔ͕ਏ͍
    ͔͠͠ɺίʔυϨΠΞ΢τ͸ίʔυྔ͕૿͑ͦ͏Ͱ᪳᪯͍ͯ͠Δ

    View full-size slide

  5. Copyright © 2017 eureka, Inc. All rights reserved.
    5
    pairs Japan
    *OUFSGBDF#VJMEFS࢖͍ͬͯ·ͤΜ
    "VUP-BZPVU͸࢖͍ͬͯ·͢

    View full-size slide

  6. Copyright © 2017 eureka, Inc. All rights reserved.
    6
    pairs Global
    *OUFSGBDF#VJMEFS࢖͍ͬͯ·ͤΜ
    5FYUVSF :PHBͳͲ"VUP-BZPVUҎ֎ͷϨΠΞ΢τΤϯδϯͱ"VUP-BZPVU
    ΛҰॹʹ࢖͍ͬͯ·͢

    View full-size slide

  7. Կނ
    Interface builderΛ
    ࢖Θͳ͍ͷ͔

    View full-size slide

  8. Copyright © 2017 eureka, Inc. All rights reserved.
    8
    IBOutlet, IBAction
    *NQMJDJUMZ6OXSBQQFE0QUJPOBM
    *#ͱίʔυͷඥ෇͚๨Εʹؾ͖ͮʹ͍͘
    *OJUJBMJ[FSͰͷ6*ఆ͕ٛͰ͖ͳ͍
    ΄ΜͱʹOJMͷϋϯυϦϯάͰ͖ͯΔʁ
    3YͳͲʹΑΓΠϕϯτʹΑΓ6*ͷૢ࡞ൃੜ࣌ͳͲ

    View full-size slide

  9. Copyright © 2017 eureka, Inc. All rights reserved.
    9
    Segue͕ਏ͍
    QSFQBSF'PS4FHVFTFOEFSʹॳظԽͷॲཧΛ·ͱΊͳ͚Ε͹ͳΒͳ͍
    QFSGPSN4FHVFͷ*EFOUJpFS͸4USJOH
    ͭΒ͍

    View full-size slide

  10. Copyright © 2017 eureka, Inc. All rights reserved.
    10
    Continuous Developingʹ޲͔ͳ͍(ؾ͕͢Δ)
    ॳճߏங࣌͸&NQUZ7JFX͕͚ͭͩͩͬͨͩͬͨΒ*#্Ͱɾɾ
    &NQUZ7JFXͷछྨ͕௥Ճ͞Εͨ
    4UPSZCPBSE্Ͱ௥Ճ͢Δ
    ·ͨ&NQUZ7JFXͷछྨ͕௥Ճ͞Εͨ
    -

    View full-size slide

  11. Copyright © 2017 eureka, Inc. All rights reserved.
    12
    Continuous Developingʹ޲͔ͳ͍(ؾ͕͢Δ)
    7JFX͕ॏͳΓ߹͏஍ࠈ
    ࠷ॳͷઃܭͷ໰୊ͩͬͨՄೳੑ͕ߴ͍͕ɺ*OUFSGBDF#VJMEFS্Ͱ੍໿Λ
    อͬͨ··ϨΠΞ΢τ࢓༷Λมߋ͢Δͷ͸ࠔ೉
    ಈతͳϨΠΞ΢τมߋͩͱঘߋ

    View full-size slide

  12. Copyright © 2017 eureka, Inc. All rights reserved.
    13
    try! Swift After TalksͰ࿩ͨ͜͠ͱ
    6*7JFXͷBUUSJCVUFTͲ͜Ͱఆٛ͢Δͷ໰୊
    4UPSZCPBSEYJCͷSFWJFXਏ͍Α໰୊

    View full-size slide

  13. ίʔυϨΠΞ΢τʹ
    Ҡߦͯ͠1೥
    தʑ͏·͘΍Ε͍ͯΔ

    View full-size slide

  14. ίʔυϨΠΞ΢τͰ
    Կ͕มΘ͔ͬͨ

    View full-size slide

  15. Copyright © 2017 eureka, Inc. All rights reserved.
    16
    ViewControllerͷ։ൃʹ੍ݶ͕ͳ͘ͳͬͨ
    JOJUJBMJ[FSͰͷґଘੑ஫ೖ
    JOJUJBMJ[FSͷ׆༻ͷ෯͕޿͕ͬͨ
    (FOFSJDTΛ༻͍ͯ7JFX$POUSPMMFSΛ։ൃ
    ίʔυ͸ޙ΄Ͳ

    View full-size slide

  16. Copyright © 2017 eureka, Inc. All rights reserved.
    17
    ܧଓత։ൃ͕͠΍͍͢
    "#ςετ͕ͱʹ͔͘͠΍͍͢
    6*ύʔπͷࠩ͠ସ͑΋*#ʹൺ΂ͯ҆қ
    ঢ়ଶʹΑͬͯϨΠΞ΢τ͕੾ΓସΘΔ࢓༷͸ίʔυʹ͢Δ͜ͱͰ࣮ݱ͠΍
    ͘͢ͳͬͨ

    View full-size slide

  17. Copyright © 2017 eureka, Inc. All rights reserved.
    18
    ͦͷଞ
    BUUSJCVUFT͸ίʔυ্Ͱఆٛ͢ΔͷΈ
    SFWJFX͸4UPSZCPBSEYJC YNM
    ʹൺ΂ͯ֨ஈʹ͠қ͍
    3FWJFXFS DPOqJDUमਖ਼͕҆қʹ

    View full-size slide

  18. Copyright © 2017 eureka, Inc. All rights reserved.
    19
    AutoLayout
    ͨͩɺKQ͸ະͩ"VUP-BZPVUΛ࢖͍ͬͯΔ
    ݱߦҠߦ͢Δʹ͸5FYUVSF౳ͷֶशίετ͕ߴ͍
    "VUP-BZPVUʹݶքΛײ͍ͯ͡Δҝɺݱࡏ͸ҠߦΛݕ౼த
    ίʔυϨΠΞ΢τʹ͓͔ͨ͛͠ͰɺϨΠΞ΢τΤϯδϯͷҠߦ΋͠қ͍ ͸
    ͣ

    View full-size slide

  19. ίʔυϨΠΞ΢τʹ͸
    ͋Δఔ౓ͷਏ͕͋͞Δ

    View full-size slide

  20. Copyright © 2017 eureka, Inc. All rights reserved.
    22
    ίʔυϨΠΞ΢τͷਏ͞
    ίʔυྔͷ૿େ
    "VUP-BZPVUͷ੍໿ఆٛ
    ίʔυϏϧυϨΠΞ΢τ֬ೝίʔυͷαΠΫϧ
    ͳΜͱ͔͜ͷਏ͞Λܰݮ͍ͨ͠

    View full-size slide

  21. Copyright © 2017 eureka, Inc. All rights reserved.
    23
    ίʔυྔͷ૿େ
    ίʔυྔͷ૿େࣗମ͸ͦΕ΄Ͳ໰୊Ͱ͸ͳ͘ɺݟ௨͕͠ѱ͘ͳΔ͜ͱ͕໰

    4DPQFT
    'BLF
    /BNFTQBDFT
    "UPNJD%FTJHO

    View full-size slide

  22. Copyright © 2017 eureka, Inc. All rights reserved.
    Clean Code: Scopes

    View full-size slide

  23. Copyright © 2017 eureka, Inc. All rights reserved.
    25
    Scopes: apply
    extension CustomDebugStringConvertible {
    @discardableResult func apply(_ closure: (Self) -> Void) -> Self {
    closure(self)
    return self
    }
    }
    self.titleLabel = UILabel(frame: .zero).apply({
    $0.translatesAutoresizingMaskIntoConstraints = false
    $0.textColor = PairsPalette.gray01
    $0.font = .boldSystemFont(ofSize: 15)
    $0.textAlignment = .center
    })

    View full-size slide

  24. Copyright © 2017 eureka, Inc. All rights reserved.
    26
    Scopes: apply
    extension CustomDebugStringConvertible {
    @discardableResult func apply(_ closure: (Self) -> Void) -> Self {
    closure(self)
    return self
    }
    }
    self.titleLabel = UILabel(frame: .zero).apply({
    $0.translatesAutoresizingMaskIntoConstraints = false
    $0.textColor = .gray01
    $0.font = .boldSystemFont(ofSize: 15)
    $0.textAlignment = .center
    })

    View full-size slide

  25. Copyright © 2017 eureka, Inc. All rights reserved.
    27
    Scopes: do
    constrain: do {
    constrain(view, backgroundView) { (view, backgroundView) in
    backgroundView.leading == view.leading
    backgroundView.trailing == view.trailing
    }
    }
    rxSetup: do {
    viewModel.didSomething
    .subscribe(onNext: {
    self.doSomething()
    })
    .disposeWith(self)
    }

    View full-size slide

  26. Copyright © 2017 eureka, Inc. All rights reserved.
    28
    Scopes: do
    constrain: do {
    constrain(view, backgroundView) { (view, backgroundView) in
    backgroundView.leading == view.leading
    backgroundView.trailing == view.trailing
    }
    }
    rxSetup: do {
    viewModel.didSomething
    .subscribe(onNext: {
    self.doSomething()
    })
    .disposeWith(self)
    }

    View full-size slide

  27. Copyright © 2017 eureka, Inc. All rights reserved.
    29
    Scopes: do
    constrain: do {
    constrain(view, backgroundView) { (view, backgroundView) in
    backgroundView.leading == view.leading
    backgroundView.trailing == view.trailing
    }
    }
    rxSetup: do {
    viewModel.didSomething
    .subscribe(onNext: {
    self.doSomething()
    })
    .disposeWith(self)
    }

    View full-size slide

  28. Copyright © 2017 eureka, Inc. All rights reserved.
    Clean Code: Namespaces

    View full-size slide

  29. Copyright © 2017 eureka, Inc. All rights reserved.
    31
    Namespaces
    7JFXͷυϝΠϯΛҙࣝͤ͞Δ
    υϝΠϯຖʹ໊લۭؒΛ࡞ͬͯ۠੾ΓɺείʔϓΛ࡞Δ

    View full-size slide

  30. Copyright © 2017 eureka, Inc. All rights reserved.
    32
    Namespaces
    ֤4DFOFʹఆٛ͢Δ7JFXΛٖࣅత/BNFTQBDFΛ࡞ͬͯάϧʔϐϯά͢Δ
    enum Card {
    enum SceneName {}
    enum Scene2Name {}
    }

    View full-size slide

  31. Copyright © 2017 eureka, Inc. All rights reserved.
    33
    Namespaces
    extension Card.SceneName {
    final class Overlay: UIView {
    override init(frame: CGRect) {
    super.init(frame: frame)
    // ...
    }
    @available(*, unavailable)
    required init?(coder aDecoder: NSCoder) { fatalError() }
    }
    }
    let overlayView = Card.SceneName.Overlay(frame: .zero)
    addSubview(overlayView)

    View full-size slide

  32. Copyright © 2017 eureka, Inc. All rights reserved.
    34
    Namespaces
    extension Card.SceneName {
    final class Overlay: UIView {
    override init(frame: CGRect) {
    super.init(frame: frame)
    // ...
    }
    @available(*, unavailable)
    required init?(coder aDecoder: NSCoder) { fatalError() }
    }
    }
    let overlayView = Card.SceneName.Overlay(frame: .zero)
    addSubview(overlayView)

    View full-size slide

  33. Copyright © 2017 eureka, Inc. All rights reserved.
    Atomic Design

    View full-size slide

  34. Copyright © 2017 eureka, Inc. All rights reserved.
    36
    Atomic Design
    "UPNJD%FTJHOΛ ͋Δఔ౓
    ҙࣝͯ͠7JFXύʔπΛ࡞੒͢Δ
    7JFXͷ࠶ར༻ੑΛߴΊΔ

    View full-size slide

  35. Copyright © 2017 eureka, Inc. All rights reserved.
    37
    Atomic Design
    "UPNT .PMFDVMFT 0SHBOJTNT
    5FNQMBUFT 1BHFT

    View full-size slide

  36. Copyright © 2017 eureka, Inc. All rights reserved.
    38
    Atomic Design
    "UPNT .PMFDVMFT 0SHBOJTNT
    5FNQMBUFT 1BHFT
    "UPNTϨϕϧͰ࡞͍ͬͯΔͱͭΒΈ͕ଟ͍ͷͰɺ.PMFTDVMFTϨϕϧͰ7JFX
    Λఆٛ͢Δ
    ͱ͸͍͑ɺ6*ύʔπͷ෼ׂ͸σβΠφʔɺٴͼ4LFUDIϑΝΠϧͱরΒ͠߹
    Θͤͳ͕Β֬ೝ͢΂͖

    View full-size slide

  37. Copyright © 2017 eureka, Inc. All rights reserved.
    39
    Atomic Design: Generics as Templates
    .PMFDVMFT 0SHBOJTNTΛ6*7JFXͰ࡞Δ
    5FNQMBUFTΛ6*7JFX$POUSPMMFSͱ(FOFSJDTͰఆٛ͢Δ
    ґଘੑΛ஫ೖͯ͠1BHFTΛ࡞Δ

    View full-size slide

  38. Copyright © 2017 eureka, Inc. All rights reserved.
    40
    Atomic Design: Generics as Templates
    final class CardsViewController:
    UIViewController {
    private let viewModel: ViewModel
    private let dataSource: DataSource
    init(viewModel: ViewModel, dataSource: DataSource) {
    self.viewModel = viewModel
    self.dataSource = dataSource
    super.init(nibName: nil, bundle: nil)
    }
    @available(*, unavailable)
    required init?(coder aDecoder: NSCoder) { fatalError() }
    }

    View full-size slide

  39. Copyright © 2017 eureka, Inc. All rights reserved.
    41
    Atomic Design: Generics as Templates
    final class CardsViewController:
    UIViewController {
    private let viewModel: ViewModel
    private let dataSource: DataSource
    init(viewModel: ViewModel, dataSource: DataSource) {
    self.viewModel = viewModel
    self.dataSource = dataSource
    super.init(nibName: nil, bundle: nil)
    }
    @available(*, unavailable)
    required init?(coder aDecoder: NSCoder) { fatalError() }
    }

    View full-size slide

  40. Copyright © 2017 eureka, Inc. All rights reserved.
    42
    Atomic Design: Generics as Templates
    let viewModel = UserCardType.Pickup()
    let dataSource = PickupCardDataSource(viewModel: viewModel)
    let cardViewController = CardsViewController(viewModel: viewModel, dataSource: dataSource)

    View full-size slide

  41. Copyright © 2017 eureka, Inc. All rights reserved.
    AutoLayoutͷ੍໿

    View full-size slide

  42. Copyright © 2017 eureka, Inc. All rights reserved.
    44
    AutoLayout: Cartography
    SPCC$BSUPHSBQIZͰ"VUP-BZPVU
    Λఆٛ͢Δ
    "VUP-BZPVUͷఆٛͷείʔϓΛڧ
    ੍తʹڱΊΒΕΔ
    $POUFOUIVHHJOHQSJPSJUZ౳͸7JFX
    ͷଐੑͱͯ͠ѻ͍ɺBQQMZ಺Ͱఆٛ
    ͢Δ

    View full-size slide

  43. Copyright © 2017 eureka, Inc. All rights reserved.
    ࣮૷αΠΫϧ

    View full-size slide

  44. Copyright © 2017 eureka, Inc. All rights reserved.
    46
    ࣮૷αΠΫϧ
    2ʮίʔυϨΠΞ΢τͩͱ࣮ࡍͷϨΠΞ΢τΛίʔυ͔Β૝૾͠ʹ͍͘ͷ
    Ͱ͸ͳ͍͔ʯ
    "͔֬ʹجຊతʹ͸Ϗϧυͯ֬͠ೝ͢Δ

    View full-size slide

  45. Copyright © 2017 eureka, Inc. All rights reserved.
    47
    ࣮૷αΠΫϧ
    QBJSTͷಛੑ্ɺ6TFS4UBUVTʹԠͯ͡ಈతʹ੾ΓସΘΔը໘͕ଟ͍
    ͦ΋ͦ΋*#্ͷ੩తͳଥ౰ੑݕূ͕͠ਏ͍ঢ়ଶ
    ͦΕͰ΋ίʔυϏϧυϨΠΞ΢τ֬ೝίʔυͷαΠΫϧ͸ݮΒ͠
    ͯ։ൃΛߴ଎Խ͍ͨ͠
    ϥϯλΠϜͰϨΠΞ΢τΛௐ੔ͭͭ֬͠ೝ͢Ε͹͍͍͡ΌΜ͔

    View full-size slide

  46. Copyright © 2017 eureka, Inc. All rights reserved.
    48
    ࣮૷αΠΫϧ
    3FWFBM
    ϥϯλΠϜ7JFXσόοάπʔϧ
    7JFXͷBUUSJCVUFT΍DPOTUSBJOUTΛϥϯ
    λΠϜ্Ͱมߋ
    ݟͨ໨ΛϦΞϧλΠϜͰม͑ͳ͕Β࣮૷
    αΠΫϧΛ࠷খݶʹ͢Δ
    %&.0͠·͢

    View full-size slide

  47. Copyright © 2017 eureka, Inc. All rights reserved.
    49
    ·ͱΊ
    ӡ༻εςʔδʹೖΔͱɺ*OUFSGBDF#VJMEFS͸ਏ͔ͬͨ
    ίʔυϨΠΞ΢τʹҠߦ͢Δ͜ͱͰɺมԽʹڧ͘ͳΔ
    ʮมԽʹ࠷΋ରԠͰ͖Δੜ͖෺͕ੜ͖࢒Δʯ
    ίʔυϨΠΞ΢τͷπϥϛ͸ɺ޻෉Ͱ௿ݮͰ͖Δ

    View full-size slide

  48. Ϣʔβʹͱͬͯ΋
    ΤϯδχΞʹͱͬͯ΋
    շదͳϓϩμΫτΛ

    View full-size slide

  49. Thank you
    IUUQTXXXOBTBHPWNJTTJPO@QBHFT/11OFXTFBSUIBUOJHIUIUNM

    View full-size slide