SwiftでiOSアプリにURLから画像を読み込む方法を実装例付きで解説

iOSアプリ開発において、URLから画像を読み込んで表示する処理は非常によく使われる機能のひとつです。本記事では、Swiftを使ってURLSessionのデータタスクを活用し、ネットワーク上の画像を非同期でダウンロード・表示する方法を、実際のコード例とともにわかりやすく解説します。

画像をバックグラウンドで読み込む理由

画像ファイルはサイズが大きくなる場合があり、メインスレッドで直接ダウンロードするとUIがフリーズし、ユーザー体験を大きく損なってしまいます。そのため、画像のダウンロード処理は必ずバックグラウンドで実行し、完了後にメインスレッドでUIImageViewへ反映させるのが基本となります。

プロジェクトの準備

まずXcodeで新しい空のプロジェクトを作成し、Storyboard上にUIImageViewを配置してください。そして、そのImageViewをコードに接続（Outlet接続）しておきましょう。この状態から実装を進めていきます。

基本的な画像ダウンロードのコード

まずは、URLから画像データを取得するためのシンプルな実装を見てみましょう。

func getData(from url: URL, completion: @escaping (Data?, URLResponse?, Error?) -> ()) {
    URLSession.shared.dataTask(with: url, completionHandler: completion).resume()
}

func downloadImage(from url: URL) {
    getData(from: url) { data, response, error in
        guard let data = data, error == nil else {
            return
        }
        DispatchQueue.main.async() {
            self.image = UIImage(data: data)
        }
    }
}

このコードでは、getData(from:)メソッドがURLSessionの共有インスタンスを使ってデータタスクを開始し、取得した結果をクロージャで受け取ります。downloadImage(from:)メソッド内では、エラーがないことを確認したうえで、DispatchQueue.main.asyncを使ってメインスレッド上でUIImageオブジェクトを生成し、imageViewに代入しています。

UIImageViewの拡張として実装すると便利

上記の処理を毎回ViewControllerごとに書くのは非効率です。そこで、extension（拡張）としてUIImageViewにこの機能を組み込めば、どの画面からでも簡単に呼び出せるようになります。

extension UIImageView {
    func getData(from url: URL, completion: @escaping (Data?, URLResponse?, Error?) -> ()) {
        URLSession.shared.dataTask(with: url, completionHandler: completion).resume()
    }

    func downloadImage(from url: URL) {
        getData(from: url) { data, response, error in
            guard let data = data, error == nil else {
                return
            }
            DispatchQueue.main.async() {
                self.image = UIImage(data: data)
            }
        }
    }
}

viewDidLoadからの呼び出し方法

拡張を定義したら、あとはviewDidLoad()などの任意の場所で次のように呼び出すだけで画像が表示されます。

override func viewDidLoad() {
    super.viewDidLoad()
    let url = URL(string: "https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968h681")
    self.imgView.downloadImage(from: url!)
}

このコードをシミュレーターまたは実機で実行すると、指定したURLから画像が自動的にダウンロードされ、UIImageViewに表示されることが確認できます。

まとめ

SwiftでURLから画像を読み込む際は、以下のポイントを押さえておきましょう。

• URLSession.shared.dataTaskを使えばシンプルに非同期通信が実装できる
• 画像の生成と表示はメインスレッドで行う必要がある
• UIImageViewの拡張として定義すれば再利用性が高まり、コードが整理される

さらに実用的なアプリを開発する場合は、画像のキャッシュやエラー時のプレースホルダー表示なども検討するとよいでしょう。また、KingfisherやSDWebImageのようなサードパーティ製ライブラリを活用すれば、より高度な画像読み込み処理を短いコードで実現することも可能です。