チャット画面のセルが、特定の動作をしたあとランダムに非表示になっていく

Question

コード含め長文な相談となりますが、ご回答いただけますと幸いです。

前提・実現したいこと

■アプリ概要
・チャットアプリ
・FirebaseAuthでユーザー登録（メールアドレス・パスワード）
・Firestoreを利用してチャットルームやチャットルーム内のメッセージデータを管理

■実現したいこと
チャットルーム内のメッセージが、「自分のメッセージ」「相手のメッセージ」に分けて正常に表示されるようにしたい

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

「すでに他のユーザーが送信したメッセージが存在するチャットルーム」にて、自分のメッセージを送信すると、ランダムで既存のメッセージが非表示になっていき、何度もそれを繰り返すとやがてすべてのメッセージが非表示となる

該当のソースコード

文字数上限を超えてしまうため、追記いたします。

試したこと

db.collection("room").document(roomName).collection("messages").order(by: "date").addSnapshotListener

・上記で取得したメッセージデータを、for文を使ってMessage型の配列へ追加し、Message型の配列の数をPrint ＞ 正常

・Firestore上ではメッセージデータが正常に反映されていることを確認
・cellForRowAtで構築するメッセージの情報（bodyやtimeStamp、isHiddenの状態など）をすべてPrint ＞ 正常
・新規チャットルーム（仮名：TestRoomA）を作成 ＞ TestRoomA内でメッセージを送信 ＞ 何通送信しても正常に反映（表示）される
・ログアウト ＞ 新規アカウント（別アカウント）作成 ＞ TestRoomAを開く ＞ 上記で送信したメッセージは相手からのメッセージとして表示されているが、ここでメッセージを送信すると、送信する度ランダムに相手からのメッセージが非表示になっていき、やがて自分のメッセージ含めすべてのメッセージがそのチャット画面から非表示になる
※メッセージのデータはFirestore上に残ったままであるため、メッセージが「消える」ではなく「非表示になる」という表現を使っております

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

macOS 11.2.3
Xcode 12.3
iOS 14.3(Simulator) ※手持ちのiPhoneはmacに認識されないため、Simulatorのみで検証しております

メッセージのセルはカスタムセルを使用しているため、カスタムセルの画像も添付致します。![イメージ説明](9becfb1f8b0371a532cca86420f98d22.png)

Answer 1

cellForRowAt の中で isHidden = true にしたものを false に戻してないのが原因ですね。TableView のセルは再利用されるので、他の人のメッセージ表示するために使われたセルが自分のメッセージを表示するために再利用されたり、その逆が起こる可能性があり、そのたびに非表示のものが増えていくと思います。

        if message.sender == Auth.auth().currentUser?.uid{

            print("自分のメッセージ: (message.body)")
            cell.partnersNameLabel.isHidden = true
            cell.partnersImageView.isHidden = true
            cell.partnersMessageTextView.isHidden = true
            cell.timestampByPartner.isHidden = true

        }else{

            print("相手のメッセージ: (message.body)")
            cell.myMessageTextView.isHidden = true
            cell.timestampByMyself.isHidden = true

        }

または、自分と他の人のメッセージ表示するセルはクラスや xib ファイルを分けてもいいかも…。

Answer 2

該当のコードは下記となります。

①チャット画面のコード

//
//  RoomViewController.swift
//  SimpleDiscussionApp
//

import UIKit
import Firebase
import FirebaseFirestore
import SDWebImage

class ChatViewController: UIViewController,UITextFieldDelegate,UITableViewDelegate,UITableViewDataSource {
    
    @IBOutlet weak var tableView: UITableView!
    @IBOutlet weak var messageTextField: UITextField!
    @IBOutlet weak var roomImageView: UIImageView!
    @IBOutlet weak var sendButton: UIButton!
    
