SwiftでTableViewを使ってみよう

# ■まえがき
## 書いてあること
- xcodeにて、TableViewを使用したシングルページアプリの作成

## モチベーション
TableViewの使い方について、多くの記事が古いバージョン前提になっており、超つまずいた。
特に、swift3.0のアップデートにより、コードの記述ルールが変更になった影響が大きい。

参照：Swift 3.0の変更点まとめ
https://dev.classmethod.jp/smartphone/iphone/implemented_proposals_for_swift3/

# ■解説
## 流れ
1. プロジェクトの立ち上げ
2. Main.storyboardの設定をする
3. ViewControllerのコードに追記する
4. 起動してみる

## Step1：プロジェクトを立ち上げる
- シングルビューを選択

![スクリーンショット 2018-03-14 10.58.39.png](https://qiita-image-store.s3.amazonaws.com/0/63060/352c11cc-6005-e955-971f-295dc28482aa.png)

- プロジェクト名などを入力

![スクリーンショット 2018-03-14 11.02.20.png](https://qiita-image-store.s3.amazonaws.com/0/63060/d7333132-b220-8039-fabb-eba46521a2c5.png)

- 今回は「tableview」にしました

![スクリーンショット 2018-03-14 11.02.46.png](https://qiita-image-store.s3.amazonaws.com/0/63060/cd1218ff-6cd7-c633-2526-0c8a3fa6d41a.png)

さらに詳しくはこちらの記事がわかりやすいです
https://type.jp/et/feature/3008

## Step2：メインストーリーボードの設定
### 画面サイズの設定

- 作成するアプリの画面サイズを設定しましょう
- 今回はSEを選択しました（Airを使っているとシミュレーターがはみ出てしまうため）

![スクリーンショット 2018-03-14 11.04.40.png](https://qiita-image-store.s3.amazonaws.com/0/63060/7cd8abc4-c3bd-1839-93ae-aa94148b4d6a.png)


### StoryBoardのViewControllerにTableViewを追加
- UIパーツの中から選んでドラッグ&ドロップ

![スクリーンショット 2018-03-14 11.03.38.png](https://qiita-image-store.s3.amazonaws.com/0/63060/b445ead1-4d07-c2fb-e1ba-e0273e6efa27.png)

### TableViewのレイアウトを設定
- このままだと綺麗に表示されないので、画面いっぱいに広げましょう
- 電池マークや時刻などが表示されるエリア（セーフエリア）は空けておきましょう

![スクリーンショット 2018-03-14 11.19.57.png](https://qiita-image-store.s3.amazonaws.com/0/63060/40f8d7c6-1947-a817-f4a9-1e3595aded69.png)

### TableViewのOutletsを設定
- TableViewを選択
- 右のメニューから「Connection Inspector」を選択
- OutletsのdataSourceとdelegateからミョン！とドラッグしてください

![スクリーンショット 2018-03-14 11.20.38.png](https://qiita-image-store.s3.amazonaws.com/0/63060/b5deaf98-8467-c010-d5a8-97e113822c30.png)

![スクリーンショット 2018-03-14 11.20.57.png](https://qiita-image-store.s3.amazonaws.com/0/63060/bc9453c2-5312-bf63-d3de-606c8ec0f2f6.png)

### TableViewにTableViewCellを追加
- UIパーツからセルパーツをドラッグ&ドロップ

![スクリーンショット 2018-03-14 11.31.30.png](https://qiita-image-store.s3.amazonaws.com/0/63060/a8fa732a-eabc-4a2a-3ddc-de721e7bba74.png)

### TableViewCellのIdentifierを設定
- 設置したセルに名前をつける

![スクリーンショット 2018-03-14 11.21.48.png](https://qiita-image-store.s3.amazonaws.com/0/63060/af65643e-e34f-5990-20b8-e0e52a653683.png)


## Step3：コードをいじる
### 追加①「UITableViewDataSource」と「UITableViewDelegate」を追加
- classの部分に、追記を行う
- テーブルビューデリゲートとテーブルビューデータソースに関するデータのやりとりもここで扱いますよーという宣言

```swift:ViewController.swift
import UIKit

//追加①
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource { 

    //最初からあるコード
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    //最初からあるコード
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

```

### 追加②リストの中身を定義
- テーブルに表示させたい中身を宣言してあげる
- 今回はTODOリストっぽく設定

```swift:ViewController.swift
import UIKit

//追加①
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource { 

    //追加②
    let TODO = ["牛乳を買う", "掃除をする", "アプリ開発の勉強をする"] 

    //最初からあるコード
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    //最初からあるコード
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}
```

### 追加③セルの個数を指定するコードを追加

```swift:ViewController.swift
import UIKit

//追加①
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource{

    //追加②
    let TODO = ["牛乳を買う", "掃除をする", "アプリ開発の勉強をする"]

    //最初からあるコード
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    //最初からあるコード
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    //追加③ セルの個数を指定するデリゲートメソッド（必須）
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return TODO.count
    }
}
```
### 追加④セルの中身を表示するコードを追加
```swift:ViewController.swift
import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource{ //追加①

    let TODO = ["牛乳を買う", "掃除をする", "アプリ開発の勉強をする"] //追加②

    //最初からあるコード
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    //最初からあるコード
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    //追加③ セルの個数を指定するデリゲートメソッド（必須）
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return TODO.count
    }

    //追加④ セルに値を設定するデータソースメソッド（必須）
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // セルを取得する
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        // セルに表示する値を設定する
        cell.textLabel!.text = TODO[indexPath.row]
        return cell
    }
}
```


## Step4：起動してみる
ビルドボタンをポチっ
![スクリーンショット 2018-03-14 15.00.48.png](https://qiita-image-store.s3.amazonaws.com/0/63060/ae27fbfa-c2d8-f401-197e-01a022fac911.png)

お疲れ様でした！

# NextStage!

**🎉TODOアプリを作ってみようシリーズ**

📱Swiftで簡単なTODOアプリを作ってみよう
https://qiita.com/TD3P/items/8f474358d1dd789557f3

📱SwiftでTableViewを使ってみよう
https://qiita.com/TD3P/items/cafa8e20029047993025

📱Swiftでカスタムセルを再利用したTODOアプリを作ってみよう
https://qiita.com/TD3P/items/116a2199b1f872ac6471

📱SwiftでCoreDataを使ったTODOアプリを作ってみよう
https://qiita.com/TD3P/items/adbbeee827995cffd509

📱SwiftでRealmを使ったTODOアプリを作ってみよう
https://qiita.com/TD3P/items/616e0dbd364179ca284b

---

📱Flutterで基本のTODOアプリを作ってみよう
https://qiita.com/pe-ta/items/b3b7458059c1fd7efcf0

📱Flutterでページ遷移するTODOアプリを作ってみよう
https://qiita.com/pe-ta/items/e547c4cf460319f5093c

📱Flutter x Firestore で気軽に永続化してオラオラする方法
https://qiita.com/pe-ta/items/ccd49fc396b063a821af