MVCの第一歩！ControllerとViewを分ける！

こんにちわ。22日目担当の@bearcanionです。

僕はアプリ開発を始めてからMVCの概念を特に気にせず、全ての部品をストーリボードに乗せ、コードを全てViewControllerファイルに書いていました。

その結果がこちらです。
ストーリーボード
<img width="1440" alt="スクリーンショット 2015-12-20 16.12.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/38002/c30d2ed0-41fc-7147-de42-9731348fb8fc.png">

１番大きいViewControllerファイル
<img width="1440" alt="スクリーンショット 2015-12-20 16.14.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/38002/e95d3c49-806f-52c4-95f7-16131a1ee3cf.png">
1387行の中に処理も部品レイアウトも画面遷移も全て書いてある状態！
大変わかりにくくなっております！！！

通常の開発ではMVC(モデル・ビュー・コントローラー)に分けて書くのが一般的です！
ですが、いきなり初心者にMVCを駆使して書けって言っても敷居が高すぎます。
なので今回はホントに簡単にxibファイルを使ってストーリーボードから部品を取り除きMVCで言うところのViewとControllerに分ける方法をご紹介します。

まずViewTestプロジェクトを作り、その中にControllerとViewというグループを作ります。
Controllerフォルダの中にViewController.swiftを入れてください。
そしてCustomView.swiftとCustomView.xibを作っていきます。
<img width="1440" alt="スクリーンショット 2015-12-20 16.22.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/38002/efecf997-f6f7-7d20-3b64-998f047df78d.png">

まずはCustomView.swiftからです。
Cocoa Touch Classを選択し、
<img width="722" alt="スクリーンショット 2015-12-20 16.24.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/38002/9df1aa47-af28-c042-93a3-f8ad7bef02bf.png">

UIViewを継承したCustomView.swiftを作ります。
<img width="732" alt="スクリーンショット 2015-12-20 16.24.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/38002/a094c405-aa67-0801-84c7-dc17a8597316.png">

次はCustomView.xibです。
User InterfaceからViewを選択し、
名前をCustomView.xibで作ります。
<img width="723" alt="スクリーンショット 2015-12-20 16.25.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/38002/bf4353f3-7155-0928-d3bd-3e99529f4035.png">

CustomView.xibを選択してください。
インスペクターのCustom ClassにCustomViewを指定します。
そしてUILabel   をViewの上に乗せます。
Viewの色もわかりやすく変えておきましょう！
<img width="1440" alt="スクリーンショット_2015-12-20_16_26_10.png" src="https://qiita-image-store.s3.amazonaws.com/0/38002/83f70af0-6460-13cf-bae8-01ff59effcd7.png">

CustomView.swiftを選択してください。
先ほどのUILabelをアウトレット接続しておきます。
さらにこのファイルに対応するxibファイルはどれなのかをコードで指定します。
<img width="1440" alt="スクリーンショット 2015-12-20 16.26.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/38002/6802d27b-8805-625a-4d7a-003cec179703.png">
コードはこちら

```lang:
class func instance() -> CustomView {
        return UINib(nibName: "CustomView", bundle: nil).instantiateWithOwner(self, options: nil)[0] as! CustomView
    }
```

そして最後にViewControllerのviewDidAppearメソッドにコードを書いていきます。
<img width="1440" alt="スクリーンショット 2015-12-20 16.26.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/38002/e9a39b4e-a742-c048-d81f-19936022c59c.png">
コードはこちら

```lang:
override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)
        let customView = CustomView.instance()
        customView.frame = self.view.frame
        self.view.addSubview(customView)
        customView.myLabel.text = "hogehoge"        
    }
```

シュミレーターで起動してみましょう！
<img width="465" alt="スクリーンショット 2015-12-21 12.27.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/38002/ccda3a9e-0da1-23bd-ba67-30a042e4832a.png">

hogehogeでましたでしょうか？？

こうすることでストーリーボードはスッキリしました！
今は難しい処理をしているわけではないですが、
データベースからデータを取ってきたり
データベースに保存したりするときに
MVCでいうモデルという概念も活用し、
処理の部分の切り分けもするとViewControllerがスッキリすると思います。
モデルにしておくと使いまわせるという利点もあります！

僕も全然MVCについてはまだまだ疑問なこともたくさんあるし、
結構難しいので一歩一歩進んで行きましょう！