【Swift入門】UITableViewのセル画像を遅延読み込み（Lazy Loading）する方法

はじめに

iOSアプリでリスト形式の画面を作る際、テーブルビューの各セルにネットワーク上の画像を表示したいケースは非常によくあります。しかし、すべての画像を一括でダウンロードしてしまうと、起動が遅くなったりスクロールがカクついたりする原因になります。
そこで役立つのが「遅延読み込み（Lazy Loading）」という手法です。本記事では、Swiftを使ってテーブルビューのセルに画像を遅延読み込みさせる方法を、手順を追ってわかりやすく解説します。

実装手順

1. テーブルビューとセルの準備

まず、テーブルビューとテーブルビューセルを作成し、セルの中にイメージビュー（UIImageView）を配置します。

次に、作成したセルに対してカスタムクラスを割り当てておきましょう。

2. cellForRowAtメソッドの実装

cellForRow(at:) メソッドに以下のコードを記述します。

let cell = tblView.dequeueReusableCell(withIdentifier: "CustomCell") as! CustomCell
return cell

3. 画像ダウンロード用の関数をextensionとして作成

続いて、URLから画像をダウンロードするための関数を作成し、UIImageViewの拡張（extension）として組み込みます。こうすることで、アプリ内のどのUIImageViewからでもこの機能を再利用できるようになります。

func setImageFromUrl(ImageURL :String) {
    URLSession.shared.dataTask( with: NSURL(string:ImageURL)! as URL, completionHandler: {
        (data, response, error) -> Void in
        DispatchQueue.main.async {
            if let data = data {
                self.image = UIImage(data: data)
            }
        }
    }).resume()
}

4. セルへの適用

最後に、cellForRow(at:) メソッド内で上記の関数を呼び出します。ここでの img は、カスタムクラス内で定義したアウトレット（IBOutlet）接続です。

cell.img.setImageFromUrl(ImageURL: url)

実行結果の確認

この例では、オープンソースで公開されているサンプル画像 “https://homepages.cae.wisc.edu/~ece533/images/boat.png” を使用しています。

同じコードをiPhone 7 Plusのシミュレーターで実行すると、以下のような結果になります。

まとめ

URLSessionのdataTaskを使えば、シンプルなコードで非同期の画像ダウンロードを実現できます。特に重要なのは、DispatchQueue.main.async でメインスレッド上のUI更新を行っている点です。UI操作は必ずメインスレッドで行う必要があるため、この書き方を覚えておきましょう。

より実用的なアプリを目指す場合は、画像のキャッシュ管理やダウンロード中のプレースホルダー表示の追加、あるいは SDWebImage や Kingfisher といった定番ライブラリの活用も検討すると良いでしょう。