UITableViewをStoryBoardで作ってリスト表示

##つくるもの

　コード内に記述したArray型の文字列をUITableViewに反映させる

```swift:
let dataList = ["テスト１","テスト２","テスト３","テスト４"]
```

<img src="https://qiita-image-store.s3.amazonaws.com/0/93396/0ce9f63d-bda0-f57a-e120-f12b6a6a9229.png" width=40%>

##UI

　Table Viewを置きます。
![スクリーンショット 2019-01-13 20.18.03.png](https://qiita-image-store.s3.amazonaws.com/0/93396/be113738-4f7f-4137-a1cf-186748313971.png)

　"Add New Constrains"で全てのSpacingを0にし、"Constrain to margins"をオフにするとTable Viewが全体に広がります。
<img src="https://qiita-image-store.s3.amazonaws.com/0/93396/2b879673-39be-e7a9-376d-c36b7fbedfff.png" width=40%><img src="https://qiita-image-store.s3.amazonaws.com/0/93396/5d49ebcc-eb01-67da-9842-dc58e654f38b.png" width=40%>

　次にTable Viewの上にTable View Cellをドラッグ＆ドロップすると、中にセルが作られます。
![スクリーンショット 2019-01-13 20.18.49.png](https://qiita-image-store.s3.amazonaws.com/0/93396/d124d938-308b-9b9c-ad74-0aa71d1f6ca0.png)

　最終的にいくつものセルを表示させたい場合でも、１つだけ配置すればOK。

　次にセルに名前をつけ、あとでコード内から編集できるようにする。

　View Controller Sceneのツリーから"Table View Cell"を選択。Attributes Inspectorの"identifier"を"myCell"にする。
![スクリーンショット 2019-01-13 20.19.27.png](https://qiita-image-store.s3.amazonaws.com/0/93396/0a742490-f198-df33-44fa-c2876f7d8e41.png)　![スクリーンショット 2019-01-13 20.19.44.png](https://qiita-image-store.s3.amazonaws.com/0/93396/208bc9b8-7472-e505-68bc-261b8253ed57.png)

　Enterを押して、ツリー内の"Table View Cell"が"myCell"になったか確認

![スクリーンショット 2019-01-13 20.19.53.png](https://qiita-image-store.s3.amazonaws.com/0/93396/315696cc-0800-6e03-b6e0-bdfed9110785.png)


##プロトコルの関連づけ

　UITableViewを扱うために<b>UITableViewDataSource</b>と<b>UITableViewDelegate</b>というプロトコルを使います。

　~DataSourceはテーブルの表示にどんなデータを使うか、~Delegateはテーブルが操作されたときにどんなことをするかを定義します。

###Table ViewをView Controllerと関連づける

　View Controller SceneのツリーからTable Viewを選択し、
　![スクリーンショット 2019-01-13 20.42.00.png](https://qiita-image-store.s3.amazonaws.com/0/93396/0516dc56-19eb-e99e-a987-492eb367bf5f.png)

　Connections Inspectorボタンから関連づけます。OutletsのdataSource, delegateの項目の右端にある○をドラッグし、StoryBoardのView Controlerにドラッグしてください。
![スクリーンショット 2019-01-13 20.44.38.png](https://qiita-image-store.s3.amazonaws.com/0/93396/41c788da-066b-22c7-cab0-5673900cf6c2.png)

　dataSourceとdelegateにView Controllerが関連づけられたことを確認してください。
![スクリーンショット 2019-01-13 20.48.14.png](https://qiita-image-store.s3.amazonaws.com/0/93396/6db8ff4e-2ceb-155b-037c-c3dce1072a33.png)

###コード内でプロトコルを利用する

　ViewController.swiftを開き、UIViewControllerクラスにそれぞれのプロトコルを利用するよう宣言します。以下のように追記してください。

```swift:ViewController.swift
import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
}
```


##データを用意する

　関連付けが終わったらまずは、Table Viewに表示するデータリストを用意します。

　viewDidLoad()の前に以下を追記します。これがリスト表示されるデータです。

```swift:ViewController.swift
    let dataList = ["テスト１","テスト２","テスト３","テスト４"]
```


##Table Viewの処理する場所を作る

　先ほど２つのプロトコルを追記したらエラーが出たと思います。
![スクリーンショット 2019-01-13 20.56.11.png](https://qiita-image-store.s3.amazonaws.com/0/93396/23bfb518-ff4e-bac1-1058-a9fa081f4271.png)

　Fixしてしまいましょう。以下のように追記してくれます。

```swift:ViewController.swift
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        <#code#>
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        <#code#>
    }
```

　少し見にくいので以下のように順序を入れ替えましょう。

```swift:ViewController.swift
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    let dataList = ["テスト１","テスト２","テスト３","テスト４"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        <#code#>
    }
   
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        <#code#>
    }
}
```

##テーブルの行数の指定

　tableView: numberOfRowsInSection:以下のように記述します。

```swift:ViewController.swift
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dataList.count
    }
```

　テーブルに表示したい列の数を返してあげます。例えば３行だけ表示したければreturn 3にします。ここでは先ほど定義したdataListのアイテム数を返すようにしています。

##セル内の文字の変更

　tableView: cellForRowAt:には以下のように記述します。

```swift:ViewController.swift
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "myCell", for: indexPath)
        cell.textLabel?.text = dataList[indexPath.row]
        return cell
    }

　tableView.dequeueReusableCellで再利用可能なセルを取得します。そのパラメーターとしてwithIdentifier:は先ほど名付けた"myCell"が来て、for: にはindexPathを渡します。

　cell.textLabel?.textはセル内のLabelを参照し、そこにdataListの中の[indexPath.row]番目のデータを取り出します。
```

##完成コード

```swift:ViewController.swift
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    let dataList = ["テスト１","テスト２","テスト３","テスト４"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dataList.count
    }
    
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "myCell", for: indexPath)
        cell.textLabel?.text = dataList[indexPath.row]
        return cell
    }
}
```

##完成イメージ

　ビルドしてこのように表示されれば成功です。
<img src="https://qiita-image-store.s3.amazonaws.com/0/93396/0ce9f63d-bda0-f57a-e120-f12b6a6a9229.png" width=40%>