[Swift] [Xcode] xibを使用してUITableViewを実装してみた

#完成品
![スクリーンショット 2022-02-15 19.46.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1908752/6950f558-320d-3ffc-5645-d3803f788e07.png)

#実装
##tableView
controllerにtableViewを追加します
![スクリーンショット 2022-02-15 19.26.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1908752/a27cdcb6-4ca2-fb8d-231e-cbba38a58a21.png)

![スクリーンショット 2022-02-15 19.26.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1908752/7654e008-963e-d1ef-91a0-314dc6432186.png)


tableViewを選択した状態でcontrollerにoutlet接続します
![スクリーンショット 2022-02-15 19.27.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1908752/762c2a80-96d8-7398-bd67-289d606963a0.png)

![スクリーンショット 2022-02-15 19.27.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1908752/99d752ad-8056-b50f-e676-ae7e22f615f7.png)

##xibファイルの作成
続いてxibファイルの作成です。
左上のFile→New→Fileを選択します。
![スクリーンショット 2022-02-15 19.29.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1908752/4cc1e39b-725e-c631-803e-b8f9242d1423.png)

ここではCocoa Touch Classを選択してください。
![スクリーンショット 2022-02-15 19.29.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1908752/6116c54c-df0e-b0e5-25ab-ba00af0254ea.png)

SubClass ofをUITableViewCellにしてください。またAlso create Xib fileにチェックが入れてください。これらが確認できたらClass名をつけます。ここではGafaTableViewCellとしています。ここまでできたらNextを押してください。
![スクリーンショット 2022-02-15 19.30.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1908752/362de519-16f2-c9f9-baad-7c51eca55b3c.png)

GafaTableViewCellのxibファイルができました。右上の＋ボタンを選択しcellにLabelを追加してください。
![スクリーンショット 2022-02-15 19.30.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1908752/a37da44d-2206-0dc0-0384-3b8ebb94175b.png)

labelに対して、先ほど生成したGafaTableViewCellファイルにoutlet接続します。
![スクリーンショット 2022-02-15 19.32.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1908752/00465b96-b76a-1351-1af5-48cbacd71ff5.png)

ここではgafaLabelとしておきます。
![スクリーンショット 2022-02-15 19.32.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1908752/2e252358-c3f6-a934-719a-cd5688aa21ce.png)

Custum Classの下のClassがGafaTableViewCellになっていることを確認してください。
![スクリーンショット 2022-02-15 20.56.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1908752/f2f6bd85-055b-c3a1-aac1-b3ea5db5596c.png)

Identifierが空になっていることを確認してください。
![スクリーンショット 2022-02-15 20.57.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1908752/2715d82a-7db1-3d29-75cd-90bb3f250c0f.png)

Identifierをcellと入力します。
![スクリーンショット 2022-02-15 20.56.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1908752/7a8b4f11-e3b5-d042-16a2-475d6816eaee.png)



##ViewController
ViewControllerの全体のコードを先に載せます。
このままコピペしてビルドすれば完成です。

```swift:ViewController.swift
import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var tableView: UITableView!
    let gafaList = ["Google","Amazon","FaceBook","Apple"]
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
        tableView.register(UINib(nibName: "GafaTableViewCell", bundle: nil), forCellReuseIdentifier: "cell")
    }


}
extension ViewController:UITableViewDelegate,UITableViewDataSource{
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return gafaList.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! GafaTableViewCell
        cell.gafaLabel.text = gafaList[indexPath.row]
        return cell
    }
}
```

カスタムセルでない一般的なTableView?と違う点は下記のコードだと思います。nibNameは先ほど作成したXibファイルのファイル名を、bundleは基本nilでforCellReuseIdentifierは先ほど設定したidentifier(=cell)を書いてください。

```swift
tableView.register(UINib(nibName: "GafaTableViewCell", bundle: nil), forCellReuseIdentifier: "cell")
```


```swift
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as? GafaTableViewCell else { fatalError("The dequeued cell is not instance") }
        cell.gafaLabel.text = gafaList[indexPath.row]
        return cell
    }
```

#完成品
[完成品のコード](https://github.com/mikekondo/SampleCode-XibTableView)
![スクリーンショット 2022-02-15 19.46.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1908752/19258256-2014-88db-b3b5-c4bef7f34801.png)