Introducing CodeLayout with Tips

Transcript

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

   CodeLayout with Tips

2. Copyright © 2017 eureka, Inc. All rights reserved. 2 $

   whoami  !TBUPTIJO
    QBJST
   +1
   J04
   "QQMJDBUJPO
   &OHJOFFS
   BU
   FVSFLB
   *OD
    J04
   "OESPJE
   "QQMF
   4DSJQU
   5ZQF4DSJQUษڧத
    .BSWFM
   $JOFNBUJD
   6OJWFSTFେ޷͖

3. Copyright © 2017 eureka, Inc. All rights reserved. 3 Agenda

    Ͳ͏ͯ͠*OUFSGBDF
   #VJMEFSΛ࢖Θͳ͍ܾஅΛͨ͠ͷ͔
    ίʔυϨΠΞ΢τͷਏ͍ॴ
    ίʔυϨΠΞ΢τΛΩϨΠʹॻ͘ҝʹ

4. Copyright © 2017 eureka, Inc. All rights reserved. 4 Target

   audience  ݱࡏ*OUFSGBDF
   #VJMEFSΛ࢖͍ͬͯͯɺਏ͞Λײ͍ͯ͡Δ
   
   TUPSZCPBSEͱYJCͷϨϏϡʔ͕ਏ͍
   
    ͔͠͠ɺίʔυϨΠΞ΢τ͸ίʔυྔ͕૿͑ͦ͏Ͱ᪳᪯͍ͯ͠Δ
   

5. Copyright © 2017 eureka, Inc. All rights reserved. 5 pairs

   Japan  *OUFSGBDF
   #VJMEFS࢖͍ͬͯ·ͤΜ
    "VUP
   -BZPVU͸࢖͍ͬͯ·͢

6. Copyright © 2017 eureka, Inc. All rights reserved. 6 pairs

   Global  *OUFSGBDF
   #VJMEFS࢖͍ͬͯ·ͤΜ
    5FYUVSF
   :PHBͳͲ"VUP-BZPVUҎ֎ͷϨΠΞ΢τΤϯδϯͱ"VUP-BZPVU ΛҰॹʹ࢖͍ͬͯ·͢

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

8. Copyright © 2017 eureka, Inc. All rights reserved. 8 IBOutlet,

   IBAction  *NQMJDJUMZ
   6OXSBQQFE
   0QUJPOBM
    *#ͱίʔυͷඥ෇͚๨Εʹؾ͖ͮʹ͍͘
    *OJUJBMJ[FSͰͷ6*ఆ͕ٛͰ͖ͳ͍
    ΄ΜͱʹOJMͷϋϯυϦϯάͰ͖ͯΔʁ
    3YͳͲʹΑΓΠϕϯτʹΑΓ6*ͷૢ࡞ൃੜ࣌ͳͲ

9. Copyright © 2017 eureka, Inc. All rights reserved. 9 Segue͕ਏ͍

    QSFQBSF'PS4FHVFTFOEFSʹॳظԽͷॲཧΛ·ͱΊͳ͚Ε͹ͳΒͳ͍
    QFSGPSN4FHVFͷ*EFOUJpFS͸4USJOH
    ͭΒ͍

10. Copyright © 2017 eureka, Inc. All rights reserved. 10 Continuous

    Developingʹ޲͔ͳ͍(ؾ͕͢Δ)  ॳճߏங࣌͸&NQUZ7JFX͕͚ͭͩͩͬͨ
    
    ͩͬͨΒ*#্Ͱɾɾ
     &NQUZ7JFXͷछྨ͕௥Ճ͞Εͨ
     4UPSZCPBSE্Ͱ௥Ճ͢Δ
     ·ͨ&NQUZ7JFXͷछྨ͕௥Ճ͞Εͨ
    -
11. None

12. Copyright © 2017 eureka, Inc. All rights reserved. 12 Continuous

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

13. Copyright © 2017 eureka, Inc. All rights reserved. 13 try!

    Swift After TalksͰ࿩ͨ͜͠ͱ  6*7JFXͷBUUSJCVUFTͲ͜Ͱఆٛ͢Δͷ໰୊
     4UPSZCPBSEYJCͷSFWJFXਏ͍Α໰୊

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

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

16. Copyright © 2017 eureka, Inc. All rights reserved. 16 ViewControllerͷ։ൃʹ੍ݶ͕ͳ͘ͳͬͨ

     JOJUJBMJ[FSͰͷґଘੑ஫ೖ
     JOJUJBMJ[FSͷ׆༻ͷ෯͕޿͕ͬͨ
     (FOFSJDTΛ༻͍ͯ7JFX$POUSPMMFSΛ։ൃ
     ίʔυ͸ޙ΄Ͳ

17. Copyright © 2017 eureka, Inc. All rights reserved. 17 ܧଓత։ൃ͕͠΍͍͢

     "#ςετ͕ͱʹ͔͘͠΍͍͢
     6*ύʔπͷࠩ͠ସ͑΋*#ʹൺ΂ͯ҆қ
     ঢ়ଶʹΑͬͯϨΠΞ΢τ͕੾ΓସΘΔ࢓༷͸ίʔυʹ͢Δ͜ͱͰ࣮ݱ͠΍ ͘͢ͳͬͨ

18. Copyright © 2017 eureka, Inc. All rights reserved. 18 ͦͷଞ

     BUUSJCVUFT͸ίʔυ্Ͱఆٛ͢ΔͷΈ
     SFWJFX͸4UPSZCPBSEYJC YNM ʹൺ΂ͯ֨ஈʹ͠қ͍
     3FWJFXFS
    DPOqJDUमਖ਼͕҆қʹ

19. Copyright © 2017 eureka, Inc. All rights reserved. 19 AutoLayout

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

20. ͔͠͠

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

22. Copyright © 2017 eureka, Inc. All rights reserved. 22 ίʔυϨΠΞ΢τͷਏ͞

     ίʔυྔͷ૿େ
     "VUP-BZPVUͷ੍໿ఆٛ
     ίʔυ
    
    Ϗϧυ
    
    ϨΠΞ΢τ֬ೝ
    
    ίʔυ
    ͷαΠΫϧ
     ͳΜͱ͔͜ͷਏ͞Λܰݮ͍ͨ͠

23. Copyright © 2017 eureka, Inc. All rights reserved. 23 ίʔυྔͷ૿େ

     ίʔυྔͷ૿େࣗମ͸ͦΕ΄Ͳ໰୊Ͱ͸ͳ͘ɺݟ௨͕͠ѱ͘ͳΔ͜ͱ͕໰ ୊
     4DPQFT
     'BLF /BNFTQBDFT
     "UPNJD
    %FTJHO

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

    Scopes

25. 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 })

26. 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 })

