【初心者向け】徹底詳解！cocoapod + RealmでToDoアプリを作るチュートリアル  (全4回)

**注意**
このチュートリアルの最初のページは[こちら](http://qiita.com/g08m11/items/e8a525490b5113c052a7)になります。


## 手順3 todoに必要な設定を行う

### 手順3.1 ファイルを作成

今回のToDoは「ToDoの名前」、「期限」、「完了フラグ」に対して
、それ用のファイルを新規追加し、そのファイルに永続化させるための処理を記述する
必要があります。

まず、「ToDo.swift」という新しいファイルを作ります。


![スクリーンショット 2015-12-12 15.34.32.png](https://qiita-image-store.s3.amazonaws.com/0/15812/c7b504e6-3f6e-0565-0702-6f939cfe5c8b.png "スクリーンショット 2015-12-12 15.34.32.png")

![スクリーンショット 2015-12-12 15.34.42.png](https://qiita-image-store.s3.amazonaws.com/0/15812/073f99ea-fb56-ccff-2ffe-eb8cbf1df7a5.png "スクリーンショット 2015-12-12 15.34.42.png")

![スクリーンショット 2015-12-12 15.34.57.png](https://qiita-image-store.s3.amazonaws.com/0/15812/c5a507d1-1921-5459-9a22-dd7e56bb95d1.png "スクリーンショット 2015-12-12 15.34.57.png")




### 手順3.2 クラスを作成する
作成した「ToDo.swift」内にクラスを作成します。

RealmSwiftをインポートすること、Objectクラスのサブクラスにすることを忘れずに！

**ソース**

```

import Foundation
import RealmSwift

class ToDo: Object{
}

```

### 手順3.3 「ToDoの名前」、「期限」、「完了フラグ」をプロパティとして定義する

今のままだとまだToDoという空っぽなクラスです。
このクラス内に「ToDoの名前」、「期限」、「完了フラグ」を定義します。

**ソース**

```

import Foundation
import RealmSwift

class ToDo: Object{
  /// 名前
  dynamic var name = ""
  /// 期限
  dynamic var deadLine = NSDate(timeIntervalSince1970: 0)
  /// 完了フラグ
  dynamic var isComplete = false
}


```

### 手順3.4 名前、期限、完了フラグに該当する部品を配置する

todoを追加する処理はViewControllerに書いていくのですがその前にMainStoryBoard上のViewControllerへ配置していきます。


![todo_image_1.gif](https://qiita-image-store.s3.amazonaws.com/0/15812/9a89b2f2-fec9-90b4-bdd6-d457ae788aaf.gif "todo_image_1.gif")




次にlabelに対して「todo」、「期限」と名称を設定します。
また同じようにボタンも「追加」と名称を設定します。


![todo_image_2.gif](https://qiita-image-store.s3.amazonaws.com/0/15812/281b1d2e-e7fd-9d9e-ead3-070b20c033a3.gif "todo_image_2.gif")


### 手順3.5 todoを表示するためにtableViewとcellを追加

今のままだとtodoを追加してもrealmを使ってDBには追加されますが
アプリ上で確認することが出来ません。
そのため、それを確認するためにtableViewとcell、それを表示するためのlabelを追加します。

![todo_image_6.gif](https://qiita-image-store.s3.amazonaws.com/0/15812/d4100ba0-1e6f-35d3-070f-7d5bea054c40.gif "todo_image_6.gif")




### 手順3.5 Auto Layoutを設定する

以降では画面に関する設定がないため、この状態をどの端末サイズでも表示出来るようにAutoレイアウトを設定します。

![todo_image_7.gif](https://qiita-image-store.s3.amazonaws.com/0/15812/141683e6-d8ed-0a06-dc7d-bfb8e82cf99e.gif "todo_image_7.gif")


### 手順3.6 ViewController上の部品とコードを紐付ける

今のままでは部品を配置しただけのためそれに対してコードをひも付けます。

まず、「名前」を入力するテキストフィールドを「todoNameText」、

追加した「名前」を表示するtableViewを「tableView」で設定します。

![スクリーンショット 2015-12-12 16.28.59.png](https://qiita-image-store.s3.amazonaws.com/0/15812/073bcaac-1895-61ab-4ab5-ef509c82ca67.png "スクリーンショット 2015-12-12 16.28.59.png")

最後にボタンをAction付きの「addToDo」という名前で設定します。

![スクリーンショット 2015-12-12 16.30.39.png](https://qiita-image-store.s3.amazonaws.com/0/15812/2d5d354d-d4fb-c213-46e7-f240d468afd0.png "スクリーンショット 2015-12-12 16.30.39.png")

### 手順3.7 cellに設定した「todo名」を新たにファイルを追加し、ひも付ける

Cell上に配置した「todo名」は別にcell上のファイルを用意して対応します。

新規に「ToDoTableViewCell.swift」というファイルを「UITableViewCell」用で
「ToDoTableViewCell」というクラス名で作ります。

![スクリーンショット 2015-12-13 1.08.26.png](https://qiita-image-store.s3.amazonaws.com/0/15812/abae8dff-fc0e-36f5-672b-a93e3cae9dae.png "スクリーンショット 2015-12-13 1.08.26.png")

![スクリーンショット 2015-12-13 1.08.50.png](https://qiita-image-store.s3.amazonaws.com/0/15812/9037285c-0aca-9cc1-fca3-17254c18ffd1.png "スクリーンショット 2015-12-13 1.08.50.png")

![スクリーンショット 2015-12-13 1.09.07.png](https://qiita-image-store.s3.amazonaws.com/0/15812/b6ff0185-a3e9-153d-1441-03d8f89ac81e.png "スクリーンショット 2015-12-13 1.09.07.png")


次に追加したCellを「ToDoTableViewCell」に設定します。

![スクリーンショット 2015-12-13 1.15.33.png](https://qiita-image-store.s3.amazonaws.com/0/15812/2e05b9bb-6109-4f1d-e55b-07e1e2ccb336.png "スクリーンショット 2015-12-13 1.15.33.png")


最後にCell上に配置した「todo名」を「nameLabel」という名称で設定します。


![スクリーンショット 2015-12-13 1.18.12.png](https://qiita-image-store.s3.amazonaws.com/0/15812/d9f9af83-e8ff-45eb-70b3-ae9a6bae71c0.png "スクリーンショット 2015-12-13 1.18.12.png")

## 手順3.9 ViewControllerの内容が表示されるか確認する

Auto Layoutの設定が不十分だと表示される前に落ちてしまう場合があり、

以降の手順で「どのタイミングでどの内容が原因で落ちてしまうのか」分からなくなってしまいます。
なので、今の時点で「commandキー」 + Bキーでビルドが成功することを確認し、
「commandキー」 + Rキーで実行し、
ViewControllerに貼り付けた部品が正常に表示されるか確認してみましょう。


## [前へ](http://qiita.com/g08m11/items/70be848f48619f87e812)

## [次へ](http://qiita.com/g08m11/items/8d4f7e82e89195ff301c)