タップした場所に表示させた画像をタップすることで消す方法を教えてください。

Question

前提・実現したいこと

１回目のタップで表示させた画像を、
２回目のタップで、表示させた画像を消したい場合は、
どのように記載させれば動くでしょうか？

ご教授のほど、よろしくお願い致します。

該当のソースコード

以下のコードでは、うまくいきませんでした。

import UIKit

class ViewController: UIViewController {

var coinCount = 0

@IBAction func addImage(_ sender: UITapGestureRecognizer) {


if coinCount == 0 {

let coin = UIImageView(image: UIImage(named: "myImage"))

coin.center = sender.location(in: self.view)

self.view.addSubview(coin)

} else if coinCount == 1 {

let coin = UIImageView(image: UIImage(named: "myImage"))
coin.image = nil
coin.setNeedsDisplay()
coin.layoutIfNeeded()

}

coinCount = coinCount + 1
coinCount = coinCount % 3


}

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}

}

ご教授のほどよろしくお願いします。

発生している問題・メッセージ

エラーは特になし。

使用している言語

swift
Xvode 11.4

ご教授のほど、よろしくお願い致します。

Comments

[TsukubaDepot]

> coin.setNeedsDisplay()
> coin.layoutIfNeeded()
この2つの操作はなにか参考にして追加されたのでしょうか。
もし参考にされた情報があれば念のため教えてもらえますでしょうか。

[magiee]

https://teratail.com/questions/13416
を、参考にしました。こちらの解答者様の欄に記載されておりました。

Answer 1

参考にされた過去の質問を見てみましたが、今回のご質問には必要ない操作だと思います。

今回の質問を解決するためには、まずは変数のスコープ（可視範囲）について理解する必要があると思います。

• Qiita Swiftにおける基本の概念

上記のリンクなどで、宣言した変数（やメソッドなど）がどの範囲まで有効になるかをまず確認してみてください。

さて、下記のコードですが、

if coinCount == 0 {
    // 宣言【1】
    let coin = UIImageView(image: UIImage(named: "myImage"))
    coin.center = sender.location(in: self.view)
    self.view.addSubview(coin)
    // 宣言【1】の有効範囲はここまで
} else if coinCount == 1 {
    // 宣言【2】
    let coin = UIImageView(image: UIImage(named: "myImage"))
    coin.image = nil
    coin.setNeedsDisplay()
    coin.layoutIfNeeded()
    // 宣言【2】の有効範囲はここまで    
}

宣言【1】でcoinという変数を定義していますが、有効なのは前述のリンク先の説明通り宣言【1】の有効範囲はここまでというところまでです。

一方、宣言【2】でもcoinという変数を定義していますが、これは宣言【1】で宣言したcoinという変数とは全く別の変数です。変数名は同じでも、スコープが違いますから別の変数として扱われます（逆に、同じスコープ内で同じ名前の変数を定義した場合、ごく一部の例外を除きコンパイルエラーとなります）。

従って、宣言【2】で

    coin.image = nil
    coin.setNeedsDisplay()
    coin.layoutIfNeeded()

と行っている操作は、宣言【2】で宣言しているcoinという変数に対する操作です。宣言【1】でサブビューに追加したcoinという変数とは実体が違うが名前が同じcoinという変数に操作しているため、宣言【1】で追加した画像を消すことはできません。

解決するためには、宣言【1】のブロック（{}で囲まれた範囲）と宣言【2】のブロック両方で有効な変数を定義する必要があります。そのためには、もう一つ上の階層で変数を宣言する必要があります。

さらに、クリックしたときに画像を表示、あるいは消去するという操作を繰り返すためには、関数を再度呼び出しても有効に利用できる変数を用意する必要があります。

これらを考慮すると、このような感じに組み立てる必要があります。

class ViewController: UIViewController {
    
    var coinCount = 0
    // 複数回呼び出されても値を保持できるように、関数の外側で定義する
    var coin: UIImageView = UIImageView()
    
    @IBAction func addImage(_ sender: UITapGestureRecognizer) {
        if coinCount == 0 {
            // coinCount がゼロのとき
            // 指定された画像をもとにImageViewを作る
            coin = UIImageView(image: UIImage(named: "myImage"))
            // ImageViewの中心座標をタップされた場所にする
            coin.center = sender.location(in: self.view)
            // 親ビュー(view)にサブビュー(coin)を追加して表示させる（実際に画面に表示するのはこの操作）
            self.view.addSubview(coin)
        } else if coinCount == 1 {
            // 画像のビュー(coin)を親ビューから削除（unlink）する
            coin.removeFromSuperview()
            // 次の操作でも消えるが、登録した画像のビューは残ったままなのであまり良い操作ではないはず
            // coin.image = nil
        } // coinCount == 2 の時は何も起きない（条件判定がないため）
        coinCount = coinCount + 1
        coinCount = coinCount % 3
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
}

追記

Xcode は変数のスコープを視覚的に確認できます（標準設定だと色が暗いのでわかりにくいのですが）。

確認したい変数にカーソルを合わせるだけで、同じスコープの変数すべて背景色が変わりますので、これで確認可能です。

Comments

[magiee]

非常に分かりやすい説明ありがとうございました。
スコープについて、知識としてはありましたが、実際に扱ってみないと分からないものですね。
本当に感謝しています。ありがとうございます。

[TsukubaDepot]

Xcodeは標準でスコープを確認する機能が備わっていますので、それを併用するといいかもしれません。

[magiee]

追記までしてくださりありがとうございます！
上記の画像ですと、coinのスコープが、coinCount==0の範囲内のみで、coinCount==1の範囲には無い。かつ、新たな変数を作っているので、同じ名前のcoin変数でも別の変数ということですね。
少しずつ、自分の目指しているアプリに近づいており、感謝しています。