完全に理解する Storyboard & UIKit (Day 15): UITableViewの実装基礎

設定画面、チャットアプリのタイムライン、Todoリスト... iOSアプリのUI設計において、「同じ形式のデータが下にズラッと並ぶ」デザインは無数に存在します。 これを実現するコンポーネントであり、UIKitの中で最も重要で、最も頻繁に使われるのが、第4部の主役 UITableView です。

1. UITableViewとは？

UITableView は、データを縦方向（垂直方向）のみにスクロールする「1列のリスト形式」で表示するためのビューです。 各アイテムは「Cell（行）」と呼ばれ、それらを「Section（グループ）」に分けることもできます。

プロトコル指向アプローチ

UITableView 自体は「単なる空の筒」です。そこに何個のデータを表示するか、どんな見た目の行にするか、タップされたらどうするかという決定権は持っていません。

代わりに、UITableViewは 「別の誰か（ほとんどの場合はViewController）」にその処理を依頼（Delegate） します。 これが、iOS開発の至る所で登場する DataSource (データ構築役) と Delegate (挙動・イベント対応役) のプロトコルパターンです。

2. Storyboard上の準備

1. ViewControllerのキャンバス内に Table View を配置し、画面いっぱいに広がるようにAuto Layoutの制約を四方（0,0,0,0）につけます。
2. 配置した Table View の中へ、Table View Cell（行のテンプレート）をドラッグ＆ドロップします。
3. ドロップした Cell（Prototype Cell）を選択し、Attributes Inspector (⌥⌘4) で Identifier に MyCell のような文字列を設定します。（これは後でコードからセルを呼び出すための再利用IDです。）
4. TableView から ViewController のコードへ IBOutlet を接続します（@IBOutlet weak var tableView: UITableView!）。

3. 実装の3ステップ

コード側でUITableViewにデータを表示させるための基本ルール（3ステップ）です。

ステップ1: プロトコルに準拠する

ViewController に UITableViewDataSource（必須） と UITableViewDelegate（任意だがほぼ必須） プロトコルを採用します。

swift
// プロトコルをカンマ区切りで追加
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    @IBOutlet weak var tableView: UITableView!

    // 表示したいデータ配列
    let fruitList = ["Apple", "Banana", "Cherry", "Orange"]

    // ...

ステップ2: 委譲先（自分自身）を登録する

「データが必要になったら、私（ViewController）に聞きにきてね」とTableViewに教えます。

swift
    override func viewDidLoad() {
        super.viewDidLoad()

        // DataSource（データの中身）の担当は自分(self)
        tableView.dataSource = self
        // Delegate（タップなどの処理）の担当も自分(self)
        tableView.delegate = self
    }

ステップ3: 必須メソッドを実装する（プロトコルの約束）

UITableViewDataSource を宣言した以上、以下の2つのメソッドの実装が義務付けられます（書かないとビルドエラーになります）。

① 「リストは全部で何行あるか？」を答えるメソッド

swift
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // 配列の要素数をそのまま行数として返す
        return fruitList.count
    }

② 「◯行目には、どんなセルを表示すればいいか？」を答えるメソッド

swift
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        // 1. Storyboardで設定したIdentifier "MyCell" を使い、使い回せるセルを要求する
        let cell = tableView.dequeueReusableCell(withIdentifier: "MyCell", for: indexPath)

        // 2. indexPath.row（現在構築しようとしている行番号: 0, 1, 2...）から該当データを取り出す
        let fruitName = fruitList[indexPath.row]

        // 3. セルに標準搭載されているテキストラベルにデータを入れる（iOS 14以降の実装方式）
        var content = cell.defaultContentConfiguration()
        content.text = fruitName
        cell.contentConfiguration = content

        // 4. 完成したセルを返す
        return cell
    }

これだけで、配列の中身がズラッと並ぶリストUIが完成します！

4. 行をタップした時の処理 (Delegate)

データの表示ではなく、「ユーザーのアクション」への応答は UITableViewDelegate メソッドが担当します。 最も使われるのは「行が選択された時の処理」です。

swift
    // 「didSelectRowAt」... ◯行目がタップされたよ、という通知メソッド
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) -> void {

        let selectedFruit = fruitList[indexPath.row]
        print("タップされたのは：\(selectedFruit)")

        // タップ時のグレーの選択ハイライトを、フワッと消す（標準的なUX）
        tableView.deselectRow(at: indexPath, animated: true)

        // ここからDay 8・9で学んだ画面遷移(performSegueやPush)を行うのが定石です
    }

📝 今日のまとめ

• UITableView はデータを縦にリスト表示するためのコンポーネント。
• TableView自身は「表示域」に過ぎず、中身と処理は DataSource と Delegate プロトコルに委譲して実現する。
• 実装の3ステップ:
  1. プロトコル準拠の宣言（DataSource, Delegate）
  2. 担当者の登録（tableView.delegate = self など）
  3. 必須メソッドの実装（行数と内容）
• Storyboard上でCellに Identifier を設定することを絶対に忘れない。

iOS開発の心臓部とも言える「テーブル表示」の基礎が完成しました。しかし、現在のセルは文字が左にあるだけの寂しいものです。 明日の Day 16 では、Interface Builderを使って自分だけのオリジナルデザインの行（カスタムセル）を作成する方法を学びます。