    let db = Firestore.firestore()
    var roomName = String()
    var userName = String()
    var userImageString = String()
    var roomImageString = String()
    var messages = [Message]()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        tableView.delegate = self
        tableView.dataSource = self
        messageTextField.delegate = self
        //Cell(xib)の情報を呼び出す
        tableView.register(UINib(nibName: "MessageCell", bundle: nil), forCellReuseIdentifier: "MessageCell")
        //userImage(icon)とuserNameを取り出しておく
        if let savedUserImageString = UserDefaults.standard.object(forKey: "iconImage") as? String,
           let userName = UserDefaults.standard.object(forKey: "userName") as? String{
            
            self.userImageString = savedUserImageString
            self.userName = userName
            
        }
        
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        loadMessages(roomName: roomName)
        roomImageView.sd_setImage(with: URL(string: roomImageString), completed: nil)
        navigationController?.isNavigationBarHidden = false
        sendButton.isEnabled = false
        sendButton.layer.masksToBounds = true
        sendButton.layer.cornerRadius = 25
 
    }
   
    //ルームデータの取得------------------------------------
    func loadMessages(roomName:String){
        
        //メッセージ
        db.collection("room").document(roomName).collection("messages").order(by: "date").addSnapshotListener { (snapShot, error) in
            
            self.messages = []
            print("⓪メッセージの配列を空にしておきます")
            var timeStamp = String()
            let dateFormatter = DateFormatter()
            dateFormatter.dateFormat = "HH:mm"
            
            if error != nil{
                
                print("error: " + error.debugDescription)
                return
            }
            
            if let snapShotDoc = snapShot?.documents{
                
                for doc in snapShotDoc{
                    
                    let data = doc.data()
                    if let sender = data["sender"] as? String,
                       let userName = data["userName"] as? String,
                       let body = data["body"] as? String,
                       let userImageString = data["userImageString"] as? String,
                       let date = data["date"] as? Timestamp{
                        
                        let time = date.dateValue()
                        timeStamp = dateFormatter.string(from: time)
                        let newMessage = Message(sender: sender, userName: userName, body: body, userimageString: userImageString, timeStamp: timeStamp)
                        
                        self.messages.append(newMessage)
                        print("①取得したメッセージ件数分、配列へ追加します")
                        
                    }
                    
                }
                                    
                    print("メッセージ件数: " + String(self.messages.count))
                    self.tableView.reloadData()
                    print("③tableViewのデータをリロードします")
                    if self.messages.count > 0{
                        //[0]からカウントのため、rowが10あれば[0~9]と数えるので、self.messages.count - 1 と記述
                        let indexPath = IndexPath(row: self.messages.count - 1, section: 0)
                        //送信したメッセージの箇所まで自動的にスクロールする
                        self.tableView.scrollToRow(at: indexPath, at: .top, animated: true)
                    
                }
                
            }
            
        }
        
    }
    
    //tableView------------------------------------
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return messages.count
    }
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        print("④配列にある数だけ、セルを構築します（(messages.count)件）")
        let cell = tableView.dequeueReusableCell(withIdentifier: "MessageCell", for: indexPath) as! MessageCell
        let message = messages[indexPath.row]
        
        if message.sender == Auth.auth().currentUser?.uid{
            
            print("自分のメッセージ: (message.body)")
            print("⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤")
            cell.myMessageTextView.text = message.body
            print(cell.myMessageTextView.text!)
            cell.timestampByMyself.text = message.timeStamp
            print(cell.timestampByMyself.text!)
            cell.partnersNameLabel.isHidden = true
            print(cell.partnersNameLabel.isHidden)
            cell.partnersImageView.isHidden = true
            print(cell.partnersImageView.isHidden)
            cell.partnersMessageTextView.isHidden = true
            print(cell.partnersMessageTextView.isHidden)
            cell.timestampByPartner.isHidden = true
            print(cell.timestampByPartner.isHidden)
            print("⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤")

        }else{
            
            print("相手のメッセージ: (message.body)")
            print("⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤")
            cell.partnersMessageTextView.text = message.body
            print(cell.partnersMessageTextView.text!)
            cell.partnersNameLabel.text = message.userName
            print(cell.partnersNameLabel.text!)
            cell.timestampByPartner.text = message.timeStamp
            print(cell.timestampByPartner.text!)
            cell.partnersImageView.sd_setImage(with: URL(string: messages[indexPath.row].userimageString), completed: nil)
            cell.myMessageTextView.isHidden = true
            print(cell.myMessageTextView.isHidden)
            cell.timestampByMyself.isHidden = true
            print(cell.timestampByMyself.isHidden)
            if let image = cell.partnersImageView.image{
                
                print(image)
                
            }
            print("⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤")

        }
                
        return cell
    }
    
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return UITableView.automaticDimension
    }
    
    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        
        if textField.text != nil{
            
            sendButton.isEnabled = true
            
        }
        
        return true
    }
    //メッセージの送信------------------------------------
    @IBAction func sendAction(_ sender: Any) {
        
        if let messageBody = messageTextField.text,
           let sender = Auth.auth().currentUser?.uid{
            
            let timeInterval = Date().timeIntervalSince1970
            let sendTimeInterval = TimeInterval(timeInterval)
            let time = Date(timeIntervalSince1970: TimeInterval(sendTimeInterval))
            let userName = self.userName
            
            db.collection("room").document(roomName).collection("messages").addDocument(data: [
                
                "sender":sender,"userName":userName,"body":messageBody,"userImageString":self.userImageString,"date":time
                
            ]) { (error) in
                
                if error != nil{
                    
                    print("error: " + error.debugDescription)
                    return
                    
                }
                
                self.messageTextField.text = ""
                self.messageTextField.resignFirstResponder()
                
            }
            
            db.collection("room").document(roomName).updateData(["latestMessage":messageBody], completion: { (error) in
                
                if error != nil{
                    
                    print("error: " + error.debugDescription)
                    return
                    
                }
                
            })
            
        }
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        
        messageTextField.resignFirstResponder()
        
    }
    
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        
        messageTextField.resignFirstResponder()
        
    }
    
}

Comments

[hoshi-takanori]

MessageCell は再利用されるので、他の人のメッセージ表示するために使われたセルが自分のメッセージを表示するために再利用されたり、その逆が起こります。ので、isHidden = true にしたやつは isHidden = false に戻す必要があります。(または、自分と他の人のメッセージ表示するセルはクラスを分けてもいいかも…。)

[beginner_sa]

ご回答ありがとうございます！！
そうゆうことでしたか…MessagaCellが再利用されるというポイントを理解できておりませんでした、、

> (または、自分と他の人のメッセージ表示するセルはクラスを分けてもいいかも…。)
ご助言いただいた上記のことなのですが、クラスを分ける場合、カスタムセルももう一つ作るという理解で合っていますでしょうか？？

[hoshi-takanori]

> クラスを分ける場合、カスタムセルももう一つ作るという理解で合っていますでしょうか？？
はい、クラスを分けて、xib も分けるという意味です。(クラスは分けずに、xib だけ分けてもいいかも…。)

[beginner_sa]

ありがとうございます！
今晩コードを修正/追記して、またご報告させていただきます^ ^！

[beginner_sa]

先ほど必要なコードを追記しましたところ、無事にセルが表示されるようになりました！
数日ずっと行き詰まっていたので大変助かりました・・・

ありがとうございました！

[beginner_sa]

ベストアンサーをお付けしたいので、もしよろしければ、ご回答くださった内容を回答の方へ再投稿いただけますと幸いです！