カスタムセル内のボタンをタップするとボタンのタイトルが変わる

Question

やりたいこと

下の写真のようにカスタムセルにボタンを配置し，そのボタンをタップするとタップしたボタンのタイトルを変更したい．

現在のコード

CustomTableViewCell.swift

import UIKit

class CustomTableViewCell: UITableViewCell {
    
    //"A面"or"B面"
    @IBOutlet weak var button: UIButton!
    
    override func awakeFromNib() {
        super.awakeFromNib()
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }
}

ViewController.swift

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    //tableViewのインスタンス
    @IBOutlet weak var tableView: UITableView!
    //"A面"か"B面"か判断するためのフラグ
    var array: [String] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.tableView.delegate = self
        self.tableView.dataSource = self
        //初期値は全てのセルが"A面"
        self.array = Array(repeating: "A面", count: 50)
    }
    
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.array.count
    }
    
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as? CustomTableViewCell else {
            return UITableViewCell()
        }
        return cell
    }
    
    
    @IBAction func tapButton(_ sender: UIButton) {
        //タップされたボタンのあるセルを取得
        let cell = sender.superview?.superview as! CustomTableViewCell
        //タップされたボタンのあるセルの位置を取得
        guard let row = self.tableView.indexPath(for: cell)?.row else {
            print("Error")
            return
        }
        switch self.array[row] {
        case "A面":
            //タップされたボタンが"A面"であればフラグを"B面"にする
            self.array[row] = "B面"
            DispatchQueue.main.async {
                //タイトルの変更
                cell.button.setTitle("B面", for: .normal)
            }
        default:
            //タップされたボタンが"B面"であればフラグを"A面"にする
            self.array[row] = "A面"
            DispatchQueue.main.async {
                //タイトルの変更
                cell.button.setTitle("A面", for: .normal)
            }
        }
    }
}

問題点

上記のコードでは選択したボタン以外のボタンのタイトルも変更されてしまいます．
多分セルの再利用の観点から問題が生じているのかと思いますが，解決策がわかりません．
具体的にコードで修正していただける方，よろしくお願いいたします．

環境

xcode : ver11.3.1
swift : ver5.1.3
ios : 13.2

Answer 1

セルにタイトルをつける処理を追加すれば、期待通りに動くのではないでしょうか。

 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as? CustomTableViewCell else {
            return UITableViewCell()
        }
        // ここ
        cell.button.setTitle(array[indexPath.row], for: [])
        return cell
    }

ちなみに、ボタンにタグをつけて、それで押されたセルを特定する方がすっきりとした書き方になりそうですが、いかがでしょうか。

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as? CustomTableViewCell else {
            return UITableViewCell()
        }
        // ボタンにタグをつける
        cell.button.tag = indexPath.row
        cell.button.setTitle(array[indexPath.row], for: [])
        return cell
    }

    @IBAction func tapButton(_ sender: UIButton) {
        // ボタンにつけたタグを得る
        let row = sender.tag
        
        switch self.array[row] {
        case "A面":
            //タップされたボタンが"A面"であればフラグを"B面"にする
            self.array[row] = "B面"
            DispatchQueue.main.async {
                //タイトルの変更
                sender.setTitle("B面", for: .normal)
            }
        default:
            //タップされたボタンが"B面"であればフラグを"A面"にする
            self.array[row] = "A面"
            DispatchQueue.main.async {
                //タイトルの変更
                sender.setTitle("A面", for: .normal)
            }
        }
    }