Swift iOSアプリのテーブル表示｜UITableViewとUICollectionView入門

1. UITableViewとは？

1. UITableViewとは？

UITableViewは、iOSアプリでデータを縦方向に一覧表示するための仕組みです。例えば、電話帳やメールアプリの受信箱のように、下にスクロールして次々とデータを見られるのが特徴です。

テーブル表示を使うと、同じレイアウトの行を大量に効率よく表示できます。行ごとに名前やアイコンを並べたり、タップすると詳細画面に移動できるようにしたりと、アプリ開発でよく利用されます。

2. UICollectionViewとは？

2. UICollectionViewとは？

UICollectionViewは、データをグリッド（格子）のように並べて表示する仕組みです。写真アプリのサムネイル表示やショッピングアプリの商品一覧などに使われています。

テーブルビューが「縦一列の一覧表示」なら、コレクションビューは「縦横に並べる表示」と考えるとわかりやすいです。

3. UITableViewの基本的な使い方

3. UITableViewの基本的な使い方

Swiftでテーブルビューを使うときは、以下の3つの要素が重要です。

• データソース（DataSource）：テーブルに表示する内容を決める役割。
• デリゲート（Delegate）：セルをタップしたときなどの動作を決める役割。
• セル（Cell）：実際に表示される行のパーツ。

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    let items = ["りんご", "バナナ", "みかん"]

    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
        tableView.delegate = self
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return items.count
    }

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

このコードでは、果物の名前をテーブルに表示するシンプルな例です。スクロールできる一覧として簡単に実装できます。

4. UICollectionViewの基本的な使い方

4. UICollectionViewの基本的な使い方

コレクションビューも基本はテーブルビューと同じです。ただし、縦横のレイアウトが可能なので、デザインの自由度が高いのが特徴です。

import UIKit

class CollectionViewController: UIViewController, UICollectionViewDataSource {
    let items = ["��", "��", "��"]

    @IBOutlet weak var collectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()
        collectionView.dataSource = self
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return items.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        if let label = cell.contentView.viewWithTag(1) as? UILabel {
            label.text = items[indexPath.row]
        }
        return cell
    }
}

この例では、絵文字をコレクションビューに並べています。写真や商品画像を並べたいときも、この仕組みを応用できます。

5. UITableViewとUICollectionViewの違い

5. UITableViewとUICollectionViewの違い

UITableViewとUICollectionViewの大きな違いを整理してみましょう。

6. 初心者がつまずきやすいポイント

6. 初心者がつまずきやすいポイント

UITableViewやUICollectionViewを初めて使うときに、多くの初心者が混乱するのがデータソースとデリゲートです。これらは「誰がデータを渡すか」「誰が操作を受け取るか」を分ける役割を持っています。

例えるなら、データソースは「メニュー表を渡す店員さん」、デリゲートは「注文を聞いて調理場に伝える店員さん」と考えるとわかりやすいです。

7. セルのカスタマイズ

7. セルのカスタマイズ

セルのデザインを変更すると、アプリの見た目がぐっと良くなります。例えば、文字だけでなく画像やボタンを配置したり、色やフォントを変えたりできます。

ストーリーボードでカスタムセルを作り、Swiftコードでデータを反映させることで、SNSやECアプリのようなリッチなUIを作れます。