XcodeでカスタムTableViewを作成する【Storyboard編】

iOSアプリを作成していると、カスタムTableViewを実装する必要に迫られる場面に出くわすと思います。
カスタムTableViewの実装方法には何種類かありますが、最も気軽に実装できるのは**Storyboard**を使った方法でしょう。
忘備録がてらまとめてみます。

完成図： ↓これを作っていきます。
![スクリーンショット 2022-03-11 11.50.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629808/6367f421-255b-e3aa-4b17-cc629bbaa6ff.png)

## 1. TableViewを配置し、Cellを配置する
①StoryboardにtableViewを配置し、画面いっぱいに広げます。
②tableView上にtableViewCellを配置します。
③tableViewCellにIdentifierを設定します。
右ペインの右から３番目”Show the Attributes inspector”を開きIdentifierを設定します。ここでは"customCell"という名前にしました（名付け方は自由ですが、後から使うのでわかりやすい名前がいいです）。
![スクリーンショット 2022-03-11 10.01.47 のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629808/1a498979-0142-f8be-2fc2-2ec336c22644.png)
④CellにUI部品を設置します。
ここではImageViewとLabel二つを設置しました。ImageViewとLabelに適当に制約をつけてください。
![スクリーンショット 2022-03-11 16.18.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629808/8b0d3a09-354d-9bf3-53ad-efc541cf86ff.png)



## 2. CustomCellクラスを作成し、CellのUI部品を紐付ける
customCellのUI部品をtableViewと紐付けるために、CustomCellクラスを作成します。
ここがStoryboardを利用した時に特有の部分です。詳しく説明していきますよ。

①ルートフォルダをダブルクリックしてNewFileをクリックします。
![スクリーンショット 2022-03-11 14.21.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629808/8cb44036-a331-58f0-80bf-ae21568d6f24.png)

②CocoaTouchクラスを選択して、UITableViewCellをサブクラスとしたクラスを作成します。
ここでは"CustomCell"という名前にしました。
![スクリーンショット 2022-03-11 10.23.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629808/8d041b4a-55fc-4b92-a950-c3b756e3ea90.png)

③customCellのクラスとしてCustomCellを設定します。
Mainに戻りcustomCellをクリックします。右ペインで”Show the Attributes inspector”を開きCustom Classを設定します。②でUITableViewCellをサブクラスとしたCustomCellクラスを作れていれば、自動的に出てくるはずです。
![スクリーンショット 2022-03-11 10.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629808/666d26fb-72a4-aced-7bcc-7f595f95cfcc.png)

④UI部品をCustomCellに紐付けます。
Assistantを開きます。③でCustomCellを設定できていれば、ココにCustomCell.swiftが出てくるはずです。
![スクリーンショット 2022-03-11 16.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629808/cd15bf83-3582-783d-99a0-aebe053803ee.png)
そしてこのCustomCellに対して、imageViewとLabelをcontrolドラッグして紐づけます。
ここでは、icon、labelTitle、labelContentという名前にしました。
![スクリーンショット 2022-03-11 16.18.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629808/4edcc661-e226-ff66-7b3f-0a1bc7654195.png)



## 3. TableViewでdataSourceとdelegateを継承し、customCellクラスにデータを渡す
最後にViewControllerでCustomCellにデータを渡していきます。

①TableViewのdataSourceとdelegateを紐づけます。
tableViewからViewController（Main画面にある黄色の円と白色の四角で囲まれたもの）に向けてcontrolキーを押しながらドラッグ＆ドロップします。
![スクリーンショット 2022-03-11 16.36.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629808/64a5e4f2-3f73-3d61-72db-83f402319645.png)

②UITableViewDataSourceとUITableViewDelegateを継承します。

③fixが出てくるのでクリックします。
![スクリーンショット 2022-03-11 16.42.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629808/2268a432-b220-a0a6-5783-08b94c0b901c.png)

④継承したtableView(numberOfRowsInSection)関数、tableView(cellForRowAt)関数をcodingします。
なお、アイコン画像については、ドラッグ＆ドロップでassetsに入れました。
```swift:ViewController
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    let icons = ["iwashi", "sake", "fugu", "tai", "hotate"]
    let titles = ["イワシ", "サケ", "フグ", "タイ", "ホタテ"]
    let contents = ["Sardine", "Salmon", "Pufferfish", "Red Seabream", "Scallop"]

    //cellの数を設定
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return icons.count
    }

    //cellの内容を設定
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        //CustomCellクラス型のcustomCellというIdentifierを持ったcellを利用する
        let cell = tableView.dequeueReusableCell(withIdentifier: "customCell") as? CustomCell

        cell!.icon.image = UIImage(named: icons[indexPath.row])
        cell!.labelTitle.text = titles[indexPath.row]
        cell!.labelContent.text = contents[indexPath.row]
            
        return cell!
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
}
```

お疲れ様でした〜〜。
不明点・改善点などがありましたらコメントください〜〜。
※アイコンは[イラストAC](https://www.ac-illust.com/)を利用させていただきました。