27. 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) }

28. 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) }

29. 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) }

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

    Namespaces

31. Copyright © 2017 eureka, Inc. All rights reserved. 31 Namespaces

     7JFXͷυϝΠϯΛҙࣝͤ͞Δ
     υϝΠϯຖʹ໊લۭؒΛ࡞ͬͯ۠੾ΓɺείʔϓΛ࡞Δ

32. Copyright © 2017 eureka, Inc. All rights reserved. 32 Namespaces

     ֤4DFOFʹఆٛ͢Δ7JFXΛٖࣅత/BNFTQBDFΛ࡞ͬͯάϧʔϐϯά͢Δ enum Card { enum SceneName {} enum Scene2Name {} }

33. 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)

34. 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)

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

36. Copyright © 2017 eureka, Inc. All rights reserved. 36 Atomic

    Design  "UPNJD
    %FTJHOΛ ͋Δఔ౓ ҙࣝͯ͠7JFXύʔπΛ࡞੒͢Δ
     7JFXͷ࠶ར༻ੑΛߴΊΔ

37. Copyright © 2017 eureka, Inc. All rights reserved. 37 Atomic

    Design "UPNT .PMFDVMFT 0SHBOJTNT 5FNQMBUFT 1BHFT

38. Copyright © 2017 eureka, Inc. All rights reserved. 38 Atomic

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

39. Copyright © 2017 eureka, Inc. All rights reserved. 39 Atomic

    Design: Generics as Templates  .PMFDVMFT
    0SHBOJTNTΛ6*7JFXͰ࡞Δ
     5FNQMBUFTΛ6*7JFX$POUSPMMFSͱ(FOFSJDTͰఆٛ͢Δ
     ґଘੑΛ஫ೖͯ͠1BHFTΛ࡞Δ

40. Copyright © 2017 eureka, Inc. All rights reserved. 40 Atomic

    Design: Generics as Templates final class CardsViewController<ViewModel: CardViewModel, DataSource: CardDataSource>: 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() } }

41. Copyright © 2017 eureka, Inc. All rights reserved. 41 Atomic

    Design: Generics as Templates final class CardsViewController<ViewModel: CardViewModel, DataSource: CardDataSource>: 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() } }

42. 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)

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

44. Copyright © 2017 eureka, Inc. All rights reserved. 44 AutoLayout:

    Cartography  SPCC$BSUPHSBQIZͰ"VUP-BZPVU Λఆٛ͢Δ
     "VUP-BZPVUͷఆٛͷείʔϓΛڧ ੍తʹڱΊΒΕΔ
     $POUFOU
    IVHHJOH
    QSJPSJUZ౳͸7JFX ͷଐੑͱͯ͠ѻ͍ɺBQQMZ಺Ͱఆٛ ͢Δ

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

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

     2ʮίʔυϨΠΞ΢τͩͱ࣮ࡍͷϨΠΞ΢τΛίʔυ͔Β૝૾͠ʹ͍͘ͷ Ͱ͸ͳ͍͔ʯ
     "
    ͔֬ʹجຊతʹ͸Ϗϧυͯ֬͠ೝ͢Δ

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

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

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

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

49. Copyright © 2017 eureka, Inc. All rights reserved. 49 ·ͱΊ

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

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

51. Thank you IUUQTXXXOBTBHPWNJTTJPO@QBHFT/11OFXTFBSUIBUOJHIUIUNM