【Swift】サーバーから画像を取得する関数でUIImage型がうまく渡せません

Question

iOSでサーバー上の画像データを取得し、UIImage型で返す関数を作っているのですが、うまく戻り値（UIImage）が渡せません。いま書いているコードは以下の通りです。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let pass = "https://*************/photo.jpg"

        if let result = getImage(pass: pass) {
            // ①ここだと表示されないけど…
            imageView.image = result
        }
    }

    // 画像を取得して返す
    func getImage(pass: String) -> UIImage? {
        var result = UIImage()
        if let url = URL(string: pass) {
            let request = URLRequest(url: url)
            let session = URLSession.shared
            let task = session.dataTask(with: request) { (data:Data?, response:URLResponse?, error:Error?) in
                if let data = data, let image = UIImage(data: data) {
                    result = image
                }
            }
            task.resume()
        }
        /* ②ここに書くと表示されます
        DispatchQueue.main.async {
            self.imageView.image = result
        }
        */
        return result
    }
}

意図としては、getImage関数に画像パスを投げ、返ってきたUIImageを表示する、というシンプルなものです。ですが、①に書いた場合は表示されず、②の位置に書いた場合にのみ表示されます。返ってきたresultを①の位置でprintすると、一応UIImage型（<UIImage: 0x0000000000>のような表示）になっています。

戻り値をVoidにして②のように関数内で書いてしまってもいいのですが、それだと関数にした意味がなく、ファイルの切り分けができなくなるので…

こんな状況ですが、何かお気付きの点がございましたら、ご教授いただけますと幸いです。
よろしくお願いいたします。

追記

ご回答をもとに、修正してみました。
imageViewを引数として関数へ渡し、クロージャ内で表示させる方法です。
これなら怪しげな戻り値を経由させることなく、処理の汎用化もできそうです。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // 表示処理を呼ぶ
        let pass = "https://*************/photo.jpg"
        getImage(pass: pass, view: imageView)
    }

    // 画像を取得して表示
    func getImage(pass: String, view: UIImageView) -> Void {
        if let url = URL(string: pass) {
            let request = URLRequest(url: url)
            let session = URLSession.shared
            let task = session.dataTask(with: request, completionHandler: {
                (data:Data?, response:URLResponse?, error:Error?) in
                if let data = data, let image = UIImage(data: data) {
                    DispatchQueue.main.async {
                        view.image = image
                    }
                }
            })
            task.resume()
        }
    }
}

今回の質問を通して、dataTaskクロージャの正しい使い方を学ぶことができました。
こんなグズグズですが、わたしと同じように悩んでいるSwift初心者の方のお役に立てましたら幸いです。

今回のまとめ**「dataTaskの完了処理はcompletionHandlerの中に書く！」**
今さらすぎてお恥ずかしい限りですが、精進してまいりたいと思います。

Comments

[fuzzball]

>>②ここに書くと表示されます
本当にそこで表示されますか？場所間違ってませんか？

[KumaChan]

②の場所で表示されますし、dataTaskの下（if let...の中）、task.resumeの上（if let...の外）でも表示されます。
②の場所で表示されるのがそもそもイレギュラーなのでしょうか…Swift初心者なので基本的なところがわかってなくてすみません。

[fuzzball]

②に書いたときは①をコメントアウトしてるんですよね？

[KumaChan]

説明が至らず、すみません。②を使うときは①はコメントアウトします。

[fuzzball]

では、
・①は有効にして、さらに print("1:", result) を追加。
・②は無効にして、代わりに print("2:", result) を追加。
で、出力を教えて下さい。

[KumaChan]

1: <UIImage: 0x600003f172c0>, {0, 0}
2: <UIImage: 0x600003f172c0>, {0, 0}
という結果になりました。同じ値が出ているのですが…

[fuzzball]

すみません、一つ忘れてました。
result = image の上に print("3:", result) を追加して出力を教えて下さい。（表示される順番のままに書いて下さい）

その後、print文はそのままで、①を無効、②を有効にした状態で同様に出力を教えて下さい。

[KumaChan]

①を有効、②を無効の状態での出力は以下の通りです。
1: <UIImage: 0x600002cf0460>, {0, 0}
2: <UIImage: 0x600002cf0460>, {0, 0}
3: <UIImage: 0x600002cf0460>, {0, 0}
①を無効、②を有効の状態での出力は以下の通りです。
1: <UIImage: 0x6000032003f0>, {0, 0}
2: <UIImage: 0x6000032003f0>, {0, 0}
3: <UIImage: 0x6000032003f0>, {0, 0}
いかがでしょうか…

[fuzzball]

上は画像が表示されなくて、下は画像が表示されているのですか？

[KumaChan]

はい。①（戻り値）では表示されず、②（関数内）では表示されます。
とはいえ②の位置もイレギュラーで、本来はdataTaskクロージャの中に書くべきなのでしょうか。

[fuzzball]

UIImageのサイズが (0, 0) なのに画像が表示されているのがおかしいです。（出力の右端は画像サイズです）

[fuzzball]

あ、すみません。分かりました。
>> result = image の上に print("3:", result)
上ではなく下でした。下の行に書いて、もう一度結果を教えて下さい。

[KumaChan]

そうなんですね…こちらではなぜか画像が表示されています。
別のURLパスでもやってみましたが、やはり{0, 0}の出力で画像が表示されていました。
うーん。。。

[KumaChan]

あ、3の値が変わりました！！
1: <UIImage: 0x60000377c380>, {0, 0}
2: <UIImage: 0x60000377c380>, {0, 0}
3: <UIImage: 0x600003770070>, {640, 640}
3の位置でのみ、画像データが正しく取得できているようです。

Answer 1

方法1: KumaChanさんがやりたい方法に一番近いです。
考えられるのはreturn resultは画像が読み込まれてない段階で返ってくると思います。
そして、DispatchQueue.main.async()を忘れないでください。
なしでも動くかま、私の場合[UIImageView.image must be used from main thread only]と言う告知が出てきました。

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let pass = "https://www.elastic.co/assets/bltada7771f270d08f6/enhanced-buzz-1492-1379411828-15.jpg"
        
        getImage(pass: pass)
    }
    
    // 画像を取得して返す
    func getImage(pass: String) {
        var result = UIImage()
        if let url = URL(string: pass) {
            let request = URLRequest(url: url)
            let session = URLSession.shared
            let task = session.dataTask(with: request) { (data:Data?, response:URLResponse?, error:Error?) in
                DispatchQueue.main.async() {
                    if let data = data, let image = UIImage(data: data) {
                        result = image
                        self.imageView.image = result
                    }
                }
            }
            task.resume()
        }
    }
}

その以下のコードはただ念のために載せました。

方法2：

        let pass = "https://www.elastic.co/assets/bltada7771f270d08f6/enhanced-buzz-1492-1379411828-15.jpg"
        
        let url = URL(string: pass)
        
        DispatchQueue.global().async {
            let data = try? Data(contentsOf: url!) //画像は存在するかどうかをチェックしてください： if let check / try-catch
            DispatchQueue.main.async {
                self.imageView.image = UIImage(data: data!)
            }
        }

方法3

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!
    var result = UIImage()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let pass = "https://www.elastic.co/assets/bltada7771f270d08f6/enhanced-buzz-1492-1379411828-15.jpg"
        if let url = URL(string: pass) {
            // Do any additional setup after loading the view, typically from a nib.
            downloadImage(from: url)
        }
    }
        
    func downloadImage(from url: URL) {
        getData(from: url) { data, response, error in
            guard let data = data, error == nil else { return }
            DispatchQueue.main.async() {
                self.imageView.image = UIImage(data: data)
            }
        }
    }
    
    func getData(from url: URL, completion: @escaping (Data?, URLResponse?, Error?) -> ()) {
        URLSession.shared.dataTask(with: url, completionHandler: completion).resume()
    }
}

Comments

[KumaChan]

サンプルコードまで書いていただき、ありがとうございます。
おっしゃる通り、最初のコードでは画像取得前に画像表示を試みており、タイミングによって表示されたりされなかったりするようです。
今後は「なんとなく動く」ではなく「ロジカルに動く」アプリをめざしたいと思います。というか、プログラムの基本ですよね…
今後とも、よろしくお願いいたします。

Answer 2

dataTask(with:completionHandler:)は非同期なので、実行（resume()）した直後はまだ処理が完了していません。

getImage(pass:)に、

• ImageViewを引数で渡す
• 画像取得後の処理をクロージャで渡す

などで対応できると思います。

---

②の位置で画像が表示される件ですが、DispatchQueue.main.asyncを使っているために少し時間差が出来ていて、その間に画像の読み込みが完了しているようです。ようするに、たまたま表示されているだけということです。
もっと大きな画像とか、通信状態が悪い環境だと読み込みが間に合わず何も表示されなくなるんじゃないかと思います。

---

ちなみに、DispatchQueue.main.asyncの処理は、通常、

if let data = data, let image = UIImage(data: data) {
    //読み込み完了
    DispatchQueue.main.async {
        self.imageView.image = image //画像をセット
    }
}

ここに書きます。読み込み完了後に画像をセットする、ということです。

Comments

[KumaChan]

ありがとうございます。ようやく謎が解けました。

わたしのコードではcompletionHandlerを省略してましたが、本来はその名の通り、完了処理はこの中に書くべきなんですよね。
②の位置で表示されていたのはおっしゃる通り、たまたまかもしれません。そういえば、ちょっと表示に時間がかかっていました。

本件についてはアドバイスいただいた方法で書き直してみたいと思います。

長時間おつきあいいただき、本当にありがとうございました。
今後とも、よろしくお願いいたします。